Load Time Optimization

by Jenifer W

Load Time Optimization

A website’s page load time plays a very important role in user and consumer experiences. The faster the page responds and loads to the user, the better the experience will be for the user. In a study, “nearly one-third (32%) of consumers will start abandoning slow sites after one to five seconds” (“Seconds count”, 2010). This means that loading performance on website is very crucial and there are many ways to optimize page load time. One method is to use AJAX to reduce latency over the past years by retrieving bits of web technology code to alter the layout of page rather than re-creating a whole new page with similar content. However, this method is not optimal to provide the best optimization on loading pages as many sites references tons of external objects that are mostly HTTP requests for images, JavaScripts, and stylesheets (Hopkins). Using AJAX does not guarantee that the user does not have to wait (“Best practices for,” ). For this reason, we can look at other additional alternatives on how to optimize page load time to improve a site’s usability and SEO. Many developers focus on the back end of the website to reduce costs but it does little to cover latency. “It seems almost as if the highspeed storage and optimized application code on the back end have little impact on the end user’s response time. Therefore, to account for these slowly loading pages we must focus on something other than the back end: we must focus on the front end” (Souders 2008). Below are suggestions from Hongkiat Lim’s article called “Ultimate Guide To Web Optimization (Tips & Best Practices)”:

Server-Side Optimization

  • Selecting a decent web host – Before purchasing from a web hosting site, consider the hosting site’s security, accessibility, server stability, prices and customer supports.

  • Host assets separately – Assets are web components such as images and static scripts (CSS, JS, graphics) that do not require server-side processing. By hosting these separately, there can be large improvements in server stability.

  • Compression with GZip – By compressing content that is needed to travel from the server side to client side, it will greatly reduce the time needed to process requests.

  • Minimize redirections – For every redirection, it creates an extra HTTP request and RTT (round-trip-time) so the more redirections you have, the slower it will take for the user to get the the page he or she wants

  • Reduce DNS lookups – It takes about 20-120 milliseconds for DNS (Domain Name System) to resolve IP address for a given hostname or domain name. During this time, the browser cannot do anything until this procedure is done.

Assets Optimization

  • Merge multiple JavaScripts into one.

  • Compress JavaScripts and CSS sheets – Use compressors like Minify, compressor.ebiene, javascriptcompressor.com, CleanCSS, and CSS Optimizer.

  • Customize header expiry/caching – If you use a customized Expiry header, we components will skip unnecessary HTTP requests when the user reload the same page. This way, bandwidth will be reduced and provide faster page load time.

  • Off-loading assets – By separating the JavaScripts, images, CSS, and other assets from the main server, we can place them on another server to rely on web services.

  • Handling web images – It is important to optimize the images as images can take up a lot of bandwidth. You can do so by optimizing the images for the web with the different image formats and by not scaling down the images.

  • Handling CSS – Keep the markup clean by using CSS Sectors, keep the code short, use CSS sprites to reduce HTTP requests, use declarations only once, and reduce the amount of CSS files.

Web Services and Tools

There is more that is offered than what is written above such as using a tool and service to analyze and help optimize a website’s performance. Some tools and services include Yahoo! YSlow, PageSpeed, and Pingdom Tools. In this blog, I will be focusing on PageSpeed as the optimization tool to use.

PageSpeed

PageSpeed is one of the available tools that can be used to analyze and optimize websites. PageSpeed has two services: analysis and optimization. The analysis tool is known as PageSpeed Insight and it is available through a website link or it can be downloaded as a Chrome or Firefox extension for free. The optimization service is known as PageSpeed Service which is currently free for a limited number of webmasters and the competitive pricing will be announced at a later date as this service is still in beta.

PageSpeed’s best practices to evaluate performance are covered in six categories:

  • Optimizing caching – keeping your application’s data and logic off the network altogether

  • Minimizing round-trip times – reducing the number of serial request-response cycles

  • Minimizing request overhead – reducing upload size

  • Minimizing payload size – reducing the size of responses, downloads, and cached pages

  • Optimizing browser rendering – improving the browser’s layout of a page

  • Optimizing for mobile – tuning a site for the characteristics of mobile networks and mobile devices

PageSpeed Insight

PageSpeed Insight analyses a website and provides a detailed report on how the site can be improved to produce better performance. It identifies best practices that can be applied onto the site. The link to the online service is here: https://developers.google.com/speed/pagespeed/insights

Below is an example of using PageSpeed Insight using Cal Poly Pomona’s website.

Zoomed in:

You will see the general result of Cal Poly Pomona’s site and suggestions made by the tool. The suggestions are labeled with the title of the suggestion and a priority level: Low (L), Medium (M), High (H).

Clicking on the links will direct you to another page with detailed information on the suggestions that are being made. Below are two examples:

The suggestion for the one above is stating to use inline CSS instead of making a separate CSS file reduce blocking of page rendering.

The suggestions above provides a list of image files that could be shrunk down in file size if they properly sized the images to the appropriate dimensions rather than using markup to resize it.

PageSpeed Service

This service is an online service that allows your web pages to load faster for the users. It dynamically rewrites the web pages to improve the page’s performance, serves optimized content via Google servers to reduce round-trip times, reduce the number and size of resources, reduce perceived page load time by prioritizing content on a page. What will basically happen is that the users on the browser will view the website and the content is hosted on the PageSpeed servers, but the PageSpeed servers will constantly check back on the original host servers for content updates.

How fast a page loads will determine how likely a website can be successful as users who view the pages have better user experiences if the page loads fast. There are many ways to improve page loading time such as server side optimizations, assets optimizations, and using tools and services to optimize load time. PageSpeed is a great tool and service from Google that can greatly improve a site’s performance through analyzing the website’s code and automatically optimizing the pages through their service.

References

Best practices for speeding up your web site. (n.d.). Retrieved from http://developer.yahoo.com/performance/rules.html

Google developers: Make the web faster. (2012, June 09). Retrieved from https://developers.google.com/speed/

Hopkins, A. (n.d.). Optimizing page load time. Retrieved from http://www.die.net/musings/page_load_time/

Lim, H.  (n.d.) Ultimate guide to web optimization (tips & best practices). Retrieved from http://www.hongkiat.com/blog/ultimate-guide-to-web-optimization-tips-best-practices/

Seconds count: Website speed most important. (2010). Chain Store Age, 86(7), 14.

Souders, S. (2008). High performance web sites. Queue, 6(6), 30-37.

3 thoughts on “Load Time Optimization

  • May 29, 2013 at 2:08 pm
    Permalink

    I’m curious as to why you mention to host images and scripts on another server versus the server your site is hosted at. What happens if the other server has downtime? No server is guaranteed to be up 100% of the time (usually why places say 99.9% uptime). If that happens, then everything is broken.

    You fail to mention about sites that host video and stream it automatically. What can be done about this aspect. Video currently uses the most bandwidth of anything on the web. How can this be optimized to achieve faster load times while maintaining decent quality? It is a big part of the web now that we have bandwidth to handle it. Some people don’t want to just read and look at pictures (personally, I prefer to read the article vs. watch someone talk).

    Image optimization tools are not always perfect. I’ve tried some but they can leave images still at a big file size. Albeit old school, I still recommend image splicing. This method takes one big image and splits it up into multiple smaller images which can be laid out in a table. Loading multiple smaller images can be faster than loading one big image.

    Otherwise, I think your other methods are very useful. Thanks for sharing.

    • May 29, 2013 at 3:26 pm
      Permalink

      As you said, no server is 100% up all the time so selecting decent servers/hosts is very important. The same concept would happen if your main site’s server is down – “everything is broken”. The main reason it is suggested to host your assets on other servers is to reduce the amount of HTTP requests for load time optimization.

      I admit, I didn’t say much about videos (these are also assets) as I was much more focused on images, textual content, and markup languages. Of course there are ways to to optimize videos for the web like video editing and compression.

  • June 9, 2013 at 11:54 pm
    Permalink

    I like how you get into detail with server side and page detail. It is very true that the more spoiled we become with faster and faster internet speeds waiting that extra second or two can really discourage someone. I too agree with Jason tho that for image optimization, Image Splicing is a fast way to get images to load. Great blog tho!

Comments are closed.