One of the biggest annoyances online is slow websites. Not only do we hate it, but Google also hates it. A slow website has been shown to increase bounce rate, decrease time spent on site, and decrease the rate of return for users. Therefore, it is vital to speed up your website.
Site load time is often a sign of poor development decisions, poor design structure, and slow server response time. Below you’ll find some tricks that we use day to day to improve website speed.
1. Optimize Your Images
This seems like a no brainer, but it’s not rare to find a website with 3-4mb of images loading on the homepage. This can be caused by a number of things. Either your site is loading full size images, and scaling them down to size – or the images themselves are not optimized for web.
If you have image tags (<img>) on your page, make sure the image they are loading is the exact size that it needs to be. Often times, websites will place a 100×100 image, but the src file is a 1500×1500 image. This can add seconds of load time to a website.
To trim down the file size of a jpeg image in Adobe Photoshop without making the dimensions smaller, you can use this easy method:
- Open the image in Adobe Photoshop
- From the top nav, click image > adjustments > posterize.
- Lower the slider on the posterize as low as possible without degrading the image
- Save the image as a jpeg, and set the quality anywhere from 7-10
The method above, if done right, can make a JPG image a couple kilobytes in size without taking away from the quality. Now re-upload all your images to your website, and you should see an exceptional change in site load speed!
2. Use Relative Paths Whenever Possible
Most non developers overlook this – but over time, the use of full paths (including the source URL) in CSS, JS, image, or any file calls on your website can degrade the health of the site. Using relative paths eliminates the need for a server to server call, and can shave precious milliseconds off the load time.
To give an example of what we mean by this, take a look at the resources below…
Bad (Website loading CSS with Full URL):
Good (Our Website – Loading Relative URLs):
Simply eliminating the need for these server calls, and loading the file off the filesystem can add a noticeable boost to your site speed.
3. Load JavaScript in the Footer
JavaScript has rapidly evolved over the last few years, and we’re now in a unique spot with JavaScript where many sites load multiple large JS plugins. Adding these files to the <head> is still ok, but when you load files in the head, it can delay page load until those files are loaded.
Generally, a good rule is to load any JS in the footer that isn’t needed until after the page renders. This ensures that the page can visually load before the scripts are grabbed.
Good things to put in the footer include (but are not limited to) JQuery, DOM Ready Events, Lightbox, and Pixel Containers or Tag Management. Some tracking components may still require head placement.
4. Consolidate CSS Whenever Possible
Some sites load multiple CSS files for very valid reasons. We’re not looking at you. This section is more geared towards sites that have 18 redundant CSS/JS files with conflicting rulesets. A developer’s nightmare.
I won’t go into too much detail here, but if this sounds like something you want to fix, you may want to take all your CSS to http://cssminifier.com/ and create a single minified file.
5. Enable Gzip Compression and/or Use a CDN
Gzip compression is a server side change that compresses your files for the user’s browser, and then the user takes care of uncompressing them. This results in a faster load time, because the end user is not loading as much data from the server.
Enabling Gzip compression is relatively simple, and can be done with a single change to your htaccess file.
In terms of a CDN, it may be useful to run your site through Cloudflare. Cloudflare is a CDN/Compression/DNS service that essentially caches your site content, and delivers it to the user in a cached form from a CDN network. Cloudflare will also minify files for you, eliminating the need to manually minify files on your own. Try Google’s free website speed check tool here. For better performance and improved users experience follow our tips on how to speed up your website.