この記事はWanoグループアドベントカレンダー2020の21日目の記事となります。
Wano株式会社デザイナーのひかるです。
今年もアドベントカレンダー当番がやってきました🎅ブリしゃぶ食べたい
はじめに
弊社で作ったWordPressサイト(某ファッションメディアと某モデル事務所のコーポレート)のページ高速化施策で実装したことを備忘録がてら残しておきます。
そもそもページが遅くなる理由は？
読み込み速度が遅い理由として、
- 画像が多い
- 動画が多い
- (バナー等の)広告が多い
- サイト内の画像の容量が重い(圧縮されていない)
- ソースが最適化されていない
etc...
などが一般的に挙げられます。
現状のスコアを確かめてみる
Googleが提供するPageSpeed Insightsでページ速度のスコアをチェックします。
| サイト | 対象ページ | モバイル | デスクトップ |
|---|---|---|---|
| 某ファッションメディア | TOP | 24 | 75 |
| 記事ページ | 22 | 64 | |
| 某モデル事務所コーポレート | TOP | 57 | 84 |
| 記事ページ | 25 | 84 |
画像コンテンツが多いせいか全体的に低めです。。
具体的に実装した施策
- 画像の圧縮・軽量化
- 画像の遅延ロード
- コードの圧縮
- その他
- Googleアドセンスの自動広告を外す
- 余計なファイルやCSSを削除
- JSの読み込み位置を変更
画像の圧縮・軽量化
EWWW Image Optimizer
「EWWW Image Optimizer」は、__画像を劣化させることなく、アップ時に自動で画像容量を圧縮してくれるプラグイン__です。
圧縮率はそこまで高くはないのですが、既にアップしてある画像も軽量化してくれるのでとても便利。
TinyPNGで画像を手動で圧縮
「TinyPNG」は、__PNG画像を劣化させずに容量を小さくしてくれる無料のオンラインサービス__です。
記事作成時に圧縮してから画像を上げてもらうのがベストですが、既に上がっていてEWWW Image Optimizerでも圧縮率が悪かった画像に関しては、手動でTinyPNGにかけました。
画像の遅延ロード
lazysizes.js
画像はimgタグでなくbackground-imageで指定していたので、
- 背景画像に対しても遅延読み込みができる
- jQueryなどに依存しない
- なるべく軽量なもの
この条件を満たしていたのがlazysizes.jsでした。Githubからダウンロードできます。
__「JSファイルの読み込み」と「クラス追加」だけで画像もiframeも遅延読み込み__ができます。詳しい実装方法は、こちらの記事を参考にさせて頂きました。
コードの圧縮
Autoptimize
「Autoptimize」は、__HTMLやCSS、JSなどのソースを軽量化・圧縮して最適化してくれるプラグイン__です。
Autoptimizeで画像の遅延設定もできます。今回は既にlazysizes.jsで実装済みだったのでこちらの設定はスルーしましたが、EWWW Image Optimizerとの組み合わせだけでも効果は出る気がします。
その他
・Googleアドセンスの自動広告を外す
__自動広告はスコアにかなり影響する__模様。。
広告を表示していて画像圧縮や遅延ロードでもスコアが改善しない場合は、疑ってみると良いかもしれません。とはいえ収益に関する部分なので、アドセンス側の設定を見直し中。。
・余計なファイルやCSSを削除
使っていないGoogle fontが読み込まれていたので、削除しました。
・JSの読み込み位置を変更
<head>〜</head>内に書いてあったJSファイルは</body>の直前に移動しました。
ページをほぼ読み込んだ後にJSファイルを読み込むと表示速度は早くなります。
当たり前ですが、移動したことによって動かなくなるコードもあるので(jQueryとか)、その点は注意が必要です。
結果
| サイト | 対象ページ | モバイル | デスクトップ |
|---|---|---|---|
| 某ファッションメディア | TOP | 24 -> 69 | 75 -> 89 |
| 記事ページ | 22 -> 51 | 64 -> 91 | |
| 某モデル事務所コーポレート | TOP | 57 -> 84 | 84 -> 95 |
| 記事ページ | 25 -> 54 | 84 -> 94 |
スクショとるの忘れた
まとめ
上記の施策でまずまずの速度改善がみられました。
ひとつ試して改善しなくても他の実装をすると大きくスコアが上がったりもするので、いくつかを組み合わせていくと良さそうです。
逆にプラグインの相性でスコアが下がってしまうこともあるので、そこは試行錯誤でw
他にもこんな方法あるよーとかおすすめのプラグイン情報があれば是非教えてください。
最後に
Wanoは積極的にデザイナー採用を行なっています。
お好きな入り口からお気軽にお声がけください。
Wano Recruitページ https://group.wano.co.jp/recruit/
Wantedly https://www.wantedly.com/companies/wano/projects
CINRA.JOB https://job.cinra.net/company/wano/