How can I measure IMGHaste performance?

IMGHaste is using a recent technology called service worker in oreder to provide an optimal personalised image optimisation solution to your website and the best possible user experience to your website visitors.

This technological approach is undetectable from performance and optimisation measurements tools such as GTMetrix, Google Insight and others.

Requirements

1) Register your account

2) Add your Website to imghaste

In order to measure your website performance of a websitre that is been optimised be IMGHaste service worker and create nice reports for your clients in case of agency accounts, please follow the instructions below.

Check your website performance before IMGHaste integration or by disabling temporary IMGHaste from your website.

  1. Please disable option "Bot Traffic" from IMGHaste wordpress plugin settings, if you have already integrated IMGHaste to your website.
  2. Visit the website you want to measure performance before or without IMGHaste service
  3. Open browsers Development tools by pressing F12 for Google Chrome and Internet Explorer and Firefox.
  4. if you have already integrated IMGHaste,  Navigate to application tab => from the left menu select Service Workers then IMGHaste service worker will appear on the right side of development tools.
  5. if you have already integrated IMGHaste, select Update on reload and then click on the link Unregister on the right side of your screen inside Developer Tools, as show on the next figure. This action will temporary disable IMGHaste service just for the next reload of selected website and only for your own use. It will not affect all other users of your website. IMGHaste will be automatically been installed again on the second recload of the web site.
  6. Navigate to console tab 
  7. Refresh your webpage by pressing F5
  8. Filter images content only by selecting img filter as shown on next figure
  9. Scrol all the way down to your bottom of your website without closing Developer Tools.

You will see all your images of the specific web page that you have choosen to test, without using (or having disabled on previous 4 and 5 steps) IMGHaste. Images will be fetched from your original server on their original image format (jpeg, png, bmp).

To ensure that your data and the performane of your web page is correct, please be sure to have disabled the option Preserve log (unchecked) and have checked the option Disable cache..

The total size of all images for the selected web page will be appear on the status bar of the Developer Tools. In our case, the total size of all images of the presented webpage is 600kb (see above figure).

Check your website performance after IMGHaste integration

  1. Please disable option "Bot Traffic" from IMGHaste wordpress plugin settings, if you have already integrated IMGHaste to your website.
  2. Visit the website you want to measure performance before or without IMGHaste service
  3. Open browsers Development tools by pressing F12 for Google Chrome and Internet Explorer and Firefox.
  4. Navigate to console tab 
  5. Refresh your webpage by pressing F5
  6. Filter images content only by selecting img filter as shown on next figure
  7. Scrol all the way down to your bottom of your website without closing Developer Tools.

Now you will see your website enhanced by IMGHaste. All your images (bmp, jpg, gif) will be automatically been optimised. Our service respencts Client Hints. This means that our service is considering duting the optimisation process the user's screen resolution, the user's Device Picel Ratio (DPR) and the user's Internet Connection Speed. IMGHaste can provide the optimal personalised image optimisation with the best possible user experience.

IMGHaste

  • Auto convert images to webp, progressive jpeg, interlaced png based on browser compatibility (check auto conversion image file type hierarchy)
  • Auto resize images based on user's screen resolution and user's screen DPR
  • Auto adjust image compression based on user's internet connection speed

In our case with a desktop pc with high speed connection we have

  • all images have been converted to webp format.
  • Images URLs haven't changed. Images are still on their own domain. This means that a search engine will count websites images as your own content (on your own domain name) and you will get more ranking score (better seo)
  • your images are been served by IMGHaste servive worker on real-time considering Client Hints in real time.
  • the total size of all images for the selected web page will be appear on the status bar of the Developer Tools. In our case, the total size of all images of the presented webpage with optimised images is 222kb (see above figure). Its a 63% images total size reduction.

Since our approach provides personalise image optimisation service, we will test website performance on a device with small screen resolution and slow speed internet connection. A simulation will take place using Google Chrome and simulating a Pixel 2 cellphone with slow 3g internet connection as shown on next figure.

In our case with a Pixel 2 and slow 3G slow intternet connection we have

  • all images have been converted to webp format.
  • Images URLs haven't changed. Images are still on their own domain. This means that a search engine will count websites images as your own content (on your own domain name) and you will get more ranking score (better seo)
  • your images are been served by IMGHaste servive worker on real-time considering Client Hints in real time.
  • the total size of all images for the selected web page will be appear on the status bar of the Developer Tools. In our case, the total size of all images of the presented webpage with optimised images is 207kb (see above figure). Its a ~66% images total size reduction compared to the total size of images without using IMGHaste.