Merge pull request #160 from tbela99/v.next

V3.0

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change History
 
+# 3.0
+
+- #84 Automatically generate critical css path. no more parameter are required
+- #138 AVIF image support
+- changed LQIP blur value #b188238
+- documentation update
+
 # 2.11.0
 
 - @cbahiana-sd Added info on enabling zlib.output_compression 495b84d

README.md

@@ -4,11 +4,12 @@
 
 ![logo](./docs/logo.svg)
 
-\*_Make your website blazing fast_.\*
+*_Make your website blazing fast_.*
 
 ![screenshot](https://raw.githubusercontent.com/tbela99/gzip/master/Capture.PNG)
 
 - It includes a new Css parser
+- Automatic critical path css generation which will bring you close to 100 in [lighthouse](https://developers.google.com/web/tools/lighthouse) test with no effort
 
 Here are some features provided by this plugin
 
@@ -37,14 +38,15 @@ Here are some features provided by this plugin
 ## Images
 
 - automatically resize images
-- convert to webp
+- convert to avif and webp
 - generate responsive images
 - generate preview images
 - lazyloading images
 - generate responsive css background images
 
 ## Performance
 
+- automatic critical css path generation
 - configurable HTTP caching headers
 - optimizations are enforced when the client sends [Save-Data HTTP header](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/save-data/)
 - dns prefetch

ROADMAP.md

@@ -10,7 +10,7 @@
 6. improved LQIP for [jpeg files](https://www.smashingmagazine.com/2019/08/faster-image-loading-embedded-previews/)
 7. better detect character encoding when manually editing the offline page HTML
 8. modify service worker cache and network fallback and cache only to attempt an update after a specified time (it will behave like cache and network update with a delayed update)
-9. [bug] When fetch remote scripts is off and a local copy is hosted locally, the local copy should not be used
+9. [improvement] When fetch remote scripts is off and a local copy is hosted locally, the local copy should not be used
 10. [feature] Validate integrity data when the integrity attribute is provided for link and script before minifying / merging them together
 11. Implement manual dns prefetch?
 12. add support for the user action Log see [here](https://docs.joomla.org/J1.x:User_Action_Logs)
@@ -19,18 +19,13 @@
 15. merge multiple google font < link > tag?
 16. Fetch remote resources periodically (configurable) (css, javascript, fonts, ...). This can be usefull for analytic scripts and and hosted fonts.
 17. Web push notifications with firebase?
-18. prerender images using primitive.js svg generation [https://github.com/ondras/primitive.js/blob/master/js/app.js](https://github.com/ondras/primitive.js/blob/master/js/app.js)
-19. Messaging API (broadcasting messages to and from all/single clients)
-20. Remove < Link rel=preload > http header and use < link > HTML tag instead. see [here](https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/)
-21. CSS: deduplicate, merge properties, rewrite rules, etc
-22. Disk quota management see [here](https://developer.chrome.com/apps/offline_storage) and [here](https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria) and [here](https://gist.github.com/ebidel/188a513b1cd5e77d4d1453a4b6d060b0)
-23. Clear Site Data api see [here](https://www.w1.org/TR/clear-site-data/)
-24. code refactoring: make helper properties protected or private and use wrapper methods instead
-25. Implement expiring urls?
+18. Messaging API (broadcasting messages to and from all/single clients)
+19. Remove < Link rel=preload > http header and use < link > HTML tag instead. see [here](https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/)
+20. Disk quota management see [here](https://developer.chrome.com/apps/offline_storage) and [here](https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria) and [here](https://gist.github.com/ebidel/188a513b1cd5e77d4d1453a4b6d060b0)
+21. Clear Site Data api see [here](https://www.w1.org/TR/clear-site-data/)
+22. code refactoring: make helper properties protected or private and use wrapper methods instead
 
 ## Low priority list
 
-1. handle < script nomodule > and < script type=module > ? see [here](https://developers.google.com/web/fundamentals/primers/modules)
-1. Manage the service worker settings from the front end (notify when a new version is available, manually unregister, delete cache, etc ...)?
 1. Manage user push notification subscription from the Joomla backend (link user to his Id, etc ...)?
 1. Provide push notification endpoints (get user Id, notification clicked, notification closed, etc ...)

bgstyles.es6

@@ -58,13 +58,13 @@ LIB.ready(function (undef) {
             while (i--) {
 
                 el = elements[i];
-                k = Object.keys(styles[i]);
+                k = Object.keys(styles[i]).map(key => +key).sort((a, b) => b - a);
 
                 mql = undef;
 
                 for (j = 0; j < k.length; j++) {
 
-                    mql = window.matchMedia('(max-width: ' + k[j] + 'px)');
+                    mql = window.matchMedia('(min-width: ' + k[j] + 'px)');
 
                     if (mql.matches) {
 

bgstyles.js

@@ -18,30 +18,30 @@ LIB.ready((function(e) {
     // responsive css background-image in [style] attribute
         if (t.length > 0) {
         // or use resizeObserver
-        const c = t.map((function(e) {
+        const o = t.map((function(e) {
             return JSON.parse(e.dataset.bgStyle);
         }));
-        let o = [];
+        let c = [];
         function n() {
-            let n, i, a, r, u, l = o.length;
+            let n, i, a, r, u, l = c.length;
             for (l = t.length; l--; ) {
-                for (i = t[l], a = Object.keys(c[l]), u = e, r = 0; r < a.length && (u = window.matchMedia("(max-width: " + a[r] + "px)"), 
-                !u.matches); r++) ;
+                for (i = t[l], a = Object.keys(o[l]).map(e => +e).sort((e, t) => t - e), u = e, 
+                r = 0; r < a.length && (u = window.matchMedia("(min-width: " + a[r] + "px)"), !u.matches); r++) ;
                 if (u == e || !u.matches || r == a.length) continue;
-                if (n = "url(" + c[l][a[r]] + ")", i.style.backgroundImage == n) continue;
-                let o = new Image, d = function(e) {
+                if (n = "url(" + o[l][a[r]] + ")", i.style.backgroundImage == n) continue;
+                let c = new Image, s = function(e) {
                     return function() {
                         i.style.backgroundImage = e;
                     };
                 }(n);
-                o.src = c[l][a[r]], o.width > 0 && o.height > 0 ? d() : "decode" in o ? o.decode().then(d) : o.onload = d;
+                c.src = o[l][a[r]], c.width > 0 && c.height > 0 ? s() : "decode" in c ? c.decode().then(s) : c.onload = s;
             }
         }
-        Object.values(c).forEach((function(e) {
+        Object.values(o).forEach((function(e) {
             Object.keys(e).forEach((function(e) {
-                e = +e, -1 == o.indexOf(e) && o.push(e);
+                e = +e, -1 == c.indexOf(e) && c.push(e);
             }));
-        })), o.sort((function(e, t) {
+        })), c.sort((function(e, t) {
             return t - e;
         })), window.addEventListener("resize", n, !1), setTimeout(n, 25);
     }

build.sh

@@ -16,6 +16,8 @@ fail() {
 #
 #
 # build config files
+npm run rollup-config
+npm run terser-config
 # process es6+ deps
 node rollup.config.js
 # minify