Page load times are very important from the visitor’s point of view and to make you understand, we give out these statistics: the average smartphone user will leave your website if it does not loads within 3 seconds; Google now considers page load times as one of the major factors for search engine rankings; in a survey 75% of the internet users agreed to the fact that they would not return to a website that does not loads within 4 seconds.
Having a fast website is extremely crucial for your business if you want it to grow through the online channel. There is simply no room left for slow websites to compete in the online space.
Factors Affecting Page Load Times
The load time of a website is directly correlated to the demand made onto the website hosting server. More the demands are made onto the server, the more time it takes for the web elements to render, hence a slower loading website.
Common examples of HTTP requests for web pages:
- Loading CSS style sheets
- Loading scripts
- Loading heavy images
- Loading HTML
Factors such as the size of the images play a considerable role in the page load times. Large and high resolution images can take 10 times as long to load as compared to normal images and unnecessary large files can drastically reduce the page rendering speed.
Tracking Webpage Speed and Improving The Page Load times
You can track your webpage’s speed scores through Google’s page speed insights and Yahoo’s Yslow for search. Google has also introduced a page speed checker plugin that can also work well with Firefox when Firebug is installed.
Sample Website
Google’s page speed insights is an awesome tool for developers to keep track of the bugs that lead to slower web page load speed. As is the case of lotusresidence.com, the tool gives an awfully low score of 26/100 for mobile site and 31/100 for desktop site. It also tells the areas that lead to such low score or the web elements on the website that are causing it to load slower.
Steps to improve on Page Speed Score
Step 1: Compress Images
Developers should use compressed images for web-based quality, generally they are high resolution png images. If this is not done at the time of web development of website, then it will definitely lead to slower page load times. They can do this by using the default image compressor built into google’s page speed plugin. Save the compressed image on your computer and then upload it on the place of the uncompressed image.
Step 2: Scale images
Only an uncompressed image is not the problem, but the size of the images according to the screen size over which the web page is opened also causes the server to resize the image appropriately and then display it. Hence, images must be scaled properly in order to avoid the server lag needed to resize the images. You can scale images in Photoshop by adjusting them to the same pixel dimensions that they will be in your HTML code.
Step 3: Utilize browser caching
Using browser caching stores is a great way to zoom up page speed tremendously and reduce server lag. Browser caching stores can be used to store cached versions of static resources of web pages. To enable caching, you will want to add the following file to your .htaccess file:
# BEGIN Expire headers
ExpiresActive On
ExpiresDefault “access plus 1 seconds”
ExpiresByType image/jpeg “access plus 2592000 seconds”
ExpiresByType image/png “access plus 2592000 seconds”
ExpiresByType image/gif “access plus 2592000 seconds”
ExpiresByType text/css “access plus 604800 seconds”
ExpiresByType text/javascript “access plus 604800 seconds”
ExpiresByType application/javascript “access plus 604800 seconds”
ExpiresByType text/html “access plus 2592000 seconds”
# END Expire headers
Step 4: Combine images into CSS sprites
CSS sprites is another great way to reduce page load times, especially for those websites that have or wish to have multiple images on their web pages. In this method, images can be combined into CSS sprites, i.e., they can be combined into one large image that is made up of multiple number of smaller images. Combining 5 images into one CSS sprite is the fastest way to speed up a website by allowing a browser to load one image instead of 5.
The easiest way to create CSS sprites is to use Spriteme.
Step 5: minify HTML, CSS, and JavaScript
HTML, CSS and JavaScript can all be compressed to speed up their loading times. There are a number of resources available on the web that minify these types of files, minifier is one great resource to help you with minifying.
Step 6: Loading static resources on CDN’s
If your website contains a number of static resources then you can use a “CDN” or Content Delivery Network to load these static resources. A CDN is a way to reduce server lag by loading static resources on a network of fast loading servers. There are some popular websites that use a CDN : ESPN and NBA.com.