せっかくサイトを作ったのに、サイトスピードが激重くんだったら・・・
ということで、googleのPageSpeed Insightsの結果をもとにサイト速度改善に取り組んでみました。SEO対策としても、できる限りのことはしたいですよね。
結論からいうと画像問題が未解決なので、劇的には早くなってないです。
でも最初よりは明らかにましになりました！
画像の多いサイトはぜひやってみてください。
画像サイズの圧縮
適切なサイズの画像
というワーニングメッセージが表示されたら、まだ画像サイズを小さくできますよ、という意味です。
私はnpmで画像圧縮をすでにしていたので必要ないと思っていたのですが、まだまだ改善の余地があるようで・・・
ということでおなじみの
にてさらに半分にサイズダウン。
なのに、まだ重いという表示が・・・
もう他のサイトでもこれ以上小さくできないって言われるんですが、どうすれば・・・
しかし、tinypngさんのおかげで確実に改善はしました。
slick のlazyLoadを利用
同じく画像系。トップに使っているスライダーの読み込みを改善。
スライダーの画像を「最初の１枚目以外」は遅延で読み込むというslickのオプションがあるみたいです。
[jQuery] カルーセルライブラリ slick.js の lazyLoad を理解する
slickを最初cssで非表示に(おすすめ！)
上記設定で読み込みを遅くしたらロード時に画像が縦に並ばなくなったのはいいんですが、alt属性だけが読み込まれて文字が縦に並んでしまい、なんかかっこ悪い。
そこで、
【slick】ロード時に一瞬縦並びになるのをCSSで解決する
こちらのサイトで紹介されている方法１、cssで解決するコードを使わせていただきました。
slickで付与されるクラスを利用するようです。
.slider{ opacity: 0; transition: opacity .3s linear; } .slider.slick-initialized{ opacity: 1; }
display:none;の方法もありましたが、それだと最初スライダー分高さが詰まってしまうので、opacityで表示領域分は確保。
上記コードで、めっちゃいい感じになりました！！
ありがとうございます！！
ウェブフォントにfont-display: swap;を追加
これは直接スピードに関係しないみたいですが、ウェブフォントを入れてる場合は読み込みも遅くなるので１行追加。
Webフォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる
日本語のWEBフォントの軽量化
これもフリーフォント関連。サブセット化というやつです。
以下のサイトさんがわかりやすい♪
.htaccessで画像のキャッシュを設定
静的なアセットと効率的なキャッシュ ポリシーの配信
というワーニングが出たら、キャッシュの有効期間を設定しましょう。
ただコーディングしただけだとキャッシュは効いてないので、.htaccessファイルに設定を記述します(マイナーサーバーでは.htaccessファイル設置不可なのもある)。
記述内容はそのサイトに応じて内容が増減すると思うので、良さげなものをピックアッップしてください。
svgやフリーフォントのファイルも圧縮できる記述は以下のサイトに載っています。
gzip圧縮
えーっとこれは・・・まだやってません。
近日中に挑戦します。htaccessファイルを触るのはこわいけど、頑張ろう。
「gzip圧縮」でWebサイトを高速化しよう！【mod_rewrite編】
.htaccessファイルでgzip圧縮させてサイト表示速度を向上させる方法
まとめ
他にも色々あるんだと思いますが、とりあえずgoogleさんに言われたことをメインに着手してみました。
慣れてしまえば面倒なことではないので、デフォルトで取り入れるようにしたい。
