Load Time Optimization{3}


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.