Website Optimizer Plugin
Do you want to improve your website by
- improving loading performance?
- enable offline capabilities via service worker?
- or turn it into a progressive web application?
This extension allows you to do all of these things.
There are additional plugins that help optimizing and profiling your page or server
- Server Timing Plugin enable the server timing http headers. see here
- HTML Minifier minify html in an html5 compliant way.
1. General improvements
- advanced page optimizations which drastically improve the page performance score over various tools.
- turn the website into an installable Progressive Web Application
- Push resources (require http 2 protocol). you can configure which resources will be pushed
- Insert scripts and css that have 'data-position="head"' attribute in head instead of the body
- force script and css to be ignored by the optimizer by setting 'data-ignore="true"' attribute
- connect to domains faster: automatically detect domains and add < link rel=preconnect > header
Moving script and css position in the page
script and css position can be controlled by add 'data-position' attribute to the tag. possible values are
- head: move the file to the head (if not present yet)
- ignore: ignore the file
- missing tag or other values means move to the footer of the page.
- Efficiently cache resources using http caching headers. This requires apache mod_rewite. I have not tested on other web servers
- Range requests are supported for cached resources (you can cache audio & video content)
1.3 Sub Resource Integrity (SRI)
1.4 Critical CSS Path
- Eliminate FOUC by providing critical css path selectors. See here for more info.
- The critical path enable instant page rendering by providing a minimal set of selectors and classes used to render the visible part of the page before the stylesheets are loaded.
- Any selector that affects the page rendering is a good candidate (set dimensions, define positioning, fonts, sections background color, etc..).
There is no automatic extraction and you must provide these settings to extract css classes.
CSS class definitions for critical css path
- A list of selectors to extract from the page css
- The web fonts are extracted automatically and preloaded
- deliver images in webp format when the browser signals it supports it
- generate svg placeholder from images for quick image preview
- generate responsive images automatically
- generate svg placeholder for images for faster page load
- lazyload images that are using svg placeholder
- automatically add srcset and sizes for images. Only necessary images are generated. Images smaller that the breakpoint are ignored.
- resize and crop images using a one of these methods (face detection, entropy, center or default).
- configure breakpoints used to create smaller images
- scrset urls are automatically rewritten when http cache is enabled
- automatically resize css background images. You can configure breakpoints for this feature.
4. CSS Improvements
- Fetch remote css files, images and fonts and store them locally
- Merge css files (this process @import directive)
- Minify css files
- Do not process css files that match a pattern
- Remove css files that match a pattern
- Ignore css files that match a pattern
- Load css files in a non blocking way
5. Progressive Web App
here are some of the features implemented
- Offline mode
- Installable web app with configurable settings
- Background Sync with fallback support
- Configurable manifest settings
- Configurable cache settings per resource type
- Preloaded resource can be configured
- Configurable network caching strategies
- Automatic service worker update. A new version is available whenever you change the settings
- Mobile apps deep linking
- Web share target level 2 support.
- Push notifications using Onesignal
5.1. Installable web app
- The app can be installed as a standalone web app with google chrome / firefox on android via the menu “Menu / Add to home page”. You need to configure the manifest file and provide icons first.
- The app can be installed as a standalone desktop application (tested on windows 10) with google chrome as long as you provide a 512x512 icon.
- Alternative links to native mobile apps can be provided and the preference can be configured
5.2. Web Share Target Level 2
Web Share Target allows your pwa app to receive data (text and files) shared by other applications on your mobile device. You can configure your pwa to become a receiver on android and IOS using the web target api level 2.
You can also configure which data you want to be sent to your app. To learn more about web shared target api, please go here and here
5.3. Offline mode
You can configure an offline page that will be show whenever the user navigates to a page and that page could not be loaded.
You can provide the list of urls to load when the service worker is installed like icons, logo, css files, web pages, etc ...
5.5. Network cache strategies
You can choose how all your web assests will be cached.
- Cache only
- Network only
- Cache first, falling back to network
- Network first, falling back to cache
- Cache, with network update - stale while revalidate <- this is the default.
You can also customize settings per resource type.
5.6. Web Push
- Manage Web Push subscription using OneSignal
- Added basic push notification settings for Joomla articles
Note that some adblockers may break feature.
5.7. Service worker router api
Add routes to customize fetch event networking strategy by using either a static route or a regexp
5.8. Exclude resources from the service worker management
You can specify which resource are not managed by the service worker by specifying a list of patterns. They will always use the network only strategy.
5.9 Background Sync
With this API you can automatically replay some or all the requests that fail. You can choose to replay either GET or POST requests or requests that match a pattern.
6. CDN and Cookieless Domains
- Configure up to 3 domains from which resources will be loaded.
- You can also configure which kind of resource are loaded from these domains.
- CORS headers are automatically added for responses sent from these domains.
- Preview the changes to the manifest before you save them
- Joomla administrator is excluded from the service worker cached resources
- You can secure your Joomla administrator access by defining a secret access token.