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 I found that my site was 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 to check your site speed is GTmetrix, which gives you a cross comparison of several different website performance services. A few common contributors to slow website speed that you might find:
- Poorly optimized / scaled images
- Lack of minified Javascript
- No leverage of browser caching
Optimize / Scale Images
The size of your image files plays a large role in website loading time. When a webpage is loading, these image files need to be loaded onto the website and the bigger they are, the longer they'll take. 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 pictures of panda bears. 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!
- Note: If your website uses responsive images and you cannot assign static dimensions to them, this guide from GTmetrix might help.
Minify Javascript
Minifying Javascript is a really great way to speed up loading time, but it can also help you get cleaner code. I personally use Javascript-minifier because it's simple and free. All I had to do was copy + paste the JS text and out came the condensed pile of mush that is my JS file.
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 brought my website loading time down to 3.1 seconds total. Now I felt better about adding those extra social media sharing 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, they can be temporarily saved to the users browser while they navigate through your website. This prevents the need to download 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.
Conclusion
Making even just a few of the corrections mentioned in your website error report can dramatically improve load time and likelihood of users staying on your website. While I used GTmetrix primarily for cross checking, I also highly recommend using Googles Speed Insights and Sitechecker.pro, the latter 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.
If your found this article helpful, please consider sharing using the social media icons below. As always, tweet at me if you have any thoughts or questions!
Aleksey Weyman
Aleksey Weyman is a web designer, artist and creator of Millennial Moderator
