サイト速度改善(ブログ記事)の後編
前編のつづきです。後編はプラグインなどで対応する視点ではなく、主にテーマやプラグイン(稀)にプログラム改修してサイトの速度改善を行う内容になります。※解説中にプラグインで対応できる内容も含まれています。
プログラム対応は費用も時間も掛かるのでエンジニアから見た素直な気持ちで書いて行きたいと思います。
プログラム対応
ブラウザキャッシュはサーバー側の設定でできる項目ですが、データ（クエリー）キャッシュや、本題の遅延ロードはWordPressで使用するテーマ上でプログラム（PHP/JavaScript/jQueryなど）で対応する必要があります。
テーマのプログラムコードで行う必要がある対応ですが、キャッシュの種類によってはプラグインで対応できます。
ただ、本当にサイト(特にトップページ)の表示速度を改善をするのであれば、使用するテーマに準じた(そった)プログラムでの対応が必要になります。
具体的にいえば、WordPressのテーマ上では色々なコンテンツを色々なデザインで表示させているので、データキャッシュ部分であるコンテンツデータ(記事など)を抽出するクエリー(Ｑｕｅｒｙ)部分や、外部データ(ＳＮＳカウンターなど)を取得して表示するような部分すべてにプログラム対応が必要になってきます。
サイトの速度改善は通信環境によるところやページデータのサイズに大きく左右されますが、ページデータを作成するサーバー側の処理で時間が掛かっている部分に対応することで少し効果があります。※ただ、数値的には効果が出ていることもありますが体感的には僅かに感じる程度です。
そのため費用や時間を掛けてまで対応するかは…この後の解説を読んだ上でご判断ください。
遅延ロード対応
サイトの速度を改善する中でもっとも重要なプログラム対応は遅延ロード対応です。遅延ロードと言ってもJavaScriptの遅延読込や画像の遅延ロードではありません。画像の遅延ロードはプラグインでも可能ですが、これから解説していく遅延ロードは別の遅延処理になります。
ただ、その前にJavaScriptの遅延読込や画像の遅延ロードについて解説しておきます。遅延ロードや遅延表示、遅延読み込みは同じ意味合いですが、自分は使いわけ(特に意味ないですが！)ています。
JavaScriptの遅延読み込み
遅延読み込みさせる必要があるのはGoogle系のサービスに関するAdSenseやGoogle AnalyticsnのJavaScriptです。サイトに組み込むプログラムコードは少量ですが、ブラウザに送られる(読み込まれる)JavaScriptのプログラムコードはものすごいサイズ(量)で、サイト自身のJavaScriptよりも多いケースがあります。
それらのJavaScriptコード(プログラム)を遅延読み込みすることなくトップページ上で行ってしまうとサイトの速度が大きく落ち込む結果になります。ここで大事なことはトップページに上記の二つのJavaScriptは不可欠ですが、ファーストビューにおいても直ぐに必要とされるプログラムコードではないと言うことです。
言い換えれば《遅延読み込み》しても差し支えないJavaScriptということなので、それぞれのサービスを利用していて、ユーザーの閲覧が多いトップページや投稿ページの速度改善を行うときは遅延読み込みさせることを強くおすすめします。
画像の遅延ロード
画像の遅延ロード(と表示)とはブラウザの画面領域内に存在する画像のみをロード(読み込みして表示)して、画面領域外に存在する画像はロードしないことでサイトのページ表示を高速化する技術のことです。※ブラウザキャッシュを併用すると爆速になります
初めて訪問するユーザーに対しての対応が主なる目的です。
通常、ブラウザはHTMLに含まれるimgタグの画像ファイルをすべて読み込みます。長いページのなどユーザーがほとんど閲覧しない最下部の画像でも読み込んでしまうということです。また、閲覧されないのに必ず画像を読み込むのはネットワーク的にも無駄になります。
遅延ロードは画面のスクロール位置に応じて「必要な分だけ画像を取得」するので効率的です。
遅延ロードさせないと…
サイトを利用するユーザーにとっても、サーバー側にとっても利点があることではないです。
雑学：PageSpeed Insights https://pagespeed.web.dev/
PageSpeed Insightsは、携帯電話（モバイル）、デスクトップ（ＰＣ）それぞれのページの表示速度やパフォーマンスに関するスコアリング 、改善方法を確認できるオンラインサイト(ツール)です。
Googleの検索順位は、Googleが200以上の指標で評価した総合力で決まります。何か一つの施策を行えば、すぐ上位表示されるというほど単純な話ではありません。
Googleによると検索順位を決める主要３大要素は「リンク」「コンテンツ」「RankBrain」です。※解説は割愛
＂Google’s Andrey Lipattsev reveals links, content and RankBrain are the top three ranking signals in Google’s search algorithm.＂
よってページの表示速度は、これら３大要素以外の１項目に過ぎないため、PageSpeed Insightsの点数が仮に１００点でも１位になるとは限らないことを頭の中(隅)においてください。
画像に関してそれ以外にも…
画像を遅延ロードするのも重要なことですが、容量の大きい画像ファイル（ＪＰＥＧ／ＰＮＧ／ＧＩＦ）のリサイズや圧縮も必要です。画像ファイルがＪＰＥＧ形式の場合「圧縮率を上げてファイルサイズを削減する」方法と、それ以外の画像形式では「画像の縦・横の大きさを小さくする」方法があります。
サイト速度の改善ではトップページでコンテンツ一覧を表示するときにできる限り小さい画像サイズのサムネイルを使うということも重要なポイントです。
ただ、WordPressにはメディア機能で画像をアップロードしたときにいくつかの画像サイズ(テーマによって異なる)の画像を自動で作成してくれます。また、画像の圧縮についてはプラグインで可能です。
とは言え、最適化するのであれば画像を遅延ロードできるLazyload系のJavaScriptライブラリを使用しているテーマに導入する(プログラム改修)といいかも知れません。明確な理由になりませんがカスタマイズ(導入)する際にテーマにそったカスタマイズが合わせてできるからです。ただ、プログラミングの知識が必要です。
まぁ、餅屋は餅屋におまかせってことですかね…
とは言え、プラグインで十分に対応が可能です。
gzip圧縮
モバイル端末でサイトの表示速度(体感的に)にもっとも影響するのが、ページのデータサイズに関係する「gzip圧縮」です。HTMLやCSSやJavaScriptなどのテキスト形式のファイル形式をウェブサーバー上で送信(配信)するときに該当ファイルを圧縮する技術です。
gzip圧縮の特性として同じ文字列が多いほど圧縮率が高まります。HTMLやCSSやJavaScriptは、空白、タグ、スタイルなど同じ文字列が多く含まれているため高い圧縮率を得られます。
ミニファイも合わせて
それと合わせてページデータを作成するときに余分な空白やタグ(HTMLタグやスタイル構造を見やすくするためインデント)を取り除いた(ミニファイ化)方がサイズを減らせます。ミニファイ化はプラグインで簡単にできます。
gzip圧縮されたページデータはブラウザ側で解凍して使用されるので特にユーザーが意識する必要はありませんが、この設定を有効にすることはサイトの速度改善には必須です。
※ただ、WordPressの場合はレンタルサーバーの簡易インストールなどで一緒に設定してくれる場合もあるので、どのような設定がされているかを確認してください。※サイトのルートディレクトリ(WordPressがインストールされている)にある.htaccessファイルに定義されています。
gzip圧縮してはいけないもの
画像やPDFファイルは既に圧縮が掛かっているため圧縮は必要ありません。既に圧縮されたものを再gzip圧縮するとファイルサイズが増えて逆効果になる場合もあるため、全てのコンポーネントをgzip圧縮するべきではありません。また、WoffなどのFontファイルも独自アルゴリズムにより既に圧縮されているので必要ありません。
※設定方法や設定内容などはググるとたくさんでてきます。さほど難しい対応ではありませんのでご自身で挑戦してみると良いかと思います。ただ、設定を間違えると(基本コピペ作業)とサイト自体が見れなくなったりするので、必ずバックアップはとっておきましょう。
やっと、本題です…
コンテンツの遅延ロード
今までコンテンツを表示するパーツ(記事一覧やウィジェットなど)に遅延ロードを使っているテーマを見たことがないのですが、コンテンツを遅延ロードすることはさほど難しい技術でもありません。簡単にいえばコンテンツを後(イベントなど)で読み込むだけで、ページの速度改善をする《一つのアイデア》です。
もっともサイトの速度改善する方法はページデータのサイズを減らすことです。ページデータはアクセスしたときにWordPressの各モジュールを実行して作成するため、画面領域外の(読めない場所にある)コンテンツのデータ(表示)も作っています。
それらのコンテンツはスクロール操作することで画面領域内に表示されるわけなので、あえて最初のページデータに画面領域外にあるコンテンツデータを作り送信(配信)する必要もないと言うことです。
記事一覧を無限スクロールと言う機能で表示させるテーマやプラグインがありますが、それもページデータを削減させる一つのアイデアです。
モバイル端末(回線)
テーマによっては端末の種類(モバイルかＰＣか)に応じて表示するコンテンツの量を変えられるものも存在します。モバイル端末用にウィジェットエリアが分けられているテーマです。表示するコンテンツを調整できると言うことは外出先などではの通信環境の良くないモバイル端末でもページデータを削減できます。
使用しているテーマにモバイル端末用のウィジェットがない場合でも簡単にプログラム対応が可能なのでカスタマイズするのもアリかと思います。また、ショートコードを追加することで＂パソコンなら表示＂をする指定ができるテーマもあるのでモバイル端末用にコンテンツ量を調整することをおすすめします。※無い場合でもショートコードを追加することで可能です。
注意すること…
遅延ロードで注意点があるとすれば、全てのコンテンツを遅延ロードさせても良い訳でもありません。コンテンツ表示のためのHTMLコード数が遅延ロード対応のプログラムコード数よりも小さい場合です。とはいえ、記事一覧などのコンテンツは色々な要素を含んでいるのでHTMLサイズがある程度あるので問題ないですが、ごく一部の表示部分(ウィジェットなど)にそのようなケースが考えられます。
不思議なこと…
何故か、市販されているテーマにコンテンツ(メインカラムの記事一覧やウィジェットなど)を遅延ロードして表示する機能が実装されていません。アフェリエイトや口コミ(レビュー)などのサイトは「表示速度が３秒遅いと４割が離脱する」と言われているので速度改善はSEOの観点からも大切なことです。
そのため、アフェリエイトによく使われている有名なテーマやその他の有償テーマなど開発力のある会社のブランドテーマに遅延ロードの機能が実装されていないのが本当に不思議です。※似た機能を実装しているテーマはいくつかあります。
個人的に一番有効な速度改善の方法だと自分は思うのですが…
と言うことで、今回、このサイトではないですがトップページのメインカラムの記事一覧やウィジェットなど、とあるテーマで作成したサイトで表示するコンテンツ全てを遅延ロードするように対応しました。
どんな仕様かと言うと…
スクロールする際に遅延対応済みのコンテンツが画面領域内(若干手前)に移動してきたときにクライアント側でAjax(非同期処理)でサーバー側に要求(リクエスト)を送り、受け取ったサーバーはそのコンテンツの表示データ(HTML)を作成して、クライアントに送って(配信する)送り、クライアントのブラウザ上にそのコンテンツを表示(更新)する仕組み(ロジック)になっています。
ただ、スクロール操作されて画面領域内に入る前にサーバーに＂コンテンツデータをください＂といっても直ぐに送信(配信)されるわけもないので表示するコンテンツの量によってタイムラグがでてしまい表示順番が上手く制御できないケースもあります。
実際にどんな技術が使われているかと言うと…
Ajax
Ajax(エージャックス)とは「Asynchronous」と「JavaScript」に「XML」を組み合わせて作られた造語です。個人によっては単純に「非同期通信」のことを指してAjaxと呼ぶ方もいます。
AjaxはWebページの作成に使われる技術ですが、このAjaxを使うことでWebページ全体を更新することなく「一部分だけの情報を更新する」ことが可能です。
本来、JavaScriptはクライアント側(ブラウザ上)で動くプログラムです。サイトのデータはサーバー側にあるため、サーバー側に更新したいデータを要求(リクエスト)して、サーバーからの応答(レスポンス)としてデータを受取り表示を更新するような仕組みです。
なぜ、Ajaxと言う技術が更新のために使われるかと言うと、非同期通信はリクエストしてレスポンスを待つ間に他の処理が実行できる利点があります。リクエスト中でもページ全体の処理がストップしないため、ユーザーが何も操作できずにレスポンスが返るまで待つということがなくなるためです。
サイトを訪問したときに回線速度が遅い場合やサイトのページサイズ大きいときにブラウザ画面が白っぽい状態が長く続くことはあります。それはページを表示するために必要データ(レスポンス)をブラウザが受信待ちしているためで、Ajaxを使ってコンテンツの表示部分をLoading中(見た目上)などにして、素早く受信待ちの状態を完了(※３)させることができます。
※３：そもそもコンテンツを表示する部分のHTMLコードが無い(ここが重要なポイント)ため素早く完了させることができます。また、サーバーのＣＰＵのリソースの負荷も軽減できます。
Ajaxの歴史は古い
Ajaxの技術そのものは古くから使用されているようですが検索エンジンや地図アプリに使用されたことで、ほかのWebページやサービスでも取り入れられるようになったらしいです。
※Ajaxの歴史は今まで使うことがなかったので調べた内容です。
そんな古くからある(レガシーな)技術を使って実装したと言うわけです。ただ、想定していたものの…
数値は絶大、体感は微妙…
元々のサイトに表示するコンテンツ量にもよりますが、トップページおいてのページサイズは約８０％程度軽減できていました。本来、作られるページデータを減らしているので当然と言えば当然なのですがサイトの速度計測サービス(上の方で紹介しているサイト)ではそれなりの結果がでていました。
※Ｅ判定がＢ判定に
体感的なことを言うとユーザーが使う回線の状況によりますが、デスクトップ（ＷｉＦｉ）は通信速度が高速なのであまり体感できる感じではありません。ただ、モバイル回線(256kbs:32kb/s)なら十分に体感できるレベルになっていました。
ただ、テーマの公式サイトにあるデモサイトを計測するとＢ判定でしたが、使っているレンタルサーバーの違いやコンテンツの表示量は３、４倍くらい違うので対応的には良いように思えます。
遅延ロードの問題点
コンテンツの遅延ロード対応はプログラムの対応次第では妥協しないと行けない仕様的な問題点もあります。コンテンツの遅延ロード対応は初めて訪れるユーザーに対して効果は高いです。ただ、問題になるのはページキャッシュに関わる仕様的な部分です。
コンテンツの遅延ロード対応は非同期処理で更新するコンテンツ部分をAjaxを使ってサーバーから送るためページキャッシュを導入しているとその部分はキャッシュされません。※使っている画像などは問題ありません。
そのため再訪問されたとき遅延ロード対応されていないサイトのページと比べると、ファーストビューを含めた初回転送のときページサイズを減らせていますが、遅延ロード対応したコンテンツ部分を毎回送信することになります。※コンテンツの遅延ロード対応のカスタマイズは一長一短あることを覚えておいてください。
そんなカスタマイズですが…
非常に手間が掛かるカスタマイズ
コンテンツの遅延ロードの対応は難しい技術ではないですがテーマの全体を解析した上でコンテンツ表示のモジュールすべてに対応する必要があります。このカスタマイズは時間も費用も掛かるため推奨しません。(笑
セキュリティ対策
最後に遅延ロード対応した際のセキュリティについて書いておきます。
コンテンツの遅延ロードがテーマに実装されていない理由としてセキュリティ的な問題があるのかも知れません。表示するためのHTMLコードをAjaxで作成／取得／更新するわけなので、それらの部分を使って悪用することも考えられます。現時点で知り得ているスキル(知識)でCSRF対策を入れているのですが…ハッカーに掛かれば別の機能からも含めて脆弱性をつかれて悪用されそうです。
個人での対応
アフェリエイトや口コミ／レビューサイト以外で、個人であればプラグイン上でできる対応でも十分改善があります。ただ、設定項目によっては上手く動作しないケースもあります。そんなときはプラグインの選定や設定など委託を考えても良いかと思います。
費用がない場合は「サイト速度 WordPress プラグイン」などでググってご自身で導入でも可能です。なお、プラグインはレンタルサーバーやテーマによっても相性があります。あえてプラグインの名称などを記載していません。ご了承ください。
また、導入の際にはインストールと設定だけするのではなく各ページにページ崩れ(CSS系)がないか、アクションなどが動作(JavaScript系)しているか十分に確かめてから本稼働してください。また、定期的なプラグインのアップデートも不可欠です。
遅延ロードとプラグインの相性
遅延ロード対応はブラウザ側でAjax(jQueryやJavaScript)で実行させるため、前編で解説した以上に速度改善のCSSやJavaScriptを連結する機能とページキャッシュを併用したときに、それぞれの相性などで思わぬ事象(不具合)が発生したりするケースが見られました。
原因の究明と対応は難しい
CSSとじJavaScriptを連結したファイルとページキャッシュの整合性が取れていないようだったので、ページキャッシュ側をクリアすることで事象自体は解決しました。
ただ、なぜそのような事象が発生したのかは(プログラムコード上)究明できませんでしたが、プラグインが別れているのでクリアするタイミングが同期してないため起きた事象だと思えました。ただ、＂いかんせん＂他者が作ったプラグインなので調査も大変なのでページキャッシュの作成タイミングを頻繁にするため期限(時間)を短くするように設定で対応しました。
あとがき
サイトの速度改善に必要な要素は「圧縮」「遅延」で色々な手法(技術)があります。ほとんどの対応はプラグインでブログなどで速度改善するための情報も多くあるのでググってください。
また、多くの画像を使っているサイトの場合の速度改善の一番はサイズや画像(大きさやザイズや形式)を見直すことも重要です。使うサムネイル画像の最適化をすることで少しでも転送量(サイズ)を削減しましょう。
遅延ロードは速度改善の特効薬(最善策)ではありません。
テーマ上の遅延ロード対応(カスタマイズ)は多くのファイル(モジュール)をカスタイズする必要があるためを開発元や販売元が行う方がベストですが、個人で実装を要望する場合は完全にオーダーメイド的なカスタマイズ案件になるなので他者(他社)のプロに依頼するときは色々と検討が必要です。
例えば、遅延ロード対応するにしてもテーマの解析、対応の検討、プログラムの修正、対応箇所の検証、また、リテイクを含む改善やサポート(対応箇所)などの工程があるので、それなりの費用(数万～数十万円)を考える必要があります。特に注意することはテーマ自体のバージョンアップができないことや公式のサポートが受けられないケースもあるので十分に検討してください。
サイトの表示速度を速くするためにはテーマ選びが重要なこととプラグインは必要最低限にすることだと思います。例え、サイトの速度改善をしてもオンラインサービス(サイトを評価してくれるサービス)上の数値が改善されても体感的に改善されないこともあります。
最後に
テーマに遅延ロード対応するのは開発元や販売元としては複雑な機能を実装すると製品として不具合の無いように品質を保つ必要がありテーマ上でコンテンツ自身を遅延ロードする対応はリスクが高いように思えます。自分も未来永劫にサポートできないので、今回のプログラム対応の提供は考えていません。
対応をお考えの際には慎重に計画して実行してください。
(まだ評価がありません)
読み込み中...