Slow websites are one of the most annoying things online. Google hates slow websites. It has been proven that a slow website increases bounce rates, decreases time spent on the site, and lowers the return rate for users. It is important to speed up your site.
Slow server response times, bad design decisions, and poor development can all contribute to a slow site load. You’ll find below some tricks we use every day to increase website speed.
Optimize your Images
It may seem obvious, but you’ll often find websites with images that are 3-4 Mb in size on their home pages. It can be due to a variety of factors. Your site may be loading images in full length and then scaling them to fit the page, or prints are not optimized for the Web.
When you use image tags on your website (), make sure that the image is loaded at the correct size. Many websites place a 100×100 picture, but their SRC image is 1500×1500. It can take seconds for a website to load.
This simple method will allow you to reduce the size of the JPEG file in Adobe Photoshop without reducing the image dimensions.
- Open the image with Adobe Photoshop.
- Click image > Adjustments > Posterize from the top navigation.
- Slide the slider to the lowest posterize without degrading your image
- Save the image in jpeg format and select a quality between 7-10
If done correctly, the method above can reduce a JPG’s size by a few kilobytes without affecting its quality. Re-upload your images and watch the site load faster!
When possible, use relative paths.
The majority of non-developers overlook this. However, over time, the use of a full path (including the URL source) in CSS or JS calls, images, or file calls can cause your site to become less healthy. Relative paths can reduce the loading time by milliseconds.
You can improve your website speed by removing the need for server calls and loading files directly from the filesystem.
Load JavaScript into the footer.
JavaScript has evolved rapidly over the past few years. We’re in a unique position with JavaScript, where many sites are loading multiple large JS plug-ins. These files can be added to the It’s still fine, but if you load files into the head of your page, it may delay loading until these files have been loaded.
A good rule of thumb is to place any JS that won’t be needed until the page has been rendered in the footer. This will ensure that the page is able to load visually before scripts are loaded.
JQuery, DOM Ready Events (including Lightbox), Pixel Containers, Tag Management, and Lightbox are all good things to include in the footer. Some tracking components may still require head placement.
When possible, consolidate CSS.
Some websites load multiple CSS files due to very valid reasons. You’re not in our sights. This section is aimed at sites with 18 redundant CSS/JS and conflicting rule sets. This is a developer’s worst nightmare.
Use a CDN or enable Gzip compression.
Gzip compression is a server-side change that compresses files for your browser. The user then uncompresses them. The end user will have a quicker load time because they are not downloading as much data.
It is easy to enable Gzip compression by making a simple change in your access.
Cloudflare is a CDN that can be used to host your website. Cloudflare, a CDN/Compression/DNS Service, caches the content of your website and delivers it in a cached format to users via a CDN Network. Cloudflare can also minify your files, eliminating the need for you to do it manually. Google’s website speed test tool is available here. Follow our tips to improve your website’s performance.