How to Check and Improve Website Speed
They say fifty three percent of mobile users abandon websites that take more than three seconds to load..
When I read the above statistic, I freaked out and investigated the loading time of millennialmoderator.com. It had never previously occurred to me the importance of website load time, and now here was my site clocking in at 4.5 seconds.
If you haven’t ever checked your website loading speed, I highly suggest doing so.
The first webtool I suggest using is GTmetrix, which gives you a cross comparison of several different website performance services. Some common errors you might find:
- Optimize / scale images
- Leverage browser caching
Optimize / Scale Images
The size of your image files plays a big role in website loading speed. When a webpage is loading, these image files need to be loaded onto the website and, the bigger they are, the longer they will take to load. Millennial Moderator is hosted completely on S3, so all I needed to do was compress my images and replace them in the root directory.
A great tool for bulk compression is Tinypng. They allow you to drag and drop bulk image files and compress them very quickly. Plus, their website has a bunch of pictures of panda bears.
- Note: If your website uses responsive images and you cannot assign static dimensions to them, this guide will help.
By switching to compressed image files, I was able to save 80% or more on my car insur.. I mean webpage size. This dropped my loading time from 4.5 seconds to 3.5 seconds- crazy!
I have about six scripts, so I repeated this process for each of them. Sure enough, it decreased my file size by several hundred KBs, which is a big deal- it brought my website loading time down to 3.1 seconds total. Now I felt better about adding social media share links.
- BE SURE TO TEST your website after uploading the new, minified JS. The first time I applied mine, the homepage slideshow stopped functioning altogether. It turned out I missed a few symbols in my copy paste operation. Clear your cookies and spot check your work often!
Leverage Browser Caching
Browser caching is what allows a website to temporarily store resources on the users browser. If for example, your website has a lot of images, these images can be temporarily saved to the users browser while navigating through website pages, preventing the need to download the image files each time.
This is great because it makes load time faster AND saves you money by not having GET requests every time someone loads your site. Depending on how you built your website, excessive GET / POST / PUT requests might cost a pretty penny.
Here are both Googles and GTMetrixs' explanations for browser caching. All I really had to do was copy + paste the below code into my .htaccess file and my website loading time dropped to 2.8 seconds.
Making even just a few of the corrections mentioned in your website error report, can dramatically improve load time and likelihood of users visiting your website. While I used GTMetrix primarily for cross checking, I also highly recommend using Googles Speed Insights and Sitechecker.pro, which requires a sign up membership (free), but gives useful insight into mobile vs desktop loadability and other general warnings that you can use to make your website the fastest on the web.
I hope this guide helps. As always, please use the links below to share the article and tweet at me if you have any thoughts or questions!