こんばんわ!こふそ(@koheta0325)です!
つい先月、サイトの高速化対応したので、その際の備忘録として紹介します。
GoogleのPageSpeed Insightsの結果がヤバイ・・・
サイトの読み込み速度遅すぎて笑ったhttps://t.co/zc2Sq095qn pic.twitter.com/NisslrSmNu
— こふそ@webエンジニア (@koheta0325) December 6, 2019
何気なしに自分のブログで、GoogleのPageSpeed Insightsをチェックしてみました。
PageSpeed Insightsとは?
→ホームページ・ブログの読み込み速度のチェックサービスです(無料)
6/100はヤバイと思った。(モバイル)
↓の画像は、↑の時とは違うんだけど、だいたいこんな感じだった。
急遽いろいろ対策してみました。
今の環境
- レンタルサーバーはMixhost
- PHPのバージョンは7.2.24
- フレームワークはCakephp3
とりあえずサイト構成は割と適当に考えていました。
対策1.webpファイルの対応
次世代フォーマットでの画像の配信でめちゃくちゃ遅い状態
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。
とのことです。
よくわからんけど、調査したところ、jpgやpngをwebpに変換して表示すれば高速化につながるらしい。
自分のサイトの場合、解像度にはあまりこだわっていないけど、目に見えるほど解像度は落ちたようには見えませんでした。
↓のサイトでpngやjpgの画像をwebpへ簡単に変換してくれます。
https://lab.syncer.jp/Tool/Webp-Converter/
こんな感じで、変換してできたファイルは、【元の画像名+.webp】という感じにして同じディレクトリに置いておきます。
ちなみにwebpファイルはブラウザや端末によって未対応であることもあるようです。
その場合、エラーが起きちゃうじゃん!と思ったのですが、
・対応ブラウザの場合はwebp画像の表示
・非対応ブラウザの場合は元のjpg,png画像の表示
という感じで切り替えが簡単にできます。その場合は次の【.htaccess】ファイルに追記します。
.htaccessにwebpファイル置き換えの対応
.htaccessファイルに以下の記述を追記します。
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
Header append Vary Accept env=REDIRECT_accept
AddType image/webp .webp
これで準備OK。
動作確認
ブラウザは何でもいいと思いますが、GoogleChromeの場合、検証メニュー(F12)を表示させて、【Network】タブを開いて、サイトにアクセスします。
すると、↓の画像のように【Type】にwebpと表示されればOKです。
WordPressのwebp対応の場合
【EWWW Image Optimizer】というプラグインを使うと非常に楽ちんです。
WebPの初期設定
既存の画像ファイルを一括で再変換する場合
という感じです。
対策2.画像ファイルのサイズの最適化
適切なサイズの画像
これもヤバイね。
この問題はWordPressでいうとアイキャッチ画像のサムネイルを記事一覧ページで表示する際、
元の画像サイズが600×400だとして、その画像をCSSで150×100に指定したとしても、読み込み速度は変わりません。(600×400のサイズ分の容量を読み込みします。)
なので、もともとの画像サイズを変更しないといけません。
↓のサイトでサイズ変更が可能です。
https://www.iloveimg.com/ja/resize-image/resize-png
対策3.CSS、JSの読み込み位置を修正
レンダリングを妨げるリソースの除外
これは結構でかい。もうどっちが一般的なのかはわからないけど、
↓の画像のように、<head>の中にJSファイルの指定は遅い。
</body>タグの直前に入れると、ページ読み込み速度の向上につながります。
(レンダリングやらなにやらの観点で)
cakephp3の場合
自分は、Cakephp3を使っていて、部品(Element)を共通化しており、JSの処理をページによって、入れたりしたり入れなかったりしています。
すべてのJSの読み込みやイベント処理を</body>タグの直前に入れるとすごいダサイなあと思ったので、良き方法がないか調査しました。
いい方法を見つけたのですが、WordPressのエディタでコードがうまくハイライトしなくて若干困っているので、今度紹介します(#^ω^)ピキピキ
対策4.画像遅延
いきなりすべての画像を読み込むのではなく、あるていどページをスクロールしてから画像を表示させる処理。
対策5.非同期処理(ajax)
ページ読み込み完了してから、データ取得処理(記事情報リストなど)をするように改善。
対策6.キャッシュ対応
CSS、JS、画像ファイルのキャッシュ対応。
1週間くらいまで保持するように設定。
.htacessなど
最終結果
81/100になりました。
まあいいでしょう!!
この記事を読んで、サイト高速化したいけど、もう少し詳しく教えてほしいという方は相談のります。
本当はもう少し詳しく書きたかったけど、最後にだれてしまいました( ^ω^)・・・