Website Speed Test

<!-- Preload critical CSS for faster rendering -->
<link rel="preload" href="https://github.githubassets.com/assets/primer-primitives-c37d781e2da5.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-c37d781e2da5.css"></noscript>

<!-- Load non-critical CSS asynchronously -->
<script>
function loadCSS(href) {
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = href;
  document.head.appendChild(link);
}

loadCSS('https://github.githubassets.com/assets/light-8e973f836952.css');
loadCSS('https://github.githubassets.com/assets/light_high_contrast-34b642d57214.css');
loadCSS('https://github.githubassets.com/assets/dark-4bce7af39e21.css');
loadCSS('https://github.githubassets.com/assets/dark_high_contrast-ad512d3e2f3b.css');
loadCSS('https://github.githubassets.com/assets/primer-8bf3328b2828.css');
loadCSS('https://github.githubassets.com/assets/global-550891c33aa6.css');
loadCSS('https://github.githubassets.com/assets/github-f86c648606b5.css');
loadCSS('https://github.githubassets.com/assets/site-7908d55f3275.css');
loadCSS('https://github.githubassets.com/assets/landing-pages-0cb0c2f00e3a.css');
loadCSS('https://github.githubassets.com/assets/home-99f0f34e57e5.css');
loadCSS('https://github.githubassets.com/assets/primer-react.35907f412927d45d6534.module.css');
loadCSS('https://github.githubassets.com/assets/landing-pages.135ee2774881c3ae04db.module.css');
</script>

<!-- Responsive images with modern formats -->
<picture>
  <source srcset="images/accordion-1-ce487d44c0bf.webp" type="image/webp">
  <source srcset="images/accordion-1-ce487d44c0bf.jpg" type="image/jpeg">
  <img src="https://images.ctfassets.net/8aevphvgewt8/1Dt1ncaR6ZM4dQvknFzfBI/e5c2092be5bd53881622eced4fd37564/accordion-1-ce487d44c0bf.webp" alt="Description" loading="lazy" 
       width="800" height="600">
</picture>

<picture>
  <source srcset="images/accordion-2-730955545f07.webp" type="image/webp">
  <source srcset="images/accordion-2-730955545f07.jpg" type="image/jpeg">
  <img src="https://images.ctfassets.net/8aevphvgewt8/1uXZYDy7dMcH9QwxuAU06F/1cb167cc60d725b8cf7089faf9a4ed06/accordion-2-730955545f07.webp" alt="Description" loading="lazy" 
       width="800" height="600">
</picture>

<picture>
  <source srcset="images/accordion-3-52ca331d22ea.webp" type="image/webp">
  <source srcset="images/accordion-3-52ca331d22ea.jpg" type="image/jpeg">
  <img src="https://images.ctfassets.net/8aevphvgewt8/3xzVZaJhqo3B62R8NeHjX2/e37c81e4f26e9dac2aff1f23a0243087/accordion-3-52ca331d22ea.webp" alt="Description" loading="lazy" 
       width="800" height="600">
</picture>

<!-- CSS for responsive behavior -->
<style>
img {
  max-width: 100%;
  height: auto;
}
</style>

<!-- Add lazy loading to images below the fold -->
<img src="image.jpg" alt="Description" loading="lazy" width="400" height="300">

<!-- For better browser support, use this polyfill -->
<script>
if ('loading' in HTMLImageElement.prototype) {
  // Native lazy loading supported
} else {
  // Fallback for older browsers
  var images = document.querySelectorAll('img[loading="lazy"]');
  var imageObserver = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        var image = entry.target;
        image.src = image.dataset.src;
        image.classList.remove('lazy');
        imageObserver.unobserve(image);
      }
    });
  });
  images.forEach(function(img) { imageObserver.observe(img); });
}
</script>

# Add to your .htaccess file for Apache
<IfModule mod_deflate.c>
    # Compress HTML, CSS, JavaScript, Text, XML and fonts
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/xml
</IfModule>

# For Nginx, add to your server block:
# gzip on;
# gzip_vary on;
# gzip_min_length 1024;
# gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/javascript;