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.

Optimize Images

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.

Minify CSS and Javascript

Minifying CSS and Javascript doesn’t have a massive impact, but every bit helps and it is super easy to do. What is minifying? It’s basically removing all the unnecessary comments, spaces and line-breaks from the file resulting in a smaller file size. There are many tools available that can do the minifying process for you. For javascript, try using an online javascript compression tool like https://javascript-minifier.com/. For CSS try https://cssminifier.com/.

Reduce the number of HTTP requests

An HTTP request is what happens whenever your browser fetches a file from a web server. Typical web pages rely on many files that must be fetched from a web server before the page can finish loading. Examples include javascript, CSS and images. Each file makes a separate request to the server. The more requests your server gets simultaneously the more work it needs to do, reducing your page load speed.

You can reduce the amount of HTTP requests by consolidating as much as possible. See if you can combine those five or six javascript or CSS files into two or three.

Reduce the number of separate image files being requested by utilizing sprite sheets. Use CSS for rendering graphical interface elements like buttons.

Defer Javascript

Ensure that your external javascript files are not slowing down page load or block page rendering by executing before the page has finished parsing. How do you do this? Use the HTML <script> defer attribute.

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:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

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:

  # Compress HTML, CSS, JavaScript, Text, XML and fonts
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

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: