Merge pull request #102 from jaygaikar-09/fix/lazy-loading-performance

Improve lazy loading and hero rendering performance

Author: komalharshita

CONTRIBUTING.md

@@ -180,6 +180,7 @@ def score_single_project(project, user_skills, level, interest, time_availabilit
 - Use 2-space indentation
 - Every `<section>` must have a comment header explaining its purpose
 - All images must have an `alt` attribute
+- Use `loading="lazy"` on `<img>` tags by default; omit it only for images critical to the initial render (for example, a hero photo above the fold)
 - Use semantic elements: `<nav>`, `<section>`, `<footer>`, `<article>`
 - Keep inline styles out of templates — use CSS classes instead
 

starter_code/portfolio.html

@@ -426,7 +426,7 @@
       letter-spacing: -0.02em;
     }
     /* TODO Step 4: Replace these generic colours with real project screenshots.
-       Use <img src="screenshot.png" alt="..." class="project-banner-img" />
+       Use <img src="screenshot.png" alt="..." class="project-banner-img" loading="lazy" />
        and set height: 180px on .project-card img */
     .banner-blue   { background: linear-gradient(135deg, #2335c2, #4f6ef7); }
     .banner-purple { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
@@ -776,7 +776,7 @@ <h2 class="section-title">Things I Have Built</h2>
         <!-- TODO Step 4: Replace with your real project details -->
         <article class="project-card reveal">
           <div class="project-banner banner-blue">
-            <!-- Replace this with a screenshot: <img src="screenshot.png" alt="Project name"> -->
+            <!-- Replace this with a screenshot: <img src="screenshot.png" alt="Project name" loading="lazy"> -->
             Project One
           </div>
           <div class="project-body">

starter_code/weather_dashboard.html

@@ -261,7 +261,7 @@ <h1>Weather Dashboard</h1>
     </div>
 
     <div class="temp-row">
-      <img class="weather-icon" id="weather-icon" src="" alt="weather icon" />
+      <img class="weather-icon" id="weather-icon" src="" alt="weather icon" loading="lazy" />
       <div>
         <span class="temp-value" id="temp-value"></span>
         <span class="temp-unit" id="temp-unit">C</span>

static/style.css

@@ -257,8 +257,8 @@ ul, ol { list-style: none; }
   width: 100%;
 }
 
-/* Copy column */
-.hero-copy { max-width: 580px; }
+/* Copy column (order keeps layout when decorative blocks follow in DOM) */
+.hero-copy { max-width: 580px; order: 1; }
 
 .hero-badge {
   display: inline-flex;
@@ -374,6 +374,7 @@ ul, ol { list-style: none; }
   display: flex;
   flex-direction: column;
   gap: 12px;
+  order: 2;
 }
 
 /* Floating info cards */

templates/index.html

@@ -44,8 +44,6 @@
        Hero Section
        ============================================================ -->
   <section class="hero" id="home">
-    <div class="hero-bg-grid"></div>
-
     <div class="hero-inner">
       <!-- Left: copy -->
       <div class="hero-copy">
@@ -89,7 +87,7 @@ <h1 class="hero-heading">
         </div>
       </div>
 
-      <!-- Right: abstract visual panel -->
+      <!-- Hero visual loads after main content for performance -->
       <div class="hero-visual">
         <div class="hero-visual-card hero-visual-card--top">
           <div class="hvc-icon hvc-icon--blue">
@@ -142,7 +140,8 @@ <h1 class="hero-heading">
       </div>
     </div>
 
-    <!-- Decorative background blobs -->
+    <!-- Hero visual loads after main content for performance -->
+    <div class="hero-bg-grid"></div>
     <div class="hero-blob hero-blob-1"></div>
     <div class="hero-blob hero-blob-2"></div>
   </section>