Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Fast Loading Page Example</title> <style> body { font-family: sans-serif; margin: 20px; line-height: 1.6; } .demo-box { background-color: #e2e3e5; padding: 20px; border-radius: 8px; margin-bottom: 20px; } img { max-width: 100%; height: auto; display: block; border-radius: 4px; margin-top: 15px; background-color: #ccc; /* Placeholder color while loading */ min-height: 300px; } .code-caption { background: #fff; padding: 10px; font-family: monospace; font-size: 0.9em; color: #d63384; border: 1px solid #ddd; margin-top: 10px; } </style> <!-- 1. Preconnect to external domains to establish connections early --> <link rel="preconnect" href="https://fonts.googleapis.com"> <!-- 2. Preload critical assets like the main font or hero image --> <link rel="preload" href="/common/css/master.48.min.css" as="style"> </head> <body> <h1>Optimization Demonstration</h1> <p>This page uses several techniques to ensure it paints to the screen as fast as possible.</p> <div class="demo-box"> <!-- 3. Deferring Non-Critical JavaScript --> <h2>Deferring Non-Critical JavaScript</h2> <p>By adding the <code>defer</code> attribute, we tell the browser to download the script in the background, without stopping the HTML from rendering to the screen.</p> <div class="code-caption"><script src="heavy-analytics.js" defer></script></div> <!-- This script downloads in the background without blocking the page load --> <!-- <script src="analytics.js" defer></script> --> </div> <div class="demo-box"> <!-- 4. Lazy Loading Images --> <h2>Lazy Loading Images</h2> <p>If you have an image far below the fold, there is no reason to force the user to download it immediately. The <code>loading="lazy"</code> attribute fixes this natively.</p> <div class="code-caption"><img src="massive-photo.jpg" loading="lazy" alt="..."></div> <!-- The browser will wait to download this image until the user scrolls near it --> <img src="/pix/samples/21m.jpg" loading="lazy" alt="A sample large photograph"> </div> </body> </html>
