How to Make Responsive Web Design Faster

Posted on Tuesday, October 15th, 2013 by Print This Post Print This Post

Categories - Featured, Mobile, SEO

website speed

In our previous blog post, we discussed an ongoing problem uncovered by our Mobile Experience Scorecard report on the Fortune 100 – sites using Responsive Web Design (RWD) take significantly longer to load then dedicated mobile sites or desktop sites.  Yet using RWD remains an industry best practice because of the significant advantages it offers over other configurations. Fortunately, there are a number of tactics that, when implemented, can minimize the load speed to align with that other, elusive best practice of keeping load speeds under 1 second. The overarching strategy for minimizing load speed is streamlining mobile sites by eliminating all unnecessary parts, leaving only the most essential components.  Adhering to Google’s PageSpeed Insight Rules is a great place to start. Here are some of the more common issues:
  1. Optimize images by reducing unnecessary data and minimizing file sizes.
  2. Serve scaled images at the size they should be, as opposed to loading large images and shrinking them to fit the space.
  3. Leverage browser caching by saving elements (images, JavaScript and CSS files) on a visitor’s device. This will allow them to access the already downloaded files locally, instead of having to download them again every time they visit a page.
  4. Streamline JavaScript and CSS data by saving it in external files instead of placing it in the HTML pages. Combine and minify these files where possible, and use compression to reduce their size.
  5. Focus on loading “above the fold” content first, before loading additional scripts.
RESS An additional, more comprehensive way to combat long load speeds is to integrate server-side components with responsive design, a union called Responsive Design + Server Side Components, or RESS. In RESS, all elements, including images, media files, or other page components, are selectively managed from the server, instead of from the client-end.  The different components are chosen and served based on user detection, which identifies the user’s device type.  Because the components are managed from the server, the user gets only the resources he or she needs without having to download every element, which is then managed on the client-side.  RESS differs from standard RWD, which loads all the various components within a page and uses media queries to display or hide certain components after the fact.  RESS, in contrast, allows these components to be stored on the server, which reduces the page weight and increases the page load speed by streamlining only the necessary parts to a user based on the device type. One use of RESS is for optimizing images by device.  For example, you could store four different versions of one image on the server – one for mobile, tablet, desktop, and a high-res version for Apple’s Retina Displays.  Then you could use script on the page to retrieve only the one image relevant to the current user’s device. RESS can also be used to serve different versions of media files.  Because Apple iOS will not play Flash videos, you can serve Flash videos to Android devices and desktops, but serve an mp4 video file for iPhones and iPads.  These extra files are stored on the server, so the user’s device only needs to download the video for his or her particular device. SRCSET Another alternative for managing responsive images is the srcset attribute. The srcset attribute is currently being implemented by Webkit and it’s the first step toward providing this dynamic and efficient functionality with in-line code, instead of JavaScript, CSS, or server-side solutions. It basically provides alternate versions of an element, based on the display and includes a fallback version for legacy browsers that do not support the new tag. RWD isn’t perfect yet, but developers are putting in the effort to provide solutions to constantly improve and optimize it. Optimized RWD sites require additional resources to develop, but if you follow these best practices for minimizing load speed, it’s worth the extra effort.

Tags | , , , , , , , ,

4 Responses to “How to Make Responsive Web Design Faster”

  1. Alva Somoza says:

    Keep the great article coming Kirby!I am not fully conversant with Responsive Web Design (RWD). Thank you for listing some of the common issues regarding the page speed and introducing the best practice for minimizing load speed. Keep on posting great topics. Good stuff. I look forward to your next post Kirby. Again, thank you.

Trackbacks/Pingbacks

  1. Top 10 SEO New Year's Resolutions for a Successful 2014 | jhWebWorks | Columbus Ohio Web Design, Development, SEO, Social Media
  2. Top 10 SEO New Year's Resolutions for a Successful 2014 : Web & Search Engine Optimizers : RippleSmith Web Optimization Services

Leave a Reply

Follow Us on Twitter

Authors