AVIF, WebP, Image Optimization, CDN, Service Worker & Client Hints All in One

November 26, 2021

AVIF, WebP, Image Optimization, CDN, Service Worker & Client Hints All in One Plugin

Speed up your website using cutting edge Image Service. Service Worker, Client Hints, WebP, 100% white labeled. NO URL Rewrite required.

This WordPress plugin provides integration with our SaaS Image Service
By leveraging the Power of Client Hints.

We’ve chosen to integrate to WordPress via a Service Worker in order to provide best possible compatibility against
Caching plugins (e.g. W3TC, WPSuper Cache, Elementor…) as well as images coming from your CSS files.

This way you won’t have to rewrite your URLS and lose your images SEO juice.

Nor you will get overcharged in case of a BOT crawl your website.

WHAT DOES THIS PLUGIN DO?

This plugin registers a Service Worker, providing Progressive Web App functionalities to your
website in order to intercept your Images in order to automatically detect the best possible Image required by your end user.

Since we are speed monkeys, we need to say that the required javascript
that will load on your page is 708 bytes gzipped. (without a k)

FEATURES OUT OF THE BOX:

White Label.
Automatic Integration.
Removes EXIF information.
Compatible with Page Builders.
Effective Connection Type Detection.
Quality drop on slow 3g or Save Data on.
Backup your images for Disaster recovery.
Works with images coming from CSS files.
Search Engines will grab the origin images.
Works with images coming from Ajax requests.
Compatible with Caching / Lazy Load plugins.
Backup your original image safely in the cloud.
Automatic AVIF Conversion based on browser support.
Automatic WebP Conversion based on browser support.
Progressive JPEGs & Interlaced PNGs as Net Gen fallback.

FULLY WHITE-LABEL

One of the reasons we decided to go with this approach is no other than SEO.
Using Client Hints Combined with Service Worker will get you all the performance benefits
for your end users without the SEO disadvantages that comes with the URL Rewrite.

WHY ITS IMPORTANT NOT TO CHANGE IMAGE URLS

In case you rewrite your image urls into something else all
SEO juice from all image urls goes to the Vendor domain
even if the urls contain a canonical name, they are still searchable using the vendor url.

PREREQUISITES

Your website runs https only
Your website doesn’t have a Service Worker already.

IMPORTANT

This plugin is not compatible with other plugins that registers a Service Worker. You’ll need to disable other plugins
that registers a service worker on your website or use our Custom Integration Guide and lose the white label feature.

Installation

INSTALLATION

Add IMGHaste from the WordPress repository
Activate the plugin through the ‘Plugins’ menu in WordPress
Enter your CDN URL. If you don’t have one, register your account for free here and add your website to get your CDN URL.
Clear any page caching (e.g. W3TC, WPSuper Cache)
Navigate through your website (from desktop & mobile) to warm up CDN cache (optional)
Enjoy upgraded performance and user experience

UNINSTALL

Delete WordPress plugin
Go to imghaste dashboard under settings
Turn Active status to false
Delete your origin

Screenshots

How can we Improve your website speed. You can check before installing
Verify Plugin works.

FAQ

Does it work with the new WP editor?

As long as your files are served from your own domain and https
the integration is platform agnostic.

What are the limits of free tier?

The free has all features with paid plans, but comes 1.000 Image Optimization Credits through our Network.

Which is enough to power any small sized WordPress site.

What if I exceed the limits?

In case you exceed this limit No hard limitations are applied to your website.
We will contact you to set a more suitable plan for your needs.
We will be happy to see you grow, knowing that we played our small part.

How to verify the plugin works?

We get that a lot. Since the integration is fully white-labeled its hard to spot and we are proud for it. You will have to go to open your developer tools and check on network tab you will see your images having type: “webp” or “avif” instead of jpeg/png. Check Screenshot#2

Pagespeed insights still reports “serve next gen images” why?

Well, this is because all bot speed checkers do not register
a service worker when scanning a website. But you can rest assure that
your users are enjoying webp Images from over 300 Edge Servers worldwide.

This is actually part of the WHITE LABEL solution since your urls won’t change.

Why don’t you just rewrite the urls?

The minute you sign up for url rewrites on your website (imghaste or any other similar service)
you immediately lose a portion of SEO juice from your website towards the image service.

So why waste it when you can benefit from both worlds? 100% SEO and enhanced user experience.

Also what if you decide to change CDN 3 months later? Will you re-re-write the urls?
In our humble opinion it’s better to have YOUR links in place even if its undetectable (remember.. 100% white label).

Therefore, we have one option for those brave users
who wishes to ditch their brand name in favor of ours, but we advice against it 🙂

Can I use it with other CDN?

Yes, it works transparently. Our CDN will be the one serving your images, and we will get them from your CDN.
As long as your images come from your own domain name, we will intercept them.
This setup won’t provide any additional performance benefits.

Does this plugin work with all browsers?

You can check browser compatibility here as of today there is 95.12% compatibility and growing.
As for the rest of the 5.5% this will work the same way it already used to.

Any browser that supports Service Worker will support the image service.
Take notice that you need to serve your website using https:// only to register your Service Worker

I am using WP JSON API, does it work?

Oh yes!

Do you offer a cname for SEO?

Yes, due to customer demand we do offer cname support
However, We do offer much better than CNAME on our default setup
We offer the service on your own domain.

My theme does not provide info for client hints

That can be even better in some cases.
In that case, the resizing options will be limited to Device
Contact support, to find out about a hybrid solution called Smart Hints by imghaste
and we be glad to investigate on your behalf.

Changelog

1.2.0

Added PWA Support
Added CNAME Support
Decommission of SlimCSS in favor of new product= 1.1.1 =
Add AVIF Support
Add html5 Doctype support for SlimCSS
Fix a warning on error log

1.1.0

Added SlimCSS Feature.
Added Feature Policy for Client hints

1.0.11

Added a no cache header to resolve some false negative HealthChecks.
Customers with a CDN still needs to manually decache it.

1.0.10

Added a fancy gif icon.
Our Great thanks to the fun of imghaste for his wonderful contribution.

1.0.9

cache invalidation of service worker + SDK file every 10 minutes to support upcoming features.

1.0.8

Added image-service.ih.js as a physical file as well

1.0.7

Some better HealthCheck to avoid redirects
Linting Project using PSR-2
Fixed some installation issues
Enable URL Rewrite for test Only.

1.0.6

Some Undefined Warnings reported

1.0.5

Add a Short Notice while CDN Url not configured
Suggest a 5* Rating & a Version Compatibility thumbs up
Add HealthCheck on plugin settings

1.0.4

Fix Changelog outline
DomDocument errors.

1.0.3

Remove CDN Rewrite on a specific case

1.0.2

Clear all output buffers before & after Service Worker Route

1.0.1

Content-type: application/javascript
Name of SW: image-service.sw.js renamed to /image-service

1.0

Initial Release