Ebrahim Hasan

The way it should be.

How to debug and increase a website speed like a boss

Aug 17, 2020

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

1. GTmetrix

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

2. Pingdom

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:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

if you are not running on apache (Linux) but running your website on a windows based system, click here for more details!

4. Defer parse of JavaScript

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!

Conclusion

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!

Recent posts

Problems Dealing with freelancers
Common Problems Clients Face when hiring freelancers

During my career I had many problems when dealing with Clients, but then I thought, what problems do clients face instead? 1. Communication ComRead more...

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 sRead more...

How to create your own website for free!

Create your website in today's digital world, it has never been easier to create a website, too many options to choose from, but the real questionRead more...

Leave a Reply

Your email address will not be published. Required fields are marked *