【PageSpeed insights】サイト速度改善のためにしたこと

css/コーディング

せっかくサイトを作ったのに、サイトスピードが激重くんだったら・・・

ということで、googleのPageSpeed Insightsの結果をもとにサイト速度改善に取り組んでみました。SEO対策としても、できる限りのことはしたいですよね。

結論からいうと画像問題が未解決なので、劇的には早くなってないです。

でも最初よりは明らかにましになりました!

画像の多いサイトはぜひやってみてください。

画像サイズの圧縮

適切なサイズの画像

というワーニングメッセージが表示されたら、まだ画像サイズを小さくできますよ、という意味です。

私はnpmで画像圧縮をすでにしていたので必要ないと思っていたのですが、まだまだ改善の余地があるようで・・・

ということでおなじみの

TinyPNG – Compress PNG images while preserving transparency
Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

にてさらに半分にサイズダウン。

なのに、まだ重いという表示が・・・

もう他のサイトでもこれ以上小さくできないって言われるんですが、どうすれば・・・

しかし、tinypngさんのおかげで確実に改善はしました。

slick のlazyLoadを利用

同じく画像系。トップに使っているスライダーの読み込みを改善。

スライダーの画像を「最初の1枚目以外」は遅延で読み込むというslickのオプションがあるみたいです。

[jQuery] カルーセルライブラリ slick.js の lazyLoad を理解する

slickを最初cssで非表示に(おすすめ!)

上記設定で読み込みを遅くしたらロード時に画像が縦に並ばなくなったのはいいんですが、alt属性だけが読み込まれて文字が縦に並んでしまい、なんかかっこ悪い。

そこで、

【slick】ロード時に一瞬縦並びになるのをCSSで解決する

こちらのサイトで紹介されている方法1、cssで解決するコードを使わせていただきました。

slickで付与されるクラスを利用するようです。

.slider{ opacity: 0; 
transition: opacity .3s linear; 
} 
.slider.slick-initialized{ 
opacity: 1; }

display:none;の方法もありましたが、それだと最初スライダー分高さが詰まってしまうので、opacityで表示領域分は確保。

上記コードで、めっちゃいい感じになりました!!

ありがとうございます!!

ウェブフォントにfont-display: swap;を追加

これは直接スピードに関係しないみたいですが、ウェブフォントを入れてる場合は読み込みも遅くなるので1行追加。

Webフォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる

日本語のWEBフォントの軽量化

これもフリーフォント関連。サブセット化というやつです。

以下のサイトさんがわかりやすい♪

日本語フリーフォントをwebフォント化する4ステップ

.htaccessで画像のキャッシュを設定

静的なアセットと効率的なキャッシュ ポリシーの配信

というワーニングが出たら、キャッシュの有効期間を設定しましょう。

ただコーディングしただけだとキャッシュは効いてないので、.htaccessファイルに設定を記述します(マイナーサーバーでは.htaccessファイル設置不可なのもある)。

記述内容はそのサイトに応じて内容が増減すると思うので、良さげなものをピックアッップしてください。

Chromeのデベロッパーツールでキャッシュの有効期限を調べる方法
Webサイトの高速化のために、キャッシュの有効期限を設定することが増えてきました。サーバーや.htaccessで設定を行いますが、設定できたかどうか、どのように確認していますか?今回は、Chromeのデベロッパーツールを使った、キャッシュの
PageSpeed の「静的なアセットと効率的なキャッシュ ポリシーの配信」対策で速度改善 | 株式会社CAMON.TOKYO

svgやフリーフォントのファイルも圧縮できる記述は以下のサイトに載っています。

どうしても「静的なアセットと効率的なキャッシュポリシーの配信」の警告が出る
そうなんです。今どうがんばっても「静的なアセットと効率的なキャッシュポリシーの配信」の警告が出て困っています。いくらキャッシュ時間を設定しても、「キャッシュの TTL」がNoneに・・・。これはなぜな...

gzip圧縮

えーっとこれは・・・まだやってません。

近日中に挑戦します。htaccessファイルを触るのはこわいけど、頑張ろう。

「gzip圧縮」でWebサイトを高速化しよう!【mod_rewrite編】

.htaccessファイルでgzip圧縮させてサイト表示速度を向上させる方法

まとめ

他にも色々あるんだと思いますが、とりあえずgoogleさんに言われたことをメインに着手してみました。

慣れてしまえば面倒なことではないので、デフォルトで取り入れるようにしたい。

 

タイトルとURLをコピーしました