197こんばんわ!こふそ(@koheta0325)です!つい先月、サイトの高速化対応したので、その際の備忘録として紹介します。Insightsをチェックしてみました。Insightsとは?→ホームページ・ブログの読み込み速度のチェックサービスです(無料)6/100はヤバイと思った。(モバイル)↓の画像は、↑の時とは違うんだけど、だいたいこんな感じだった。今の環境レンタルサーバーはMixhostPHPのバージョンは7.2.24フレームワークはCakephp3とりあえずサイト構成は割と適当に考えていました。圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。わからんけど、調査したところ、jpgやpngをwebpに変換して表示すれば高速化につながるらしい。自分のサイトの場合、解像度にはあまりこだわっていないけど、目に見えるほど解像度は落ちたようには見えませんでした。↓のサイトでpngやjpgの画像をwebpへ簡単に変換してくれます。https://lab.syncer.jp/Tool/Webp-Converter/こんな感じで、変換してできたファイルは、【元の画像名+.webp】という感じにして同じディレクトリに置いておきます。ちなみにwebpファイルはブラウザや端末によって未対応であることもあるようです。・非対応ブラウザの場合は元のjpg,png画像の表示という感じで切り替えが簡単にできます。その場合は次の【.htaccess】ファイルに追記します。.htaccessにwebpファイル置き換えの対応.htaccessファイルに以下の記述を追記します。.webpこれで準備OK。動作確認ブラウザは何でもいいと思いますが、GoogleChromeの場合、検証メニュー(F12)を表示させて、【Network】タブを開いて、サイトにアクセスします。すると、↓の画像のように【Type】にwebpと表示されればOKです。Optimizer】というプラグインを使うと非常に楽ちんです。既存の画像ファイルを一括で再変換する場合という感じです。適切なサイズの画像これもヤバイね。元の画像サイズが600×400だとして、その画像をCSSで150×100に指定したとしても、読み込み速度は変わりません。(600×400のサイズ分の容量を読み込みします。)なので、もともとの画像サイズを変更しないといけません。↓のサイトでサイズ変更が可能です。https://www.iloveimg.com/ja/resize-image/resize-png対策3.CSS、JSの読み込み位置を修正レンダリングを妨げるリソースの除外これは結構でかい。↓の画像のように、<head>の中にJSファイルの指定は遅い。</body>タグの直前に入れると、ページ読み込み速度の向上につながります。自分は、Cakephp3を使っていて、部品(Element)を共通化しており、JSの処理をページによって、入れたりしたり入れなかったりしています。すべてのJSの読み込みやイベント処理を</body>タグの直前に入れるとすごいダサイなあと思ったので、良き方法がないか調査しました。いい方法を見つけたのですが、WordPressのエディタでコードがうまくハイライトしなくて若干困っているので、今度紹介します(#^ω^)ピキピキ対策4.画像遅延いきなりすべての画像を読み込むのではなく、あるていどページをスクロールしてから画像を表示させる処理。jquery.lazyloadなどを使うといいよ!対策5.非同期処理(ajax)ページ読み込み完了してから、データ取得処理(記事情報リストなど)をするように改善。対策6.キャッシュ対応CSS、JS、画像ファイルのキャッシュ対応。1週間くらいまで保持するように設定。.htacessなど最終結果81/100になりました。いいでしょう!!この記事を読んで、サイト高速化したいけど、もう少し詳しく教えてほしいという方は相談のります。ギャンブル川崎にて石焼き芋屋さんを始めました。