How can I test my website speed

Website speed is critical for ranking higher on search results, if it takes longer than 3 seconds then you need some improvements. In this how to we will take you through how to test your website speed and some tips on improving it.

Where to test my website speed?

There a several websites that will test your website speed but the top three are

1. Google page speed test
2. GTmetrix
3. Experte

‍

Google page speed test

As it says on the tin, this will only test individual pages not your whole website. There are many resources on this and is a key metric to ranking higher on google.

• Start by visiting the website and entering your website url
• Wait a few minutes for the test to run
• The test will run on mobile and desktop (Naturally, desktop scores are higher due to computers being more powerful and usually are hooked up to a strong wifi connection). At the top of the page you can switch tabs to see what the different scores are for each.
• The scores are split into four categories
  • Performance
  • Accessibility
  • Best practices
  • SEO
• Each section is broken down further down the page, it will identify areas for you to improve. Further down this how to we will go over how to fix the most common ones.

‍

GTmetrix

Similar to google page speed test but gives you a more in depth summary on what to improve.

• Start by visiting the site and enter your website url
• It is going to give you a GTmetrix grade ‘It reflects, both, how fast your page loaded for users, and how well it's built for performance.’ - GTmetrix website
• Under each tab you will be able to find information about what to improve and some guides on how to do so.

Experte

This tool allows you to test your whole website at once instead of doing it manually. It uses google page speed test but enters all the urls on your website for you. This test mainly focuses on page performance.

• Start by visiting the site and enter your website url
• Select mobile (as this is the most important score according to google bots)
• Wait for the test to finish running can take 5-10 minutes if you have a lot of URLs
• Once finished, head to the export button at the top right of the page
• It will download a .csv file with all of the information it tested and you can import this into excel, g-sheets or any app that can handle spreadsheets.

You can then use this as your base before you start optimizing to make sure you are improving the scores.

‍

Common errors to improve

Images

There are 3 areas where images fail on speed tests

They are in the wrong format (image not served in new format)

1. Fix: Most images are created as a PNG or JPG. Page speed wants you to deliver them as webp or avif. These are newer image formats that take less mb to download. There are several ways you can do this:
   1. Manually - Head to an image converter online upload your image and then download the new format and upload that to your website.
   2. Wordpress? - Use a plugin, there are many but we recommend this one. The plugin should take you through how to do this
   3. Got a website with us or webflow? - Easily done. Head to your assets area, expand the panel, select the image(s) you want to compress. Click the compress button at the top. If you want to compress all your blog or cms images - click the cms area on the left hand side, click three dots, click compress assets.

The image file size is too big (download took too long)

When you download stock images, you will likely download the biggest version of the image which is big in MB. Sometimes this can be fixed by changing it to webp or avif (see above) but in some cases is still too big. When you download images make sure you are downloading the right size. Secondly, run it through an image compressor such as uPic (a free app on macs) first and then upload it to the website.

The image physical size is too big (not properly sized image)

This is due to images being physically too big or too small. For example you download a 3000px by 2000px image however when you display it on the website it is 500px by 300px. That image you downloaded is far too big. At most images on websites should be around 1080px wide. This can be easily fixed on your computer.

1. Find the image that is causing issues and download and open it on your computer by double clicking it.
2. Go to tools > Adjust size
3. Re-enter the correct width you want to display you should be able to find out the size you need by hovering over the image. If you are unsure what this size should be enter 1920px if its a banner image (spans the whole website), 1080px if this is the main image that sits at the top of a blog or 500px if its a smaller image to the side. NB these are educated guesses but get in touch with us if you need to know how wide an image should be.

‍

No alt text

Alt text is some text that describes the image on your website, it is read by robots that crawl your site and it is great for screen readers. Adding alt text is simple but commonly overlooked. Head to your media library, find the image(s) that are on your page, click on the image and add the alt text in the settings area.

Bonus: If you can, add your keywords to your alt text.

No index

Sometimes pages can be marked as noindex, unless there is a good reason for doing so you do not want this because it will block the page from being indexed on search engines. Navigate to your page that is noindex, find the meta settings and make sure the noindex setting is set to off or change it be ‘index’.

‍

Asset blocking

Another common error is asset blocking. Most websites have many features like chatbox, 3rd party form and video integrations, cookie policies and the like. Which means there is much more code to load on your website. Think about reducing this where you can it might look like:

• Make your JS defer instead of async
• Removing plugins you no longer need
• Lazy loading videos (the video only loads when the user clicks play)

In most cases you should be able to defer your JS loading by changing the settings in your website. You can also use a plugin or feature to compress and minimize your CSS and JS code however, proceed with caution as this can break your website.

‍

Conclusion

Website speed is important for high ranking on search engines. You can use free tools like google page speed and GTmetrix to see how your website is performing. You can improve it by editing images, checking meta settings and by not adding unnecessary code to your website.

If you build your website with Pivotal-Flow, we will look after this for you and monitor its performance.

‍