We all know that page load times are important for your site yet most web developers forget to optimize for it. Did you know website speed is the number one reason for page abandonment.

In other words a page that takes 4 seconds to load is 25% more likely to be abandoned than one that loads in 1 second.

Most importantly Google has indicated site speed is one of the signals used by its algorithm to rank pages. A great way to test your site speed is by using Google’s PageSpeed Insights.

Below are some ways to speed up your site:

1. Optimize your images

This is an easy one. Make sure you resize your images to 72dpi in the dimensions that your site requires. I’ve seen sites with 2mb thumbnails. Even if you have relatively small sized images its always good to run them through an optimizing program like ImageOptim.

Consider using a lazy load javascript library, this way images below the fold only load when the user scrolls down to them.

Developers: you can use imagemin with gulp or webpack to automate this process.

2. Minimize your css

This is another low hanging fruit. CSS files can sometime be large in size. You can use one of the free online minimizers to compress those files. They work by removing empty lines, comments and returns from the file. Most of the time you’ll end up with a file that’s a 3rd of the size of the original.

Another way to minimize your css is to remove styles you do not use. We often buy themes and templates that have everything but the kitchen sink in them yet our site only uses a 5th of the styles. It’s a tedious process but worth it.

Developers: webpack can automate this process for you.

3. Cleanup your HTML

For a long time its been a good practice to load up your HTML with comments and empty lines. Get rid of those. There’s no need for comments as HTML5 has Semantic Elements which makes your markup readable without comments. Speed is the game and every byte counts

4. Load your JavaScript Asynchronously

Let’s say you call 3 javascript files on your page. The will load in sequence, script 1 then 2 then 3 all while holding up your page render. By adding the async parameter to your <scrip></scrip> tag it allows for all 3 to load without holding up your page render. Below is an example of how you would call jQuery. Please use the minimized version.

 <script src="https://code.jquery.com/jquery-3.2.1.min.js" async></script>

5. Cache, Cache, Cache

If you run a dynamic website that’s powered by a CMS try to cache your rendered pages. WordPress has plenty of plugins like WP Super Cache and Laravel has packages like laravel-responsecache.

6. Extra Credit

Sometimes you have to think outside the box and find clever ways speed things up.

1. You can split your css file into 2, critical and non critical. Load the critical one on the head of your document and the non critical in your footer. Critical has to have all the classes to style anything above the fold.
2. Use the prefetch tag. If you know that most people go to the about us page after visiting your home page you can add this tag to your page <link rel="prefetch" href="/about-us"> this will pre-fetch that page and when the visitor clicks on the about us link the page would already be in their browser cache and load instantly.
3. If you can install the pagespeed module on your server they have one for IIS, Apache and NGINX.

Hope you found these tips helpful. Send us an email to chat about ways we can make your site faster than the competition.