My puppyのブログ

学んだ事や作っているプログラムなどについて書いています。

webpとlazyloadを実装しました(eng.lish.video)

昨日のことなのですが、eng.lish.videoにwebpとlazyloadを実装しました。

webpとはjpgよりファイルサイズが小さい画像形式です。

webpは「ウェッピー」と読みます。

今までサイト上ではjpgを使用していたのですが、これをプログラムを使ってwebpに変換しました。

jpgにくらべてファイルサイズが30%程小さくなりましたね。

webpについて詳しく解説されている方がいらっしゃったので下にリンクを載せておきます。

もう一つ実装したのはlazyloadです。

lazyloadとは画像の遅延読み込みです。

スマホやパソコンの画面上に表示されている画像のみを読み込んで、画面外の画像はスクロールした時に初めて読み込むようにしました。

これによってサイトの表示が高速化されます。

サイトの表示が高速化されるとグーグル検索での表示順位が上がって、サイトのアクセス数が増える可能性が高まります。

lazyloadも詳しく解説していらっしゃる方がいましたのでリンクを載せておきますね。

webpとlazyloadを実装してもeng.lish.video上の見た目はほとんど変わらないのですが、もしよかったらアクセスしてみてください。