ウェブページの読み込みを高速化する

イメージは広く使われます

イメージは、我々の帯域幅でより多くのスペースをとります.
W3Techs statistic すべてのウェブサイトの90 %がイメージを使用することを示します.
For news.google.com , イメージは、ロード時間(ソース:私は手動でdevtoolsを使用してページを分析)の30 %を取って、ホームページに読み込まれる資産の44 %をカウントします.

Webp

GoogleはWebp画像形式を提案しました.
Google自身によって行われるケーススタディによるとdifferent lossless compression algorithm vs webp , この最後は、保存されたバイトの42 %を古典的なPNG圧縮ライブラリと比較して示しました.
私もJPEGイメージ(1920 x 1080)に対してテストしました、そして、ここにそれが与えるものです:

ご覧のように、JPEGイメージはWEBイメージのために530 KB対190 KBを重くします.そして、それは36 %より重いです.そして、GoogleがPNGに対してどうしているかについて遠くないです.
Original image

報道

WebPは、すべての最も人気のあるブラウザ間で正しくサポートされています75% coverage 現時点では)
ブラウザ
サポート
ミニマムバージョン
発売日
インターネットエクスプローラー
✘
エッジ
✔
18
2018年11月13日
クロム
✔
71
2018年12月5日
ファイアフォックス
✔
65
2019年1月29日
オペラ
✔
56
2018年(平成18年)9月25日
サファ
✘
ソースhttps://caniuse.com/#feat=webp

生産におけるWebPの利用

Webページの最適化の例を示します<picture> HTMLタグ

<!-- before -->
<img src="/img/mountain.jpg" alt="Moutains view" />

<!-- after -->
<picture>
  <source type="image/webp" srcset="/img/mountain.webp" />
  <img src="/img/mountain.jpg" alt="Mountains view" />
</picture>

WebPがユーザーエージェントによってサポートされていない場合、ブラウザは<img /> . 写真はHTMLタグです87% of coverage (この部分を改善するためのMerci )<picture> タグ、まだそれにフォールバック<img /> とにかく、タグをつけてください.
The <picture> タグはとてもパワフルなので、現在のブラウザのビューポート幅に応じてイメージサイズを選択できます.もっと学ぶMDN page .

WEBフォーマットへの画像変換ツール

WEBに画像を変換するためのオンラインサービスがたくさんあります.私は個人的にこのタスクを自動化するGulp.js .

const gulp = require("gulp");
const webp = require("gulp-webp");

gulp.task("webp", function() {
  return gulp.src("src/img/**/*.{jpg,jpeg,png,svg}")
    .pipe(webp())
    .pipe(gulp.dest("dist/img"));
});

さらに進む

Borisによってこの信じられないほど完全なイメージ最適化記事をあなたに再命令させてください.

ページ重量を減らすためにイメージを最適化してください：ファイル形式、ツールとRWD

ボリスシャペラ・ Nov 8・ 10分読む

#performance #images #webperf #webdev

コンフィクション

ウェブサイトを構築するか、維持することは、我々のユーザーに対する責任でも来ます:我々は、光データ計画に関してユーザーを考慮に入れなければなりません.
私は、ウェブ開発が最適化の期間でとても多くの可能性を提供していると思います.これは、ユーザーの帯域幅使用量を減らすことによって、そして、同じようにあなたのサーバーI/O時間を減らすことによって、約束を改善する絶好の機会です.
そういうわけで、私は、Webpがユーザーエクスペリエンスを損なうことなくそれらの貴重なバイトを整えるようになるとき、良い同盟国であるかもしれないと思います.
ハッピー最適化!
カバー写真Pixabay からPexels