はいどうもマッスルハンターです。
とにかくサイトの表示は速い方が良い。そう信じて疑わないけど、何をすればいいのかわからない。
そんなあなたは是非こちらを利用しましょう。
こちらに高速化したいサイトのURLを送信すれば分析してアドバイスをくれます。
1回やれば言われるまでもなく次からできる事もありますのでまずは見てみると良いでしょう。
私の場合はただ作っただけで全く気にしてなかったゴミのようなページがあったんでそれで試して下記を改善しました。
1.レンダリングを妨げるリソースの除外
この「画面の最初の描画のために必要な情報に絞る」というのがとても重要なようです。
javascriptやCSSの読み込みを非同期で行ったり、最初の描画に必要なCSSをインラインで設定したりしろとのこと。
私の場合はhead内で読み込んでたcssがこれに該当してたので「rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'"」を追加したところ改善しました。
javascriptの場合はasyncやdefer属性で解決できます。
参考
2.適切なサイズの画像
これはフリー素材を拾ってきたままあげてて、無駄にでかい解像度だったので下記のフォーマットと合わせて修正しました。
3.効率的な画像フォーマット
最近はjpegにも種類があるようでして、JPEG2000やJPEGXRなんていう次世代フォーマットがあるようです。jpegではありませんが、同じくgoogleさんの提唱する？webpも助言に含まれていたので、既にインストール済みだったGIMPでWEBPに変換しました。
ただ、この画像フォーマットについてはブラウザの対応状況の問題もあるかのような雰囲気も無きにしも非ずです。
その中で下記を見るとwebpはおおむね大丈夫そうなのかと思いました。
対象とするユーザーによって考える必要がありそうです。
あまり中身のないページだったため以上を改善しただけでモバイル90、PC95までスコアがあがりました。
めでたしめでたし。
