S社様より、サイトパフォーマンスの改善についてご相談がありました。
見た目のパフォーマンスは悪くないんだけど。。。Googleが黄色信号出すんだよね。。。
これは、Googleが提供するPageSpeed Insightsというツールで各WEBページのパフォーマンスをチェックできるツールでのことです。
簡単に言えば、この100点満点のチェックツールで90点以上が青信号（合格ライン）50~89が黄色信号（ちょっと改善した方がいいよという注意）それ以下~49が赤信号（これはダメですという評価）になります。
今回のお客様の相談は、もともとほとんどすべてのページが青信号だったのに、ここ最近ほとんどのページが黄色信号になって、検索結果に影響を及ぼしてきたということで相談がありました。
WordPress
そのお客様のサイトはWordPressと言われるCMSを導入し展開しているサイトでした。
WordPressは、管理が非常に容易ということ、デザインの統一感を維持できることなどから人気のCMSツールで企業サイトの場合かなりの率でWordPressで構築しているケースがあります。
そして、WordPressのサイトは頑張って記事を増やせば増やすほどパフォーマンスは低下していきますし、様々なプラグインを入れるたびにパフォーマンスを犠牲にするところがあります。
パフォーマンスチューニングで100点を目指そう
WordPressのサイトは作って終わりではありません。
SEO的なチューニングを施す方は多いですが、それだけでも足りません。
Googleが快適に閲覧できるサイトと認めてくれるだけサイトのパフォーマンスの向上をしてこそ初めてGoogleで上位表示を目指せます。
今回はそのお客様のみならず、当社で管理させていただいているいくつかの企業サイトでも100点を取るだけのパフォーマンス向上施策を行えました。
WordPressサイトのパフォーマンスが落ちるワケ
WordPressのサイトのパフォーマンスが次第に落ちていくのには訳があります。
Javascript
パフォーマンス低下の最大の理由の一つがこのJavascriptです。
WordPress自体にも標準でjqueryをロードするように作られていますし、各プラグインごとに様々なJavascriptのライブラリをロードします。
仮にプラグインを10個入れていれば使う、使わないにかかわらず10個のJavascriptをロードすると思っても過言ではない状態です。
そして、先述したように使う使わないにかかわらずロードするので、使っていないJavascriptをロードしてしまいます。
それを認識したらその時点でマイナス評価される仕組みです。
また、Javascriptで何をしているかにもよりますが、基本的にはHTMLは文章を上から下に読み込みますから、丈夫でJavascriptをロードして実行文がかかれていたら、ロードして実行してからその下の行のHTMLを読み込むことになりますから、HTML全体としてはロード時間が伸びることにつながります。
それらをGoogleは徹底的に嫌うようになりました。
特にここ最近、21年の夏頃からはその傾向が顕著になった気がしています。
解決策
Javascriptの読み込みをHTML文を読み込んでから、いわゆる遅延読み込みするように設定します。
また、各ページで使っていないJavascriptは読み込まないように、もっと言えば使わないスクリプトはそもそも削除してしまうようにすることでロード時間の削減が可能になります。
いくつかそのようなことを実現できるプラグインがありますので今回はプラグインを利用して極限まで描画に必要のないJavascriptの遅延読み込みと不要な構文の削除を徹底しました。
CSS
JavascriptほどではないにしてもCSSもどんどん肥大化します。
プラグインによってはプラグイン用のCSSがあり、それをロードしようとします。
使っていなくともロードするわけですからその分肥大化します。
また、Javascriptと同様で、上から順にロードして適応しようとしますから、レイアウトデザインのCSSは最初に必要かもしれませんが中の細かいスタイルについては遅延ロードでも十分というものも多いのです。
それらを遅延するか先読みさせるか設定することで、サイトパフォーマンスは向上します。
解決策
こちらもJavascript同様、プラグインで制御可能なものがいくつかありますのでそれらを導入することで制御しました。
画像
これは結構見落とされがちなのですが、画像によってパフォーマンス低下を引き起こしていることもかなり多いのです。
まず一つ目には画像のサイズです。
デジカメの撮影データをそのままアップしていて、長辺が5000~10000ピクセルもあるような大きな写真をそのまま入れている人なども結構います。
Webサイトを作る際には横2000ピクセル程度のモニタで見たときに横スクロールが出ない程度の幅で作るのが一般的ですから、それを逆算しれば、写真画像も横2000ピクセル以上あっても縮小するだけのことなので大きな画像は不要なのです。
つぎに、画像のファイル形式です。
デジカメでの撮影したデータはコンデジならほとんどの場合JPG画像になります。
今まではJPG画像のままでもよかったのですが、ちょっと前まではPNG画像に変換することが推奨され、ここ最近はWEB特化型画像形式のWebpという形式にすることを推奨されるようになってきました。
パフォーマンスチェックでもjpg画像があると注意（減点される）ようになってきましたのでたくさん写真画像を入れているページほど点数が悪くなります。
解決策
これらもプラグインで解決できます。
まずはリサイズ系のプラグイン。長辺を指定したピクセルサイズまで縮小してくれるプラグインがたくさんあります。
また、大きなサイズの画像をアップロードしても指定したサイズに自動でリサイズしてくれるプラグインなどもありますから、ライターがサイズを気にしなくてもよくなるプラグインを入れることで今までと同じ感じで操作してもらっても最適化できるようにすることが可能です。
つぎにWebpについてもプラグインで対応、Webp画像を書きだしてくれるプラグインもありますのでこれを採用。
ただし、これについてはサーバー側で画像書き出しエンジンが実装されていないと使えないケースもありますのでサーバー管理者に確認されるといいでしょう。
キャッシュ
そして最後のとどめと言いますか、パフォーマンスアップに必要なツールの一つがキャッシュです。
キャッシュとは一時的に現在の表示されているデータを保存して次に開いたときに通信をせずに一時ファイルから読み込むような、そんな一時的な保存ファイルです。
あまり変化しないようなページ（会社概要のページとか）では最適なのですがブログのような日々更新されているようなページには向いてないという声もよく聞きます。
解決策1サーバーキャッシュ
まずはサーバー側で設定することでサーバーでキャッシュを持つ仕組みです。
これはWEBサーバーの設定で実現できることが多いものです。
当社はサーバー保守管理業務を行っていますし、お客様に提供するサーバーについて保守を承っているケースが多いので、サーバーキャッシュを持つように設定が可能です。
なので、設定することでまずはサーバー側で必要なキャッシュを持つようにします。
解決策2ブラウザキャッシュ
これはプラグインでも可能ですし、サーバー側に設定を入れることでも実現可能です。
閲覧に来たか他のPCやスマホをに一時的にキャッシュファイルを持たせるように作ることができます。
このキャッシュデータを他社と共有するわけではなく、自分が再度アクセスしたときに内部に保存してあったキャッシュデータを利用して通信量を減らすということができる手法です。
解決策3システムキャッシュ
これは、WordPressというシステム自身で設定し作り上げるキャッシュです。
アクセスのあったページの出力内容をファイルに落とし込んで再度そのページにアクセスがあったらDBに接続せずにこの出力ファイルを呼び出してサーバー負荷を低減する仕組みです。
DBへのアクセスが減る分通信速度が上がるという解釈も可能ですね。
まとめ
今回紹介した改善策はじつは、【すべてやれて初めて合格レベル】になります。
これだけの改善を行って、PC版デザインで100点をとれたとしてもモバイル版の方は94点までだったりということも多々あります。
パフォーマンス改善には終わりはありません。
それを踏まえて、一度ご自分のサイトのパフォーマンスをチェックして見られてはいかがでしょうか?
