Recently I’ve been approached by a lot more people who are concerned about the load times of their website. People want to make sure they are not penalised in the Google search results for slow loading websites. Here are my top tips to help maximise the load time…

#1 Use JPG instead of PNG where possible

I have had several clients recently wanting to improve to load times. In every case they had a slider (See #2) and in every case they had PNG images that didn’t need any transparency. One client had 5 PNG images and each was 2.5Mb in size so the slider alone was 10Mb to load.

Switching to JPG and optimising the images took that down to 0.8Mb in total with little quality loss. Still quite big but considerably better.

#2 Sliders

If at all possible try not to have too many images in a slider. I personally feel that the 5 in the example above is excessive. Every image MUST justify the load time each chews up. I usually have Two, sometimes Three images in a slider but I wouldn’t go more above that. Mobile use will only increase. You must make sure your webpage doesn’t takes ages to load on the slow speeds mobiles can have.

Also remember that sliders are on a timer to scroll. Few people will sit there and wait for all the slides to become visible. You’ll be lucky if someone watches two, very lucky if they watch three but much more than that and people will stop watching and start looking for the content they wanted in the first place.

It is better to have one really, really nice image, that portrays your product, rather than several trying to do too much at once.

#3 Auto running videos

Many of us have been on websites where the screen is initially filled with an auto-running video, usually with captions over the videos. These can take a long time to load and severely slow down the page. Again, you MUST justify the load time it takes. Try to keep the video as short as possible to help the load times.

#4 Linking to cached scripts

Most websites these days have a multitude of scripts, fonts, style sheets and other files to pull in. In the case of Scripts you’ll probably be using scripts that could be pulled in from an external, cached site, rather than your own.

Websites like Google Hosted Libraries contain a stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries.

#5 Optmised Images

It can sometimes be incredible just how much you can reduce an image with little quality loss. Reductions of 80% are possible! Nowadays you don’t even need any special software to do it. If you don’t, can’t or won’t install this type of software on your computer, you could try using an online optimiser like compressor.io to do the work.

For tools you can download probably the best ones for JPG are https://pnggauntlet.com (PC, Mac and Linux) or https://saerasoft.com/caesium/ for PC.

For GIFS I still found https://pnggauntlet.com to do really well.

#6 Compress those files

You can shave quite a few Kb by compressing the scripts and stylesheets.

If you’re using jQuery most scripts have the option to download a minified version of the file as well as the original. These files usually end in -min.js

There are also tools like https://jscompress.com which will compress your own scripts.

#7 Reassessing your plugins

I’ve seen clients with dozens of plugins on WordPress, many of which they didn’t really need. Each plugin requires scripts (often a few scripts) and they all need to load as well. Be ruthless with the amount of plugins you’re using on a CMS like WordPress and use as few as possible.

#8 Use of CSS for animations

Cascading Style Sheets (CSS) can do so much more than it use to. Browser compatibility has also never been this good! Rather than installing a few scripts to animate a button, image or block, a few lines of CSS can often do a really nice job and doesn’t need to call in other files to achieve it!

#9 Check script use on each page

So on the home page you have scripts for a slider, scripts for some animations. The page looks great so you “Save As” and use the HTML as a template for other pages. Chances are those other pages won’t have the slider on the page, or that block with the animations. It is very easy to forget to remove the scripts that won’t be used on the other pages. I’ve done it myself a couple of times in the past.

If you have a check list before a site goes live make sure this check is on that list!

#10 Ask an expert

If all this sounds beyond your skills then contact me and let me quote you for page speed optimisation.