Page Speed Analytics: How to Improve Web Page Load Time – Part II

connection-multiplexing-1.jpg
Facebooktwittergoogle_pluspinterestlinkedinmail

In the last post, we talked about page speed tools and analytics. In this post, we will dig deeper and discuss how to improve page load time.

If you are getting started with page speed analytics then Google’s page speed web app is the simplest tool to identify key underlying issue with your website load time.

Here are the few of the most popular ways to reduce web site load time and improve page speed.

#1 Minify CSS and Javascripts – CSS files have changed the way how we code web pages. The enormous customization, flexibility and benefits offered by CSS scripts are unmatched. CSS and Javascript files do tend to get heavier pretty quickly due to excessive customizations of web pages and presence of white spaces/comments.

Minification of CSS and Javascripts involves removing unwanted elements from the code and compressing the file size to reduce download time.

Manual removal of the unwanted code elements could be tedious when dealing with a larger file. Good news is there are several free tools on the web that offers automated fix to this problem.

Google minify is one of them. Minify is a php application that combines CSS or Javascript files, removes white spaces and comments.

Before

fiddler before

After

fiddler after

Follow these by step instructions to install and run Google minify on your website. Fortunately, for wordpress fans there is a simple Google Minify plugin.

#2 Leverage browser caching – Image files on the web pages generally take time to download resulting in increased site load time. Images can load faster by leveraging browser caching.

Browser caching allows the images to be downloaded directly from the local disk instead of the network. This technique can be used for other cacheable objects such as JS / CSS files, pdf, flash and media files.

Cache duration can be controlled by configuring caching headers such as “Expires”, “Cache-Control: max-age” and “Last-Modified” on your web server or using .htaccess file.

The idea is to set a longer expiration date in the HTTP headers.

ScreenHunter 38 May. 17 23

#3 Parallelize downloads – The concept of parallel downloads/connections dates back to the early days of the web when most users used dialup internet connections. Due to the limitation of the data delivery speed and bandwidth issues, the browser-server connection was restricted to a small number of simultaneous connections.

It is amazing that even though the speed of data delivery has increased dramatically most browsers still allow two concurrent connections per web server host by default. Users can easily modify their browser setting to allow more than two concurrent connections and this could improve the load time. However, instead of relying on users to make this change web developer can use multiple hostnames to store content. This can be done by using CNAMEs for the host such as file1.hostname.com, file2.hostname.com and file3.hostname.com all pointing to the hostname.com.

Using multiple hosts will double the number of concurrent connections allowing parallel downloads. A study conducted by Ryan Breen of Ajaxperformance.com shows the parallelizing downloads can improve load time by 40%.

connection-multiplexing

Another technique to improve load time by increasing the number of connections is to leverage CDN technology to deliver data. CDNs automatically manage the delivery of content across networks.

All the techniques listed in this blog post provide the biggest return in terms of load time improvement. There are several other ways to improve website load time such as combining images into CSS sprites, minify HTML, and minimize redirects and are worth learning.

Hope you enjoyed this post. Subscribe to the RSS feed and please share your thoughts, insights and comments below. Thank you!

Leave a Reply

Be the First to Comment!

Notify of
avatar

wpDiscuz