Optimize frontend assets: remove unused files (~1.2MB), add JS minification, lazy loading, update docs. Version 1.3.3

Author: tikhomirov

.gitignore

@@ -5,4 +5,5 @@
 *.phar
 .phpunit.cache
 vendor
-lib/
+lib/
+assets/node_modules/

README.md

@@ -30,6 +30,27 @@ Transform your standard WordPress installation into an excellent, optimized webs
 3. Activate through WordPress admin
 4. Configure settings in **WP Excellence Addon** menu
 
+## 🛠️ Assets & Build Process
+
+### Static Resources Structure
+- **CSS**: SCSS compilation with Gulp, minified output in `assets/css/min/`
+- **JS**: Uglified JavaScript in `assets/js/min/`
+- **Images**: Optimized WebP/SVG formats with lazy loading
+
+### Development Setup
+```bash
+cd assets/
+npm install
+npm run build    # Build for production
+npm run dev      # Watch mode for development
+```
+
+### Asset Loading
+- Main stylesheet: `wp-addon.min.css` (enqueued automatically)
+- TinyMCE plugins: Loaded conditionally based on settings
+- FontAwesome: CDN for editor, Unicode icons for frontend
+- Images: Lazy loading enabled by default
+
 ## ✅ Requirements
 
 - WordPress 6.6+

assets/css/critical.css

@@ -26,13 +26,9 @@ $color: #008ee1;
 
             &:before {
                 width: 25px;
-                content: "\f00c";
+                content: "✓";
                 display: inline-block;
-                font: 14px/1 FontAwesome;
                 font-size: inherit;
-                text-rendering: auto;
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
                 position: initial;
                 margin-left: -20px;
                 top: 6px;
@@ -42,14 +38,14 @@ $color: #008ee1;
 
     .list-style-star li {
         &:before {
-            content: "\f005";
+            content: "★";
             color: $color;
         }
     }
 
     .list-style-check li {
         &:before {
-            content: "\f00c";
+            content: "✓";
             color: $color;
         }
     }

assets/css/font-awesome.css

@@ -4,18 +4,18 @@
 
 $color: #008ee1;
 
+img {
+  loading: lazy;
+}
+
 .list {
   li{
     list-style: none;
     &:before {
       width: 25px;
-      content: "\f00c";
+      content: "✓";
       display: inline-block;
-      font: 14px/1 FontAwesome;
       font-size: inherit;
-      text-rendering: auto;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
       position: initial;
       margin-left: -20px;
       top: 6px;
@@ -24,16 +24,14 @@ $color: #008ee1;
 }
 .list-style-star li {
   &:before {
-    content: "\f005";
+    content: "★";
     color: $color;
-    font: 14px/1 FontAwesome;
   }
 }
 .list-style-check li{
   &:before {
-    content: "\f00c";
+    content: "✓";
     color: $color;
-    font: 14px/1 FontAwesome;
   }
 }