Because of the increase in number of people who browse the web using mobile devices with different screen sizes, it has become imperative for web designers to make their sites and pages able to adapt and look good no matter what the resolution of the device’s screen may be. That’s where responsive web design comes in. Unfortunately, there’s a trade-off for making your website responsive; it loads all of the same HTML elements for every device, including those intended for tablet and desktop delivery thereby leading to slower page loading time.

But there are things you can do to minimize the negative effect and in turn improve performance. How you ask, by reducing the size of the pages and the resources to be loaded. You can accomplish this by doing the following:

• Minimize the number of HTTP requests by compressing CSS and JavaScript resources. You can use an open source CSS authoring framework such as Compass. For JavaScript, there’s UglifyJS.

• Use conditional loading to make sure that mobile and smartphone users don’t download aspects of your site that they won’t use anyway thereby slowing the loading process down. This can be applied to pretty much any element of your site: images, widgets, maps, etc.

• Prevent loading of legacy content (i.e. images) by altering the markup by changing the src or img elements using something like the PHP solution Adaptive Images. This will detect screen size and automatically create, cache, and deliver the appropriate scaled down embedded HTML images without the need for changing the markup.

• For text, you can use a tool that will help cause it to wrap naturally when the device is narrowed. One such tool is jQuery plugin called FitText that will auto-update your headlines’ font size, with options for minimum and maximum sizes.