How to debug and increase a website speed like a boss
No one likes a slow website, not only it affects your customers, but it also affects your website ranking but the real question is, how slow is too slow? and what is the optimial page speed?
Well, according to a study by Microsoft the average human attention span is 8 seconds, which means the maximum loading time you can allow for your website would be in that range.
but how can you debug and fix your website? you are in luck, because luckily we have too many tools to debug your site, let’s look at some of them
GTmetrix.com is one of my favorite tools, the reason being is that it gives you the results from both PageSpeed and YSlow in one report, it also allows you to download the report as a .pdf file, it also gives you recommendations on what’s wrong, and how to fix it.
GTmetrix is free, however they also have GTmetrix PRO starting from 14.95$/month and up to 149.50$/month you can view their plans here
pingdom.com also shows you some very useful results, it shows you your website weakness areas , how to improve them and it also shows you what type of contents are taking the most from your website size, it also shows you the file requests your website is making which can be useful in some situations.
Pingdom like GTmetrix is free, but they offer a service which allows you to monitor your website speed, availability and transactions.
They have a 14 days trial, and then you have to pay an affordable monthly subscription of 10$/month
How to Fix
there are some ways to tackle the problem, first is manually fixing the issues presented by the above tools, the second is to use a plugin that can do the dirty work for you, and the third is to hire a freelancer.
Let’s check each solution in details
1. Manually Fixing the issues
There are some steps you could take to manually fix the issue
1. Optimize and Rescale images
rescaling and optimizing are simple, but they are hard work, most tools will let you know exactly which images to optimize and rescale, you can optimize images using tools like imagecompressor and tinypng and you can rescale the images depending on the recommendation, by using software editing tools like Photoshop or Gimp.
You should at least notice a slight speed increase once you are done optimizing your images.
2. Use CDN
one of the common YSlow recommendations, is to use a “CDN” – Content Delivery Network , the beuty of CDN is that your images and files are uploaded to different servers, and depending on the user location, the nearest server would be used to request the files, by applying this method, you are removing some pressure from your own server, and you are also increasing your website speed.
There are too many CDN providers, the most common ones are Cloudflare and StackPath , and the quickest way to apply the CDN would be using a wordpress plugin! Cloudflare has a ready to use wordpress plugin
While StackPath uses a plugin called CDN Enabler, but they have an article which explains the steps on how to configure it
3. Enable Compression
Enabling Compression has never been easier, all you need to do is to add some lines to your .htaccess file:
if you are not running on apache (Linux) but running your website on a windows based system, click here for more details!
what is defering? some of your .js files may be too big on size, but they aren’t really needed until the page is loaded, when you disable defering, the script will keeps on loading which will block the rendering of the page until it is done, to avoid this you need to use defering, defering is simple, all you need to do is adding a “defer” keyword to your <script> like so:
<script src="script.js" defer></script>
adding this to most of your script files will increase the initial speed a lot but careful, not everyscript should be defered, specially jquery file.
The only way to know is to defer the scripts, check the website, is it running correctly? if not, remove the defer keyword from some of your scripts and try again!
5. Minify CSS,JS files
minifying your css and js files makes your website faster and the size of your files a bit smaller as well , for me I use an online tool called minifier
you simply copy over the URL or the contents of the CSS or js file, choose the type of the file and click Minify, copy over the output and save!
2. Using a plugin
there are many plugins that can help you achieve a faster website and improve your page score, one of my favorite tool is WP Rocket it is user friendly, very detailed and it actually provide results, they don’t offer a free plan, but their plans roughly start from 49$
For a free plugin I would highly recommend W3 Total Cache I used it before and it actually works pretty well!
Both Plugins offer CDN integration , Browser Caching, Minifying and more!
3. Hiring a freelancer
Hiring a freelancer should be the last choice or if you are busy and have no time, this option could be a good one.
the freelancer can help you achieve results fast because even though they might use plugins they might also optimize your theme it’s self, which is a bit hard for plugins to do.
The freelancer can optimize the codes, manually defer some files, improve some js performance and more!
A slow website can affect your business, your ranking and your customer satisfcation, there are many ways on how to make your website faster, but it all depends on your need and availability.
Did you find this article useful? Do you need help
If you are looking for a freelancer who can help you achieve your dreams, Click the button below!