Load Time Optimization

An Excerpt from Speed and the Customer Experience

Responsive Design has seen its share of excitement and criticism since its introduction. Both speed and user experience, however, have been at the top of the criticism list. Learn more about why this is, and how Responsive Design experts tackle these issues through the study of a 1-800 CONTACTS Responsive Design implementation.  In this excerpt, we focus on the speed aspect of Responsive Design.  For the full whitepaper, please download it now. 

Load Time Optimization

Optimizing speed comes in three flavors – page-load speed, execution speed, and mobile UI optimization. Most people focus on page-load speed, but rest assured, execution speed and mobile UI optimization also play a pivotal role in user satisfaction. Execution speed is how long a menu takes to pop up once a user clicks, mobile UI optimization is how long it takes them to fill out a form. The number one contributing factor to all of these areas is the skills of a developer. A savvy developer will write clean, organized code, and will know the tools that help them optimize for speed.

Load Time

When addressing page-load time, it is good practice to set goals to give yourself parameters to work around, i.e. “I want this to load on a tablet in under five seconds.” Your goal should be established at the beginning of the site planning stages. How you approach, design and manage your responsive site will affect speed. If you have a strict goal, having developers in on early design stages is critical. Developers have the ability to tell you when a layout is not optimal for speed, what is even possible, and what factors will give you the fastest load time. Meaning, if a design changes the order of items displayed on a page from desktop to tablet, a developer would be able to tell you that change requires more JavaScript, and that will affect your speed. Javascript is an important and heavily utilized tool in Responsive Design, but the key is knowing when and how to use it in your code. In the end, a designer who understands HTML, CSS and Responsive Design is the ideal route. A knowledgeable designer will save you design iterations, loading time, creative vs tech battles, and budget. 

Images will have the most significant impact on the load time of your site, with JavaScript coming in second, and HTML and CSS last. This is why image optimization and clean JavaScript will make the biggest impact on your site load time.

Expert Developer Methods

Expert developers employ these methods and tools to help reach their speed goal:

  1. Images: Image selection and optimization will account for 50-75% of page download time. If a breakpoint doesn’t require a large image, substitute the large image for a smaller one. 
  2. Coding: Use CSS instead of JavaScript when possible. Keep JavaScript use restricted to the necessities.
  3. Lazy loading: Lazy loading is a method of loading code only once the user needs it, and it can buy you some time by making the page “feel faster” to the end user. 
  4. Content Delivery Network: Cache pages and static assets using an external CDN (Content Delivery Network) that has servers close to your users. This will reduce latency and increase download speeds.
  5. Local caching: Cache data in local storage for faster retrieval from the browser.
  6. CSS: Minifying and gzipping your CSS will decrease your file size. 

When you put all of these things together, they are essentially tools utilized by developers. The key ingredient to speed is a developer who knows how to pull all these tools together and utilize them to the fullest.

Today is a different day for the web designer; understanding HTML and CSS has become critical to developing responsive website designs. Reviews should now be conducted in web tools like Axure, not using static Photoshop images. Most importantly, layouts for all three breakpoints should be reviewed simultaneously. 

Join the Discussion