Website Speed Test

<!-- Preload critical CSS for faster rendering -->
<link rel="preload" href="https://github.githubassets.com/assets/primer-primitives-f9161d06200ae2dc.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-f9161d06200ae2dc.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-f30be7a1f27bcb6b.css');
loadCSS('https://github.githubassets.com/assets/light_high_contrast-10373d2d112fc873.css');
loadCSS('https://github.githubassets.com/assets/dark-d9d99f8c9aa4fbfd.css');
loadCSS('https://github.githubassets.com/assets/dark_high_contrast-f68e181a9067f808.css');
loadCSS('https://github.githubassets.com/assets/primer-ee6184595cc59cb2.css');
loadCSS('https://github.githubassets.com/assets/global-6326a07d26552848.css');
loadCSS('https://github.githubassets.com/assets/github-c53b912064ef8de5.css');
loadCSS('https://github.githubassets.com/assets/site-bd4db0be6122c1db.css');
loadCSS('https://github.githubassets.com/assets/landing-pages-39b597255d37f4cf.css');
loadCSS('https://github.githubassets.com/assets/home-c4fafabf3727e3b7.css');
loadCSS('https://github.githubassets.com/assets/primer-react.298ffe31d478a02c.module.css');
loadCSS('https://github.githubassets.com/assets/landing-pages.ed6a279862699d8c.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;