Web制作会社への転職に向けてポートフォリオを作成し、よしこれで就活だ！と思った矢先。
あれ、画像の読み込みが遅いぞ？これでは採用担当が見る気を失う！
と至り、Webサイト表示の高速化について調べました
意外と理解するのが難しかったり、適した解決策を見つけるのに困難したりしたので、私がこれがいいかなと思うものをやれたところまでまとめてみました
【レベル感】
HTML/CSSをProgateで学習し、クリスタさんの模写、初級・中級・上級を各3回ずつコーディング
→https://crestadesign.org/cording-training/
【目次】
- Page Speed Insightsで測定
- 課題項目と解決策のまとめ
- 効率的な画像フォーマット
┗ 画像最適化 - 次世代フォーマットでの画像の配信
┗ JPEG 2000、JPEG XR、WebPなどの画像フォーマット - オフスクリーン画像の遅延読み込み
┗ 遅延ロード - レンダリングを妨げるリソースの除外について
┗ ・クリティカルCSSインライン化
・CSSの非同期
・JSの記述
- 使用していない CSS を削除してください
- 効率的な画像フォーマット
- 自動的にまとめてやってくれるツール
- まとめ
【Page Speed Insightsで測定】
↓まずはGoogle公式提供の無料ツールPage Speed Insightsで測定
https://developers.google.com/speed/pagespeed/insights/
使い方は測定したいサイトのURLを貼って診断ボタンを押すだけ
「改善できる項目」や「診断」を確認し改善、スコアを上げていきます
↓使い方についての参考
https://wagtechblog.com/blog/pagespeed-insights-how.html
【課題項目と解決策のまとめ】
「改善できる項目」や「診断」に出てきた問題に沿って解決策を調べていきました
解決策や解決する為のツールが幾つもあるようで、その中から抜粋したものをここで紹介していきます
「効率的な画像フォーマット」
●画像最適化→Image Optim(Mac限定)
現役エンジニアの知人からMacならこれ！と教えて頂いたツールです
↓Macの画像圧縮ソフトはフリーで便利な「ImageOptim for Mac」で決まり！ | ビギナーズハイ
https://beginners-high.com/mac-imageoptim/
画像を圧縮すると画質が変わってしまうと言われますが、私感ではどこが変わったか分からないくらいでした
↓分かりやすく比較しているサイトがありましたので、参考にどうぞ
ツールも9個紹介されています
https://naifix.com/jpeg-lossy-compression/
Windowsの方も自分の気に入ったものを探してみて下さい
「次世代フォーマットでの画像の配信」
画像最適化する中で1個だけ次世代フォーマットが出てきました
JPEG 2000、JPEG XR、WebP などの画像フォーマットが推奨されているようです
↓「次世代フォーマットでの画像の配信」ってどうすればいいの？ | ウェブラボ（株）スタッフブログ
https://www.weblab.co.jp/staff/design/8642.html
まだ非対応のブラウザもあるようなので
私はminify化して解決しましたが
これから変わっていきそうなので覚えておくといいかもしれません
↓ちなみにminify化に使ったツールは JPEG圧縮
https://compressjpeg.com/ja/
2021.1.6追記 WebPをSafariのPCで標準サポート始まりましたね↓
https://www.suzukikenichi.com/blog/safari-on-big-sur-now-supports-webp/?utm_source=feedburner&utm_medium=feed&utm_campaign=FeedBurner
「オフスクリーン画像の遅延読み込み」
●遅延ロード
必要な分だけの画像を取得し、他は遅らせてロードするようにするというものです
class名を追加して識別するという仕組みに感心しながらコードを書き換えた記憶があります
↓Lazy Loadで画像を遅延ロードする方法│クロール対策│テクニカルSEO BLOG
https://cluster-seo.com/blog/lazy-load-javascript-library.html
「レンダリングを妨げるリソースの除外」
CSS や JavaScript の読み込みで、Web ページを表示するための描画処理を妨げているのでそれらを解消していきます
●クリティカルCSSのインライン化
表示に必要なCSSを抽出して、外部ファイル化せずにそのままHTML文書の一部として埋め込んで、読み込みを早くします
私が使ったツールは下のサイトで紹介されているCritical Path CSS Generatorです
↓レンダリングを妨げるリソースの除外/CSSを非同期で読み込む / Web Design Leaves
https://www.webdesignleaves.com/pr/css/load_css_async.html
●CSSの非同期
最初に画面表示されないCSSをバックグラウンドでロードしていくことです
方法はいくつか存在するようですが、
広くブラウザに対応され且つシンプルな方法は
linkタグに下記属性を追加する方法が良さそうです
media="print" onload="this.media='all'"
<link rel="stylesheet" href="/□□/△△/〇〇.css" media="print" onload="this.media='all'">
↓CSSを非同期ロードする最も簡単な方法 - Qiita
https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657
●JSの記述
知人の現役エンジニアさん曰く
分岐、不要部分はreturn;などして実行しない
（スクロールイベントは特に負荷が重い）
私はJSは対して使っていなかったので、何も触りませんでした
「使用していない CSS を削除してください」
新しいCSSを追加する時に古いCSSを残してしまいます
Webページを表示させる時に、
その古い使わないCSSを読み込んでしまい、
時間がかかる原因の一つになるので、削除する必要があります
確認方法
Google Chromeのデベロッパーツールの「Coverage」機能
どの部分かや使用・未使用のパーセンテージが緑と赤のバーで分かりやすく表示されます
これを見ながら未使用部分を文字通りコードから削除していきますが
Coverageで表示されている赤の未使用部分が別ページでは使うセレクタの場合もあり、よく確認しながら削除していきます
↓使い方・参考はこちらをご確認下さい
KOHIMOTO LABO
私の場合、未使用のCSSがFont Awesomeのall.cssでした
↓使う分だけの記述の仕方もあるようですが
https://web.analogstd.com/tips/posts/css/how2use-font-awesome5.php
１つしか使っていなかったし
記号で代用出来るものだったので
外部ファイル乱用はNGという法則にも則り
Font Awesome自身、使うのを辞めました
【自動的にまとめてやってくれるツール】
WordPressのプラグインになりますが、選択したら自動的にまとめてやってくれるツールもあるみたいです✍️
↓Autoptimize
CSSやJSなどのリソースを軽量・最適化してくれる
https://tekito-style.me/columns/wordpress-plugin-autoptimize
↓EWWW Image Optimizer
画像を劣化させることなく、アップ時に自動で画像サイズを圧縮してくれる
https://bazubu.com/ewww-image-optimizer-23864.html
背景が分かったら効率化の為に使っていくといいかもしれません
上記プラグインはこちらのYoutubeで紹介されていました
↓ページ表示速度を改善する6つの方法【プラグイン設定方法も解説】
https://www.youtube.com/watch?v=jMnOWXy1XvA&feature=youtu.be
【まとめ】
Web高速化はユーザー視点のSEO対策で重要になるので、おさえていきたいところですね
ここで紹介したもの以外にも、解決策や便利なツールがまだまだあると思います
これをきっかけにご自身の使いやすい方法を見つけるスタートになると嬉しいです