ウェブサイトのスピードスコアを上げるには？

Question

私は、テキストと画像のみを含む純粋な "HTML、CSS、JS"ウェブサイトを開発しました。特別な画像を読み込むのに時間がかかりましたが（全5ページの画像サイズは16MBです）、画像の一部画面サイズに応じて幅と高さが変化していますが、私はGoogleの速度の洞察を試みましたが、それは役に立たない "https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.zhtml.aba.ae "

私もgtmetrix「https://gtmetrix.com/reports/www.zhtml.aba.ae/LzvOPr5R」

を試みたが、それだけで画像のサイズの小さな量を減らしています。

どのように私のウェブサイトの速度特別なイメージを改善するには？

Answer 1

// 1. Convert node list of all images with 
 
// data-src attribute to an array 
 
const imgs = [ ...document.querySelectorAll('img[data-src]') ]; 
 
// 2. Wrap the code on a feature test for IntersectionObserver 
 
if ('IntersectionObserver' in window) { 
 
    // 3. Create the IntersectionObserver and bind it to the function 
 
    // we want it to work with 
 
    let observer = new IntersectionObserver(onChange); 
 

 
    function onChange(changes) { 
 
    // 4. For each image that we want to change 
 
    changes.forEach((change) => { 
 
     // * take image url from `data-src` attribute 
 
     change.target.src = change.target.dataset.src; 
 
     // * Stop observing the current target 
 
     observer.unobserve(change.target); 
 
    }) 
 
    } 
 

 
// 5. Observe each image derived from the array above 
 
    imgs.forEach((img) => observer.observe(img)); 
 
} else { 
 
// 6. if the browser doesn't support Intersection Observer 
 
// we log to console and load images manually 
 
    console.log('Intersection Observers not supported'); 
 
    function loadImages(imgs) { 
 
    imgs.forEach((image) => { 
 
     image.src = image.dataset.src; 
 
    }) 
 
    } 
 
    loadImages(imgs); 
 
}

.img-atr{ 
 
    width: 400px; 
 
}

<img class="img-atr" data-src='https://cdn2.droom.in/photos/images/drm/super-cars.png' /> 
 
<br><br><br> 
 
<img class="img-atr" data-src='https://static.pexels.com/photos/50704/car-race-ferrari-racing-car-pirelli-50704.jpeg' /> 
 
<br><br><br> 
 
<img class="img-atr" data-src='https://i.autotrader.co.za/merlin-image-server/web-content/cars-for-sale-south-africa.jpg' /> 
 
<br><br><br> 
 
<img class="img-atr" data-src='http://bestride.com/wp-content/uploads/2015/11/Used-Car-Buying-Guide-Making-Sure-You-Get-a-Good-One-03.png' /> 
 
<br><br><br> 
 
<img class="img-atr" data-src='https://static.pexels.com/photos/120049/pexels-photo-120049.jpeg' /> 
 
<br><br><br> 
 
<img class="img-atr" data-src='https://www.u2j.org/wp-content/uploads/2014/03/ceiling-lights-indoor-light-light-bulbs-christmas-lights-bathroom-light-fixtures-light-led-lighting-room-lights-heavenly-led-lights-for-growing-plants-green-led-lights-for-carsled-glow-lights-for.jpg' /> 
 
<br><br><br>