WordPressの高速表示と言っても、その施策は多岐に渡りますし、サーバー側の仕様に左右されることもあります。そのサーバーの仕様を引き出すために「.htaccess」という取り扱い注意のファイルをかしたマイズする必要もあり、これらはレンタルサーバー会社の電話サポートではなかなか対応してくれません。

そのため、技術サポートにメールでの問合せを行うのですが、細かいサポートを期待すると裏切られた気持ちになるのでご注意ください。そのため、ネットで調べて「.htaccess」の設定方法を学習して行くのですが、ここで設定するキャッシュ期間は、サイトの運営方針などにもよって異なるので、詳細を学ばずして「コピペ対応」してしまうと、以前の私のように痛い思いをしてしまいます。

そこで、今回は、一通りのWordPress高速化カスタマイズのベンチマークとしてのサイトが出来上がりましたので、その仕様をご紹介したいと思います。

WP高速化ベンチマークサイトの測定結果

ベンチマークサイトとしてカスタマイズを行ったサイトは、出版サーポートのサイトです。
出版サポート特設サイト

【Google PageSpeed Insightsでの測定結果】

WordPress高速化 ベンチマーク

公開時の測定では、モバイル:72、パソコン:87で、ユーザー エクスペリエンスは、97でした。

この時はまだ、TOPページ最下部に表示される「最新記事」が1記事でしたので画像の数も今よりは少ない状態でした。現在は、記事を5記事足して、サイト内ページ数は19ページとなっています。

(改善のために行った施策は「WP高速表示カスタマイズ施策」にて解説します。)

【GTmatrixでの測定結果】

hcm-gt-20160422

GTmatrixでの計測結果は、公開時は以下の通りでした。

  • PageSpeed Score:94
  • YSlow Score:87
  • Page Load Time:2.1s
  • Total Page Size:729KB
  • Requests:24

以上のような結果でした。

今回の測定値が

  • PageSpeed Score:95
  • YSlow Score:82
  • Page Load Time:2.9s
  • Total Page Size:816KB
  • Requests:33

コンテンツが増え、ページのデータ量は若干増えましたが、「PageSpeed Score」は改善されています。

【Pingdomでの測定結果】

前回から取り入れたPingdomの計測結果は以下の通りです。

hcm-pingdom20160422

公開時には、このPingdomでの計測は行っていませんので、改善、改悪は比較できませんが、Perf. grade93は、ベンチマークサイトとして充分な結果ではないでしょうか。

WP高速表示カスタマイズ施策

WordPress高速表示対策として、今回は、別サイトとそのコピーサイトで検証中のWP高速化レンタルサーバー比較の中から、もっとも測定値の高かったエックスサーバーを採用。PHPのバージョンは、7.0.3も利用可能ですが、エックスサーバーが推奨している5.3.3を利用しています。(松村工の公式ブログサイトは、同じくエックスサーバーで運営しており、PHP7.0.3を検証中です)

エックスサーバーだとワンクリックで利用できる「mod_pagespeed」を利用し、「.htaccess」のカスタマイズは行っていません。そのため、モバイル測定及びパソコン測定の双方に置いて【修正を考慮】において「ブラウザのキャッシュを活用する」の項目で4ファイルほど指摘されています。

【ユーザー エクスペリエンス】の指摘は、フッター領域のメニューに関して「タップ ターゲットのサイズを適切に調整する」と指摘を受けていたので、スタイルシートを調整し、「margin-bottom:10px」「padding:5px;」としました。

これは、Googleの評価要素には関係ありませんが、タップ領域が視覚的にも訪問者に分かり易いように若干、背景賞に修正を加えました。

Themeは、公式ディレクトリ内にある無料Theme Ariseを使い、子テーマを用いてカスタマイズを行っています。

カスタマイズ中にWordPress自体のバージョンアップがあり、また、絵文字に関するコードが【修正が必要】の「圧縮を有効にする」で指摘されていたので下記のコードを子テーマのfunction.phpに追記し削除しました。

// 絵文字コード除去
remove_action(‘wp_head’, ‘print_emoji_detection_script’, 7);
remove_action(‘admin_print_scripts’, ‘print_emoji_detection_script’);
remove_action(‘wp_print_styles’, ‘print_emoji_styles’ );
remove_action(‘admin_print_styles’, ‘print_emoji_styles’);

この他、公開前の測定で「画像を最適化する」の項目が指摘されていたので、TOPページに表示される「最新記事」のサムネイル画像の大きさをサイトの最大幅で測定し、修正しました。

WordPressでは、最新記事のサムネイルとして表示される画像は、多くのThemeで「アイキャッチ画像」として設定したものが利用されます。Themeによっては、再利用する箇所によってリサイズ画像を生成するThemeもありますが、多くは元画像を縮小表示させるため、データ量はそのままとなり、Google PageSpeed Insightsの測定では、画像サイズの最適化が必要なファイルとして指摘されます。

他のサイトで使っているThemeでは、このアイキャッチ画像に指定したイメージファイルをサムネイル画像として使う他に、ページTOPのアイキャッチ画像として使う他に、SNSに投稿した際のサムネイル画像として使用する場合があります。それぞれ、使用される画像の縦横比が異なる場合、キレイに表示される大きさを測定し、その範囲内に画像を納めるようにするのですが、これはちょっと手の込んだ作業になります。

特に、FacebookとGoogle+と、Twitterにリンクドインなど全てのサムネイルに対応する許容範囲の広い画像のデフォルトサイズなどを決めて、それをサイト内でも余白なく、そして無駄に大きくなく表示させるには、WP内部での処理が煩雑になってしまいます。そのため、私たちはシンプルな施策をとることにしました。

それは、主要SNSと呼べるTwitterとFacebookをSNS投稿用のデフォルトサイズとし、Google+もその大きさで投稿する。この時の最小サイズは幅470px、縦246pxです。

この他、WordPressのバージョンがヘッダー部分に記載される記述を削除する下記コードを子テーマのfunction.phpに追記しました。

// generatorを非表示にする
remove_action(‘wp_head’, ‘wp_generator’);

WordPress高速化を支援する無料プラグイン

WordPress高速化プラグインに関しては、「W3 total cache」「Wp super cache」「head cleaner」などを使い検証しましたが、コープレートサイトの仕様下では効果が確認できなかったため利用していません。また、別サイトにて「W3 total cache」を利用しているのですが、利用開始から30日が経過すると、課金を促すメッセージを通知させるため、サイトの表示画面にphpのエラー表示が出現してしまいます(キャプチャとり忘れでスミマセン)。そのため、課金を促すメッセージをプラグインのsettingページでキャンセルすれば直に戻りますが、ユーザビリティの観点から、またお客様のサイトにてこのような状態が放置されてはなりませんので、経過を観察し、今後の利用を検討したいと考えています。

この他、ソーシャルボタンを表示させるプラグインやFacebookやTwitterなどのタイムラインを表示させる機能などは、読み込み速度を過度に遅くさせるほか、それぞれのSNSの仕様変更などによりメンテナンスに手間がかかりますので、掲載していません。

高速化を維持する運営方針

WordPress高速化の検証報告を行う、今回の記事ではサイトのTOPページのみの検証にとどまってしまいますが、実際のサイトにアクセスされるシーンを考えれば、全てのページで高速化を実現していなくては、意味がありません。

特にもっとも再訪されるTOPページにおいてブラウザキャッシュを有効にしておくことで、ユーザビリティを向上させますので、この対策は必須だと考えています。

また、本記事のように大きな画像を使用する記事や、多くの画像を掲載するページ等に関しては、画像サイズを最適化することが重要です。

また、本記事最下部にも表示されている「関連記事」などに表示されるサムネイル画像の大きさなどにも配慮したサイト設計を行うか、その設計によってプログラムコードやプラグインを使いいたずらに読み込み速度を遅らせるようなら、必要箇所の数に応じて画像を準備することをお勧めします。

現在、今回の参考サイトとして取り上げた出版サービスのホームページと同じ仕様で本サイトは構築されていますが、サーバーはお名前.com共用サーバーを使っているため、同一仕様でもその計測結果、及びWP高速表示のパフォーマンスは異なります。本サイトも、今回のWordPress高速表示のベンチマークとして取り上げた成果を基準とし、パフォーマンスの向上に努め、改善経過などを本サイト内のブログ記事でご紹介して行きます。

サイト運営は、顧客に情報を提供し、自社を知ってもらうことだったり、他社と適切に比較して頂くための素材を提供することだと考えています。そのため、FacebookからWEBサイトへの流入を確保する施策を講じたとしても、WEBサイトからFacebookにアクセスを促すような施策やSNSタイムラインの表示は、WP高速化を妨げるだけで、何のメリットも生まないと考えています。

必要に応じてWEBサイト上での顧客コミュニケーションをはかる場合は、WPのコメントフォームを設置するか、どうしてもFacebookとの連携を試みる場合でしたら、Facebookのコメントプラグインを導入し、その負荷を軽減する高速化施策を講じる必要が出てきます。制作会社によっては、FBコメントプラグイン導入及びレイアウト等の調整費用とそれに伴う高速表示施策の両方で料金が加算されるケースも予測できますので、制作会社にご依頼の際は、ご確認ください。

私たちに制作をご依頼頂く際は、FBコメントプラグインの導入に費用加算はありません。しかし、ご希望されるThemeやデザインとの整合性がデフォルトの導入で適合しない場合のカスタマイズに関しては、料金を加算させて頂きます。また、これに伴い、各WEBサイトの表示速度計測ツールでの測定値が極度に悪化する場合、施策を加算すべき際には、他社様同様に費用を加算させて頂きます。

WordPress高速表示に関しては使用するThemeとプラグインの相性などによる影響もございますので、予めご希望を列挙頂いたほうが、後日追加でご要望を成されるよりもコストを抑えることが出来る上に、Theme変更のリスクも避けられますので、ご協力頂けると幸いです。

今すぐお電話を