Tips for Improving Web Page Load Speed
As I’m sure you know by now, slower page load times have some negative consequences like unhappy visitors and fewer page views. Here are some tips for improving your page load speed.
Test your page speed
Start by testing your current page speed using a free online speed test tool. You’ll see exactly how long it takes and get an in-depth analysis with helpful information and suggestions for improvement.
I know you are thinking “Duh! Tell me something I don’t know”, but it’s still worth mentioning because optimizing images can have a huge immediate impact on page load times.
For photographic images with lots of shades/colors you should save your images in the JPEG format. JPEG images can be compressed quite a bit with acceptable quality loss. I generally set quality to around 70% when exporting an image as a JPEG which can result in a 40% reduction in file size and still have acceptable quality.
Try using an online image optimizer like this one: http://optimizilla.com/
Adjust the quality setting to see how much you can reduce the file size without sacrificing too much on image quality.
For images with simple shapes and few colors, PNG format works well. There’s no JPG-like compression but you can reduce file size by limiting the amount of colors in the palette.
Try using http://compresspng.com/ and play around with the color palette size to see how much you can reduce file size.
Reduce the number of HTTP requests
Add the defer attribute to ensure a script will not run until after the page has loaded:
<script src="demo_defer.js" defer="defer"></script>
Leverage browser caching
Save your visitors from having to download all the static files that make up your site each time they visit by leveraging browser caching. With browser caching you tell the user’s browser to store some of the files locally. The next time they visit that page or even another page on your site, those files stored in the cache will be used instead of sending another HTTP request and downloading them.
Here’s an excerpt from the Gtmetrix website about how to enable browser caching:
To enable browser caching you need to edit your HTTP headaers to set expiration dates on certain types of files. Find your .htaccess file in the root of your domain and add your caching parameters to tell the browser what types of files to cache:
Depending on your websites files you can set different expiry dates. If certain types of files are updated more frequently, you would set an earlier expiry date on the (ie. css files).
Enable gzip compression
Gzip compresses your webpages and style sheets before sending them over to the browser. This significantly speeds up transfer time since the files are much smaller. There are different methods for setting up gzip compression depending on the type of server. On an Apache server you will need to add the following lines to your .htacess file:
Consider using a flat-file CMS
Database-backed CMSs like WordPress are robust, feature-rich, and capable of scaling to a phenomenal degree. One down side however, is that page load speeds are slowed down by calls made to the database to retrieve content.
If you have a large site with a ton of content and you want to organize that content in many different ways, then a database-backed CMS is probably best.
For smaller sites containing content that is already prepared and organized, a flat-file CMS is likely a better choice.
A flat-file CMS stores content in files and folders rather than in a database. A database-driven CMS needs to query a database to retrieve content and this is a common cause of slower page loads.
Flat-file CMSs have been growing in popularity due in large part to their faster page load times. There have been a number of really solid flat-file CMSs cropping up and many are quite feature-rich. Setup and theme creation is typically much easier than with a traditional CMS.
Here are some really good flat-file CMSs to consider using: