🚀 Optimize website performance: compress images, add lazy loading, minify CSS/JS, add cache headers

Author: YousefMohamd

.eleventy.js

@@ -1,24 +1,15 @@
-// .eleventy.js
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginNavigation = require("@11ty/eleventy-navigation");
-
 module.exports = function(eleventyConfig) {
-  // Plugins
   eleventyConfig.addPlugin(pluginRss);
   eleventyConfig.addPlugin(pluginNavigation);
-
-  // Static passthrough
   eleventyConfig.addPassthroughCopy({ "img": "img" });
   eleventyConfig.addPassthroughCopy({ "css": "css" });
   eleventyConfig.addPassthroughCopy({ "files": "files" });
-
-  // Date filters (fallbacks)
   eleventyConfig.addFilter("htmlDateString", (d) => new Date(d).toISOString().slice(0, 10));
   eleventyConfig.addFilter("readableDate", (d) =>
     new Date(d).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })
   );
-
-  // Tags utilities زي Eleventy Base Blog
   const EXCLUDED = new Set(["all","nav","post","posts"]);
   eleventyConfig.addFilter("filterTagList", (tags) => (tags || []).filter((t) => !EXCLUDED.has(t)));
   eleventyConfig.addCollection("tagList", (api) => {
@@ -28,7 +19,6 @@ module.exports = function(eleventyConfig) {
     });
     return Array.from(set).sort();
   });
-
   return {
     dir: { input: ".", includes: "_includes", data: "_data", output: "_site" },
     htmlTemplateEngine: "njk",

.htaccess

@@ -0,0 +1,20 @@
+<IfModule mod_expires.c>
+ExpiresActive on
+ExpiresByType text/css "access plus 1 year"
+ExpiresByType application/javascript "access plus 1 year"
+ExpiresByType image/png "access plus 1 year"
+ExpiresByType image/jpg "access plus 1 year"
+ExpiresByType image/jpeg "access plus 1 year"
+</IfModule>
+
+<IfModule mod_deflate.c>
+AddOutputFilterByType DEFLATE text/plain
+AddOutputFilterByType DEFLATE text/html
+AddOutputFilterByType DEFLATE text/xml
+AddOutputFilterByType DEFLATE text/css
+AddOutputFilterByType DEFLATE application/xml
+AddOutputFilterByType DEFLATE application/xhtml+xml
+AddOutputFilterByType DEFLATE application/rss+xml
+AddOutputFilterByType DEFLATE application/javascript
+AddOutputFilterByType DEFLATE application/x-javascript
+</IfModule>

_11ty/getTagList.js

@@ -3,26 +3,20 @@ module.exports = function(collection) {
   collection.getAll().forEach(function(item) {
     if( "tags" in item.data ) {
       let tags = item.data.tags;
-
       tags = tags.filter(function(item) {
         switch(item) {
-          // this list should match the `filter` list in tags.njk
           case "all":
           case "nav":
           case "post":
           case "posts":
             return false;
         }
-
         return true;
       });
-
       for (const tag of tags) {
         tagSet.add(tag);
       }
     }
   });
-
-  // returning an array in addCollection works in Eleventy 0.5.3
   return [...tagSet];
 };

_data/concept.js

@@ -1,15 +1,12 @@
 const fs = require("fs");
 const path = require("path");
-
 function extractNumber(basename) {
   const m = basename.match(/\d+/);
   return m ? parseInt(m[0], 10) : -Infinity;
 }
-
 module.exports = function () {
   const dir = "img/projects/concept-art";
   if (!fs.existsSync(dir)) return [];
-
   const exts = new Set([".jpg", ".jpeg", ".png", ".webp", ".gif", ".svg"]);
   const files = fs
     .readdirSync(dir)
@@ -30,7 +27,5 @@ module.exports = function () {
       if (b.num !== a.num) return b.num - a.num;
       return a.name.localeCompare(b.name);
     });
-
   return files;
 };
-

_data/graphic.js

@@ -1,17 +1,12 @@
 const fs = require("fs");
 const path = require("path");
-
-// هترتّب حسب الرقم في اسم الملف (تنازلي)، وبعدين حسب الاسم كـ fallback
 function extractNumber(basename) {
-  // بيلقط أول رقم في الاسم: 001, 12, 2024 ... الخ
   const m = basename.match(/\d+/);
   return m ? parseInt(m[0], 10) : -Infinity; // اللي ملوش رقم يروح في الآخر
 }
-
 module.exports = function () {
   const dir = "img/projects/graphic-design";
   if (!fs.existsSync(dir)) return [];
-
   const exts = new Set([".jpg", ".jpeg", ".png", ".webp", ".gif", ".svg"]);
   const files = fs
     .readdirSync(dir)
@@ -32,7 +27,5 @@ module.exports = function () {
       if (b.num !== a.num) return b.num - a.num; // الأكبر رقمًا الأول
       return a.name.localeCompare(b.name); // تعادل: رتب ألفبائي
     });
-
   return files;
 };
-