ブログ 技術

ライトハウスでワードプレス(AFFINGER)を徹底的に高速化させる

更新日:

speed meter

見出し

アフィンガー(AFFINGER)のワードプレステーマを買ったけど遅い?

AFFINGERのテーマを購入して、ウェブサイトを移行したけれども思いの外重いと感じたことはありませんか?

AFFINGERは日本語のワードプレスのテーマでは超有名なテーマ。大きな期待値で購入する人が多いと思います。私も今まで様々なワードプレスのテーマを使ってきましたが、AFFINGERの評判にとても期待をしておりました。

ただ、今回AFFINGERに移行してみて、自分が思っていたほどページの読み込みが早くないことに気づきました。

そんなタイミングで、「WordPress でも大丈夫!実例で見るウェブパフォーマンス改善」の記事がバズってたのもあり、この施策に通りにやってみました。

速度はとにかく重要

サイトの速さはとても重要です。下記の通り、表示速度が少なくなると、PVや顧客満足度が減少するとの研究結果があるそうです。

米のリサーチ会社Aberdeen Groupによると、表示速度が1秒遅くなることで、以下の結果が得られたことを発表している。

  • PVが11%減少
  • CVは7%減少
  • 顧客満足度は16%減少

引用:サイト高速化でコンバージョンは上がる!高速化したサイトの実証実験結果公開!より

皆さんの中にもサイトのスピードが遅いためにサイトのアクセスを辞めた人もいるのではないでしょうか。

ここではとにかくスピードに拘って対応方法をご紹介します。

想定読者

この記事では下記の方を想定した記事になっています。

  1. ワードプレスの高速化をしたい人
  2. AFFINGERをとにかく高速化させてユーザビリティなども総合的にあげたい人
  3. Webサービス全般の品質改善をしたいと考えている人

 

前提条件

下記の前提条件を満たしていれば、すぐにでも改善することができます。

  1. ワードプレスサイトもしくはウェブサイトを既に持っている人
  2. クローム(Chrome)ブラウザをインストールしてあること
  3. パソコンで作業ができること

 

まずは実際に行った結果を貼ってみる

ライトハウス(Lighthouse)で大幅改善

Lighthouse Before After Report

SEOはテーマのおかげで元々スコアが良かったが、パフォーマンスやベストプラクティスはちょっとお粗末な結果に。それをしっかり対応するとスコアはしっかりと上がります。

とにかくSEOとアクセシビリティ(ユーザーの視認性や使いやすさなど)を除いてかなりまずい結果に。特にパフォーマンスはページの読み込みスピードに関係していて、とにかく遅い。

自分の体感速度的にも相当遅く感じていたので、できるところを一つ一つ潰していった。

そして右側は今回行った改善後の結果。SEOは変わらなかったが、SEO以外全てのスコアが上昇し、PWA(プログレッシブ・ウェブ・アプリ)も有効化できた。

 

ページスピードインサイト(PageSpeed Insights)のスコアも上昇

こちらは結果のみ貼ります。見事にグリーン!

PageSpeed Insights Mobile & PC

基本的にはこのPageSpeed InsightsもLighthouseので分析されているらしいので、Lighthouseの対応をすると必然的にPageSpeed Insightsのスコアも上昇します。

WebPageTestのスコアもほぼAのスコア

こちらはGoogleとは別のサイト「WEBPAGETEST」のスピードテスト。こちらもCacheとCDNをのぞき「A」となりました。

 

準備編:ライトハウスでレポートを作成し、現時点の状況を知る

ここではまず、レポートの作成の仕方を解説します。

ステップ1:Lighthouseプラグインをクロームにインストールしよう

まずはChromeブラウザにLighthouseプラグインをインストールしましょう。

Chrome Lighthouse Pluginをインストール

ステップ2:自分のサイトでLighthouseアイコンをクリック

インストールが終わるとLighthouseのアイコンがタブに追加されます。

ご自身のワードプレスのサイトにを表示をして、そのアイコンをクリック。

「Generate report」のボタンを押しましょう。

ステップ3:レポートが出てきたら、そのレポートの内容を確認

レポートでは主に5つの観点からスコアが表示されます。

Lighthouse Before After Report

  1. パフォーマンス(サイトのスピード)
  2. アクセシビリティ(サイトを誰でも使えるかどうか)
  3. ベストプラクティス(ウェブ業界の良い方法で作られているか)
  4. SEO(検索に最適化されているか)
  5. PWA(プログレッシブ・ウェブ・アプリをサポートしているか)

当然高いスコアの方が良いとされていますので、高得点を目指しましょう。

また、さらにレポートをスクロールしていくと、それぞれの問題箇所の指摘、そしてどういった方法で解決できるのかを提示してくれます。

 

パフォーマンス:ライトハウスを使って徹底的にワードプレスサイトを高速化しよう

では実際に高速化するための方法をここで紹介します。

ここでは主に下記の観点から高速化していきます。

  • サーバーの反応を高速化
  • プラグインでできる高速化
  • コードを追加する高速化
  • テーマを直接編集する高速化(自己責任で)

 

サーバーの反応を高速化する

レポートが出ると、下記のような項目があります。(改善する必要がないほど好スコアの人は「Passed Audits」の中に入っています。)

Reduce server response times

Reduce server response times (TTFB)(サーバーのレスポンス時間を短くする)
Time To First Byte identifies the time at which your server sends a response. (TTFBとは最初のバイトを認識するのにかかる時間で、サーバーがレスポンスした時の時間を指す)
Themes, plugins, and server specifications all contribute to server response time. Consider finding a more optimized theme, carefully selecting an optimization plugin, and/or upgrading your server.(テーマ、プラグイン、サーバースペックは全てサーバーレスポンスタイムに関連します。テーマの最適化、最適なプラグインを注意深く選定し、または(そして)サーバーをアップグレードすることを考慮に入れてください)

このReduce Server response timesと出た時の原因は主に下記のことを対応すると改善されます。

Reduce Server response timesを改善する4つの対応策

  • サーバのスペックを上げる
  • 適切なサーバー設定
  • 適切なテーマの選定
  • 適切なプラグインの選定

サーバーのスペック:この中でもサーバーの性能がとても大きく、スペックの低いサーバーはどうしてもレスポンスタイムが下がってしまいます。高性能なサーバーだとある程度無理をさせても高速に処理してくれますが、いろんなことをやろうとするとスペックがとにかくモノを言います。

最適なサーバーの設定:サーバーの設定によってうまく交通整理をして上げると、サイトの速度が上がります。

適切なテーマの選定:テーマの作者がスピードのことも考えて作っていると、サイトの速度が上がります。そのため、適切なテーマの選定はとても重要です。

適切なプラグインの選定:いろんなプラグインや重いテーマを使うといつまでたってもページが表示されず、イライラしてページから離脱してしまう人が出てくる。

サーバーのスペックを上げる

Reduce Server response timesを改善する4つの対応策

  • サーバのスペックを上げる ←今ここ
  • 適切なサーバー設定
  • 適切なテーマの選定
  • 適切なプラグインの選定

 

高速化その1:高性能なサーバーの選定

国内で使うならエックスサーバー

XServer

ブログをするならエックスサーバーというのは誰もが言っていて、中には聞きあきている人もいるかもしれない。

エックスサーバーはWordPressの運用に特化したレンタルサーバーである『wpXレンタルサーバー』も用意しているので、そちらを使ってもいいと思う。

HTTP2プロトコル、SSD、Xアクセラレーター、OPcacheなどの高速化の対応をはじめSSLやマルチドメイン、メール機能など必須の機能は一通りカバーしている。

エックスサーバーのさらなる詳細はこちら

海外にホスティングするならFastComet

もし、海外にホスティングしたいならFastCometあたりを使うといいのではないかと思う。

このホスティングはXサーバーよりも安く始めることができる。月額2.95ドルから始められる。一番上は月額9.95ドル。私は初めは一番安いプランから初めて、最終的に一番高いプランに変えた。

このサービスの良いポイントはサポートがとにかく早いこと。チャットで質問したら24時間365日すぐに回答をくれる。

FastCometの詳細はコチラ

適切なサーバーの設定

Reduce Server response timesを改善する4つの対応策

  • サーバのスペックを上げる
  • 適切なサーバー設定 ←今ここ
  • 適切なテーマの選定
  • 適切なプラグインの選定

サーバーのスペックをあげたら、今度はそのサーバーの設定を対応してあげます。今すぐにできるサーバーの設定方法を書きます。

高速化その2:gzip, deflate, brotliを使った圧縮

Enable text compression

「Enable text compression」がでた場合は、圧縮をかけることで改善が見られるということ。

Enable text compression (テキストの圧縮化を有効にする)
Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes.(テキストベースのリソースを(gzip, deflate, またはbrotliで)圧縮をかけてネットワークの総バイト数を最小化する。)

この改善を行うために、サーバーに置いてある.htaccessというファイルを編集しなければなりません。サーバー側にあるファイルで.htaccessというファイルを探しましょう。

そして必ずバックアップを取っておきます。(自分の手元に.htaccessをダウンロードしても良いですし、.htaccessのファイルの中身をコピーして置いても構いません)

ファイルを下記の情報を加えていきます。

あえて外しているものもありますが、アフィンガーを使っている方はそのまま使えるのかなと思います。

圧縮できているか動作確認

GID Network for checking gzip

GIDZipTestというので実際に圧縮できているかどうかチェックすることができます。

高速化その3:キャッシュのポリシーを変更する

Server static assets with an efficient cache policy

「Serve static assets with an efficient cache policy」このエラーが出てる場合、キャッシュの設定を適切にするともっとリピートユーザーは早くレスポンスを受けることができるよというもの。

Serve static assets with an efficient cache policy (静的アセットを適切なキャッシュポリシーで提供する)
A long cache lifetime can speed up repeat visits to your page. (キャッシュの保存期間を長くすることでリピーターのアクセススピードを上げることができる)

このキャッシュポリシーも同じ.htaccessで変更が可能です。私は下記のように設定しました。

私が考えているのは下記の通りです。

  • そもそも画像は変更を加えることがないから、画像関連のファイルは全てキャッシュ期間1年間
  • フォントファイルも変更を加えることはないから1年間
  • cssは定期的に変更を加える可能性があるので、二週間
  • 他のファイルは2ヶ月

といった感じです。とは言いつつも、基本的にLighthouseがOKとなるまで期間を少しずつあげていっただけですが...笑

けれども確かにようく考えてみると、そこまで頻繁にデザインを変えるわけでもないし、画像を差し替えることもしない。

そう考えるとキャッシュは長い期間保持していた方がユーザーにとっては良いよねと思うに至りました。

この後の項目でも.htaccessを編集しますので、もし先に.htaccessの対応を全てやってしまいたい方や全ての設定を見たいという方はスクロールしていただければと思います。

適切なテーマの設定

Reduce Server response timesを改善する4つの対応策

  • サーバのスペックを上げる
  • 適切なサーバー設定
  • 適切なテーマの選定 ←今ここ
  • 適切なプラグインの選定

次はテーマです。

高速化その4:業界でよく使われているテーマを使う

テーマの出来によってサイトの重さも変わります。無料なものから有料のものまでありますが、無料なものだと痒いところに手が届かないので、私はいつも有料版を使っています。

今回は記事にもある通りAFFINGERのテーマを使っていますので、皆さんにもAFFINGERをお勧めいたします。

Affinger Advantage

アフィンガーはアフィリエイトに特化したサイトというのが売りですが、

  • 記事作成の作業効率アップ
  • 豊富な記事作成パーツ
  • SEO
  • 裏側の豊富な機能
  • 自分好みのデザイン

という理由で購入しました。実際にテーマを適用させただけでSEOのスコアは98/100だったので、検索からの流入に期待がもてます。

詳しくは下記のボタンからご覧ください。

AFFINGERテーマの詳細はコチラ

適切なプラグインの選定

Reduce Server response timesを改善する4つの対応策

  • サーバのスペックを上げる
  • 適切なサーバー設定
  • 適切なテーマの選定
  • 適切なプラグインの選定 ←今ここ

サーバーレスポンスタイムを上げる上での最後の項目です。

高速化その5:使わないプラグインの削除

Reduce server response times

Reduce server response timesを改善する上で4つ目の「項目適切なプラグインの選定について」です。

  • サーバのスペック
  • 適切なサーバー設定
  • 適切なテーマの選定(AFFINGERなのでここはスキップ)
  • 適切なプラグインの選定 ←今ここ

人によっては「いつか使うかもしれない」という理由で、使わないものもそのままにしているケースがあります。

使わないものを放置しておくと、どうしてもサーバー側のレスポンスタイムを遅くする原因になります。

プラグインがあればあるほど、その傾向が強くなります。

特にAFFINGERを購入し、移行してきた人は、移行前のプラグインをそのまま使う人が多いのではないでしょうか。

それがこの「Reduce server response times(TTFB)」で注意される一つの原因になります。

今あるプラグインは「AFFINGERについている機能でカバーできませんか?ということを一つの指標としてプラグインを見直してみてください。

私は「33のプラグイン(多すぎ)から18のプラグイン」まで絞りました。

運用の仕方を変えればもっと絞れるかもしれません。

人によってはこれだけで劇的な改善につながると思います。

例えば、アフィンガーを使っている方は下記のことを検討してみましょう。

  • Adsenseのプラグインの削除
  • SEO関連プラグインの削除
  • 記事の上下に文言を入れるプラグインの削除
  • 広告関連のプラグインを一つにする(Rinkerなど)
  • AMPプラグインの削除
  • 移行前に使っていたテーマのプラグイン関連一式の削除
  • その他、本当にユーザビリティを上げているのか

私は現在下記のプラグインを使っています。

  • Akismet Anti-Spam (アンチスパム)(スパム対策)
  • Autoptimize(JS/CSSの最適化、Lazy-Load用)
  • Classic Editor(新しいエディターはまだ安定していないから)
  • CM Tooltip Glossary(単語集を作るため)
  • Contact Form 7(問い合わせフォーム)
  • Crayon Syntax Highlighter(記事内にコードを載せるため)
  • EWWW Image Optimizer(画像の圧縮)
  • Google XML Sitemaps(Googleにサイトマップを送るため)
  • PWA for WP(PWA)
  • Rinker(広告)
  • Shortcodes Ultimate(ショートコード用)
  • Table of Contents Plus(記事の目次を作る)
  • TinyMCE Advanced(エディターの機能充実)
  • TinyMCE テンプレート(エディターでテンプレートを使いたいとき)
  • User Role Editor(記事を寄稿してくれる人の権限関連)
  • WebP Express(WebPに変換してくれ流)
  • WP Super Cache(キャッシュを自動生成してくれる)
  • クレジット削除(アフィンガーのクレジット削除)

もしかしたらやり方次第でもう少し減らすことができるかもしれません。プラグインを使わなくてもアフィンガーが様々なサポートをしてくれます。

以上が「サーバーの反応を高速化する」ための方法です。

次は特定のプラグインを使ってサイトの高速化をしていきます。

プラグインでできる高速化

プラグインを使うことで様々な高速化をさせることができます。

高速化その6:WebP Expressで画像ファイルをプラグインで次世代型の形式にする(WebP、JPEG 2000、 JPEG XR)

次世代型の画像フォーマットに変換 WebP

Serve images in next-gen formats(次世代型のフォーマットで画像を提供する)
Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. (JPEG 2000、JPEG XR、そしてWebPの画像フォーマットはPNGやJPEGよりもよい圧縮がかけられ、ダウンロード時間が早くなりデータ消費量も少なくなります)

もし画像ファイルをPNGやJPEGなどを使っている場合は、WebPなどの画像をサポートするとこの値が改善されます。

ワードプレスはプラグインを使うことで画像ファイルをWebP形式に変換してくれます。

WebPであればなんでも良いと思うのですが、私は「WebP Express」というプラグインを使っています。

このプラグインはWebPに出力してくれるだけでなく画像の圧縮も同時にしてくれる優れものです。

WebP Express Plugin

WebP Expressをインストールしたら、「設定」→ 「WebP Express」に移動

Conversionのセクションに「Bulk Convert」とありますのでクリック。

これでWebPに変換されます。

なお、WebPファイルはサポートしているブラウザとサポートしていないブラウザがありますので、動作確認はChromeで行いましょう。

高速化その7:EWWW Image Optimizerを使って画像を圧縮する

高速化6に関係してきますが、そもそもアップした画像自体も圧縮して、画像サイズを変更しようというもの。

画像は写真家など細部の画質まで見せたい場合を除いては、この方法はパフォーマンスに大きく影響します。

まずEWWW Image Optimizerプラグインをインストールします。

EWWW Image Optimizer Install

その後に「メディア」→「一括最適化」に進み、「最適化されていない画像をスキャンする」をクリックして最適化を始めます。

もし、この画像ファイルは元のクオリティで残しておきたいというものがあったら、あらかじめバックアップを取っておきましょう。

この方法は画像が上書きされてしまいます。

EWWW Image Optimizer Bulk Convert

これで相当な量のデータを少なくすることができます。

高速化その8:Autoptimizeで画像のLazyLoad(遅延読み込み)させる

Defer offscreen images

Defer offscreen images(オフスクリーン画像を遅延させる)
Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive. (ユーザーが使える状態になるための時間を短くするために、先に重要なファイルの読み込みを行い、画面に見えない隠れた画像を遅延読み込みさせることを考慮してください。)

これはどういうことかというと、スクロールするまで画像を読み込まないでねということ。最初に全てを読み込んでしまうと、それだけユーザーが待たないといけなくなり、ユーザビリティが下がります。

これはAutoptimizeのプラグインを使ってこれを行います。

Autoptimize インストール

Autoptimizeで検索をかけてインストール。設定画面でImagesをクリックしてLazy-load images?にチェックを入れて保存する。

Autoptimize Lazy-load images

高速化その9:CSS/JSファイルを縮小してネットワーク量を下げる

これもAutoptimizeでできる内容です。

Minify CSSMinify JavaScript

Minify CSS(CSSを縮小する)
Minifying CSS files can reduce network payload sizes.(CSSファイルを縮小することでネットワークのペイロードサイズを下げることができる)

Minify JavaScript(JavaScriptを縮小する)
Minifying JavaScript files can reduce payload sizes and script parse time.(JavaScriptファイルを縮小することでペイロードサイズとパースタイムを少なくすることができる)

「設定」から「Autoptimize」に移動。

Autoptimize JavaScript

JavaScriptは下記にチェックをした。

  • JavaScriptコードの最適化
  • Aggregate JS-files?

Autoptimize CSS

CSSはか下記にチェック

  • CSSコードの最適化
  • Aggregate CSS-files?
  • インラインのCSSを連結

高速化その10:キャッシュを有効化させてページの読み込みをアップ

これは.htaccessを設定したのとは別の対応。

私はWP Super Cacheを使って対応している。WP Super Cacheをインストール

WP Super Cache

その後「設定」→「WP Super Cache」にいき、各タブでの推奨設定を全てチェックを入れる。

これでWP側でキャッシュを行なってくれるので、サイトのパフォーマンスが改善する。

高速化その11:PWA / Service Workerを利用したキャッシュコントロール

最近少しずつ市民権を得ているように思えるPWA(Progressive Web App)だが、WordPressでもPluginを利用することで簡単に実装することができる。

 

PWAは「WebサイトやWebアプリをネイティブアプリのようにインストール可能にする技術」と表現できます。ネイティブアプリとは、AndroidやiOSなどの個々の環境に特化した専用のアプリのことです。

ビジネス+ITより

PWAのメリット

PWAのメリットはスピード、オフライン可能、プッシュ通知、インストール不要といった点が挙げられます。

  1. ページの読み込みや表示が速い
  2. オフラインでも動く
    • 画面遷移をともなう操作もオフライン時に可能
  3. プッシュ通知の受信が可能
  4. インストール不要
  5. ストアの審査なくアップデートが可能
  6. GPSを使った現在地取得と利用が可能
  7. ネイティブアプリのようなUIを実現できる

いまさら聞けないPWAとAMP」より

特にスピードとオフラインでも閲覧可能は注目するべきポイントです!

PWAで調べると様々なプラグインが出てきます。私は「PWA for WP & AMP」を使っています。

PWA for WP install

「PWA for WP & AMP」をインストールしたら、「設定」→「PWA for WP」をクリックして、各種設定をして保存しましょう。

サイトの名前、アイコンなど設定しなければならない部分がありますが、それさえ設定してしまえば、あとはプラグインが全部やってくれます。

この際にいくつか注意点があります。

注意ポイント

  • HTTPS対応をしていたらhtaccessでhttpがhttpsにリダイレクトするように設定をしておく(後述)
  • PWA用のSplash画像を用意する(512px以上)
  • One Signalなどプッシュ通知を行うプラグインを使っていたら、Manifestファイルがコンフリクトしてしまうので、

htaccessの対応

HTTPSにしっかりと対応している方はhtacessの対応をしておくと良いです

以上で「プラグインでできる高速化」です。

コードを追加する高速化

コードをWPに追加することで、高速化することができます。

高速化その12:Preconnect設定をする

Preconnect to required origins

サードパーティのコネクションを優先的に行う必要のあるという指摘。これはコードを足して対応。

「外観」→「テーマエディター」にいく。

右側の「テーマのための関数(functions.php)」をクリックし、テキスト欄にコードを入れる。

Preconnect Function php

上記「array(」以降のURLはLighthouseで出てきたURLを入れるといいと思います。

参考

追記:

'dns-prefetch'のみ書いていましたが、preconnectと共存できるようで私自身パフォーマンスが改善しましたので、'dns-prefetch preconnect'と変更しました。

(今後随時追加予定)

 

テーマを直接編集する高速化(自己責任で)

最後に紹介するのはテーマのコードを直接変更を加えて行う高速化です。

(今後随時追加予定)

 


ご案内:UN Job Siteを開発しました。

国連のポストを簡単に探すことができるプラットフォームUN Job Siteを開発しました。国連で将来働きたい方や、現在働いていて今後自分の就職活動を少ない労力で行いたい方に向けて作っています。国連の採用基準やポリシーに合わせて現在も継続的に開発していますので、ちょくちょく覗いていただければと思います。また、ブログ記事にてその開発背景や今後の開発予定の機能等も載せていますので、合わせてご覧いただければ幸いです。

下記の画像をクリックしていただくことで、UN Job Siteに遷移します。


Facebook PageやTwitterもぜひフォローお願いします。

また、国連職員を目指している方への情報配信Facebook Pageや、Twitterアカウントでも情報配信をしていますので、フォローも是非よろしくお願い致します。


こんな記事もあります




  • この記事を書いた人
  • 最新記事

亀山 翔大

東京都出身。劇団四季俳優、日本IT企業CTO(最高技術責任者)、国連防災世界会議ITコーディネーター、Fintech企業のKyashを経て、国際連合に勤める。国連ICT戦略推進、リージョナルセンター設立、コンプライアンス、セキュリティ強化など様々なプロジェクトを手がける。 各国連組織にある求人情報を一括取得し、自分で管理するお手伝いをするサービス、https://unjob.site を運用中。

プロフィール詳細はこちら

講演依頼はこちら

人気記事

1

国連職員になるには、国連で働くためには、就職するためには、何を知るべきなのか、何を準備したらいいのか順番に解説していきます。国連職員になる難易度は本当に高いのか、なぜ高いと言われているか。出身大学や学部はどの程度関係あるか、採用試験のために学生のうちにどんな準備ができるかなど様々な疑問に答えていきます。

CV image 2

レジュメやCV、PHPを書く際に自分でどのようなことが改善できるかを4つの原則、12のルール、2つの改善方法を紹介します。また末尾に19の質問をのせ、自分の応募書類がチェックできるようにしました。一つ一つ時間をかけてあなたの応募書類の合格率をあげましょう。

3

国連職員の給料を役職ごと(専門職・管理職・上級職)に公開します。国際的な貢献は最も重要な点でありますが、人によってはキャリア形成の上で給料は大切な要素だと思います。国連職員の年収を東京やニューヨークを例にとり計算。UN、UNDP、UNICEF、UNFPA、WHO、IFC、IMF、UNHCRなど様々ありますが、この記事の給料はそれらの国連機関をカバーしています。

-ブログ, 技術
-,

Copyright© Shota's Blog , 2019 All Rights Reserved.