速さが足りない!! ホームページの速度を上げて閲覧を快適にするWordPress構築方法

当社のホームページはWordpressというCMSをカスタマイズして制作しています。
Wordpressといえば、重いことでわりと有名ですが、今回は軽量化プラグインは一切使用しません。

まず、施策前のWebkidの速度を計りましょう。
速度を測るにはGoogleの「PageSpeed Insights」を使います。

使い方は簡単、URLを入力して分析ボタンを押すだけ。
ブラウザの応答を少し待てば、PC版のスコアとモバイル版のスコアが表示されます。

ちなみにWebkidのホームページは・・・

あれ、そんなに遅くないじゃん。
ということで人事に報告しましたが、

お前に足りないものは、それは！
情熱・思想・理念・頭脳・気品・優雅さ・勤勉さ！
そしてなによりもォォォオオオオッ！！
速さが足りない！！

と、スクライド風に突っ返されたのでサイト改修をはじめました。

まず、はじめにGoogleMapの読み込みを遅延させます。
ページの読み込みと同時にGoogleMapAPIから取得し、描画させていたのを指定位置にスクロールが到達した段階で描画を行います。

結果的にオフスクリーンであるGoogleMapを非表示にすることでページ速度の遅延を解消させます。
当社の場合は「ScrollMagic」というjQueryに依存しないプラグインを導入しているので、スクロールに連動してGoogleMapを表示するよう置き換えています。

ソースコードに関しては、ここら辺を読むと幸せになります。

画像を遅延読み込みさせることで有名なLazyLoadを使います。
jQueryを使用したくないので、今回はバニラで動く2系になりますね。
https://appelsiini.net/projects/lazyload/

ちなみにIE11では動かないようですので、pollyfillを使います。
pollyfillは読み込ませるだけでいいようなので、その旨を記載します。

<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-beta.2/lazyload.js"></script>

あとは、スクリプトを記述してHTMLのdata属性を記述すれば完了です。

<script>
 const myLazy = new LazyLoad({
 　elements_selector: ".elem"
 });
</script>

HTMLは1系と異なるので注意してください。

<img class="elem" data-src="**.jpg" alt="***">

と、ここで問題が発生。
ページ速度は確かに早くなったが、スマホで実機確認した際にスクロール速度が早すぎると遅延読み込みが遅延しすぎて、逆に不自然だろという感じに。

人事部にユーザビリティーがーとか言われるのも面倒なので、今回はLazyLoadを見送りました。
ちなみにページ速度はモバイルで+8スコアくらい(当社の場合)でした。

さて続いては定番の画像圧縮とリサイズです。
画像ファイルはcssやjavascriptなどと比較してもデータサイズが大きいので、画像を最適に圧縮・リサイズすればその分、読み込み速度はあがるというものです。

wordpressのプラグインを用いれば一瞬で行えますが、
有名どころのプラグインばかりなので、少なからずセキュリティリスクだったり、アップデート時の整合性だったりが気になります。
そのため、日常的に圧縮する癖をつけアップロードした画像が既に最適化されているのが理想ですね。

そんなときに役立つサービスがtinypngというサービスです。
画像を一括して圧縮してくれるので便利です。
一応、jpgも圧縮してくれるのですが、そこまで圧縮率は高くないためPhotoshopなどの「Web用に書き出し」の画質「60」くらいでもいいと思います。

リサイズの注意点

レスポンシブデザインを行った場合、通常PCで利用している画像をモバイルで使用することになります。
pictureタグを用いれば、独立して設定することもできるのですが、IEへの対応のためPolyfillを導入したり、ブレイクポイントが多いとメンテナンスが面倒だったりします。
そもそもIEに対応しない前提であれば、もっと楽な方法がいっぱいあるのにIE大好きな日本なので、残念ながら対応せざるを得ないです。

つまるところIEが全て悪い

IEの悪口はそこまでにして、webpをはじめとした諸々の技術が普及しつつあるので、
そろそろWebkidのwebpに乗り換えようと思っています。

とうことで、結果的にGoogleMap、画像圧縮しか対応していないものの、
ページ速度を測ったら以下の結果になりました。

おぉ、GoogleMapと画像の表示を改善するだけでこんなに上がるのか！
人事に報告したところ、不満げながらも納得してくれました。
※これで遅いと言われたら、LazyLoad対応するしかなかったです。

せっかくなので千葉県の競合他社さんと比較してみました。

お、おお・・・。
ちょっと圧倒的なスコアになってきましたね。

ちなみに「千葉　圧倒的」という需要のなさそうなワードで検索すると、当社が一位です。

今回はホームページのページ速度についてブログにしてみましたがいかがだったでしょうか。
ページ速度は遅いより、早い方がいいのは当たり前ですが、いざ施策をするとなると結構手間がかかってきます。
チリも積もれば山となるという感じで、少しずつページ速度をあげていけるよう日々メンテナンスが大事ですね。

それでは、みなさま良いお年を。
フロントエンドのたくとでした。