Set loading='lazy' to each image in top page

Author: yasulab

index.html

@@ -138,7 +138,11 @@
       <!--<div id="header"></div>-->
       <div id="header_logo_index">
         <div class="logo_area">
-          <p class="logo"><img src="/img/logo.png" alt="{{ site.title }}" title="{{ site.title }}" width="300px" /></p>
+          <p class="logo">
+	    <img src="/img/logo.png" width="300px" loading="lazy" 
+	         alt="{{ site.title }}"
+	       title="{{ site.title }}" />
+	  </p>
         </div>
         <a href="#index_content1" class="link"><span>Start content</span></a>
       </div>
@@ -156,7 +160,9 @@
 	    <div id="logo_image">
 	      <h1 class="logo">
 		<a href="/" title="{{ site.title }}">
-		  <img src="/img/logo.png" alt="{{ site.title }}" title="{{ site.title }}" width="300px" />
+		  <img src="/img/logo.png" width="300px" loading="lazy" 
+		       alt="{{ site.title }}"
+		     title="{{ site.title }}" />
 		</a>
 	      </h1>
 	    </div>
@@ -181,7 +187,9 @@ <h3 class="headline rich_font" style='margin-top: 70px;'>CoderDojo とは？</h3
 	</div>
 
 	<div class="index_content2">
-	  <img src="/img/cover-photo.jpg" title="DojoCon Japan Cover Photo" alt="DojoCon Japan Cover Photo" />
+	  <img src="/img/cover-photo.jpg" loading="lazy"
+	       alt="DojoCon Japan Cover Photo"
+	     title="DojoCon Japan Cover Photo" />
 	</div>
       </div><!-- END #index_content1 -->
 
@@ -199,9 +207,9 @@ <h3 class="headline rich_font">DojoCon Japan 開催例</h3>
 	    <div class='box clearfix' style='margin-bottom: 50px;'>
               <div class="image">
 		<a href="{{ event.url }}">
-		  <img   src="/img/events/{{ event.img }}"
-		         alt="DojoCon Japan {{ event.year }} @ {{ event.venue }}"
-		       title="DojoCon Japan {{ event.year }} @ {{ event.venue }}" />
+		  <img src="/img/events/{{ event.img }}" loading="lazy"
+		       alt="DojoCon Japan {{ event.year }} @ {{ event.venue }}"
+		     title="DojoCon Japan {{ event.year }} @ {{ event.venue }}" />
 		</a>
 	      </div>
 
@@ -273,7 +281,9 @@ <h3 class="headline">
 	  <div id="footer_logo">
 	    <div class="logo_area">
 	      <p class="logo">
-		<img src="/img/logo.png" alt="{{ site.title }}" title="{{ site.title }}" width="300px" />
+		<img src="/img/logo.png" width="300px" loading="lazy"
+		     alt="{{ site.title }}"
+		   title="{{ site.title }}" />
 	      </p>
 	    </div>
 	  </div>