by Jenifer W
Load Time 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.
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.
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 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 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.
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.
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.
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.