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:
- Optimize images by reducing unnecessary data and minimizing file sizes.
- Serve scaled images at the size they should be, as opposed to loading large images and shrinking them to fit the space.
- Focus on loading “above the fold” content first, before loading additional scripts.
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.
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.