ストークの表示速度を高速化する方法!最強WordPressテーマの欠点を解決

wordpressテーマのストークを高速化

当サイト・アフィリエイトマーケットはWordpressで運営されておりテーマは『STORK(ストーク)』を利用しています。

はっきり言って私にデザインセンスは無いですし、HTML・CSSの知識も無いですが、それなりに人に見せられるサイトを運営できているのは、お洒落で使いやすいテーマであるストークのおかげです。

不満なんか1つも無い!

と言いたいところですけど、1つだけあってそれはページの表示速度の遅さです。

動きのあるギミックなどを採用しているので遅くなるのも仕方ありませんが、ページが表示されるまでに3秒以上掛かると53%の人が愛想つかして逃げてしまうというデータもあり、ストークでお洒落デザインなサイトだとしても見てくれなきゃ意味がないですからね。

そこで今回はストークの表示速度高速化のために行った策を紹介していきます!

 

※改善後のページ表示速度はこのようになりました。

pagespeedの判定

パソコン版は100点中88点!

パソコンで88点

GTmetrixの結果

ページ表示速度がA判定

 

当サイトの概要

まず最初に当サイトの概要は以下の通りです。

  • サーバー:エックスサーバー(X10スタンダードプラン)
  • PHPバージョン:PHP7.1.4
  • WordPressテーマ:ストーク

ウェブページの読み込み時間を調べよう

当サイトを高速化する前の読み込み時間から紹介していきます。

Googleが提供しているPageSpeed Insightsで調べた結果、スマートフォンからでは100点中47点(x_x;)赤文字なので赤点です、、、

 

パソコンからでは更に-5点されて47点(x_x;)テストだったら恥ずかしくてお母さんに見せられませんね。

とりあえず隠してみたけど後でバレて怒られるパターンです。

怒られる点数

 

PageSpeed Insightsと並ぶ定番の表示速度測定サイトGTmetrixでは以下の結果。

こちらでは意外と良くてPageSpeed ScoreはC(79%)、ヤフーのサイト速度計測結果を表すYSlow ScoreではD(68%)

gtmetrixの結果

 

が、しかしページを全て読み込むのに必要な時間・Fully Loaded Timeは3.9Sと遅いです。

サイト読み込み速度が3秒以上

結局のところ遅いので改善をしていきましょう!

修正点

GoogleのPageSpeed Insightsは点数と共に改善すべき点も教えてくれる新設設計です。

当サイトの改善点は以下の5つです。

  1. 画像を最適化する
  2. スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する
  3. ブラウザのキャッシュを活用する
  4. CSSを縮小する
  5. JavaScriptを縮小する
アフィリエイトマーケットページの読み込み速度

何やら難しい言葉が並んでいますが今回は解説を省いて高速化するために使ったプラグインやサーバーの設定方法などを紹介していきます。

高速化に使ったプラグイン

001 Prime Strategy Translate Accelerator

WordPressは英語のブログアプリケーションソフトなので日本語環境で使う場合には翻訳ファイル(日本語化するファイル)を読み込む必要があって余計な時間が掛かります。

この時間を短縮できるのが001 Prime Strategy Translate Acceleratorという小難しい名前のプラグインです。

WordPressを日本語で表示させる場合には、英語と日本語を対訳させるja.moというファイルを読み込んでいます。

実を言うと、このファイルの読み込みには結構な時間がかかっていて、なおかつバージョン毎にファイルサイズが大きくなってきています。

当ブログの計測値では、この処理だけで約0.1秒。現状のSimple ColorsではWordPressだけの処理時間で約0.3秒なので、全体の処理時間の約30%がこのファイル読み込みにかかっている計算になります。

出典:http://www.warna.info/archives/1447/

インストール&設定方法については別記事にまとめたので参考にしてください。

設定自体は1分で終わるシンプルなプラグインなので是非使いましょう。

『001 Prime Strategy Translate Accelerator』設定まとめ。高速化プラグインです

2017.12.11

Imagify

ImagifyはGoogleのPageSpeed Insightsで調べると、ほとんどのサイトで指摘される「画像を最適化する」を改善できる画像圧縮プラグインです。

画像ファイルを軽量化&圧縮できるプラグインの定番といえばEWWW Image Optimizerですが、可逆圧縮(元に戻せる)のロスレス圧縮しかできないので思ったほど軽量化してくれません。

Imaifyは不可逆圧縮(元に戻せない)のロッシー圧縮ができるので軽量化を目的にするならEWWW Image Optimizerより優秀!

 

デメリットとしては使用するのにアカウントを登録する必要があったり、1ヶ月あたり50MBしか圧縮できないなど少しだけ手間が掛かるプラグインですが効果は絶大です。

PageSpeed Insightsで指摘されがちな「画像を最適化する」をクリアできたのはImagifyのおかげです。

画像を最適化するをクリア

Imagifyの詳しい使い方も別記事にまとめたのでご覧ください

Imagifyの設定方法と使い方まとめ。画像圧縮ならコレ!

2017.12.16

WP Fastest Cache

キャッシュ系プラグインとして定番のWP Fastest Cache。

設定が面倒だったり分からないまま使うと不具合が出やすいキャッシュ系ですが、WP Fastest Cacheは初心者でも扱いやすく不具合も出にくい優れもの。

こちらも別記事にて詳細を解説しています。

wp fastest cache

WP Fastest Cache・Wordpress高速化のキャッシュプラグインの設定まとめ

2017.12.16

 

以下、サーバーの設定編ですが正直な話、ImagifyとWP Fastest Cacheを入れるだけで十分に高速化できてます。

ここから先の設定を変えたところでPageSpeed Insights、GTmetrixの点数はほぼ変わらないことを先に言っておきます。

サーバーの設定

PHP高速化(FastCGI化)

サーバーについては当サイトで使用しているエックスサーバーで解説していくので、違うサーバーだと機能が無いこともありますがご了承くださいm(_ _)m。

まずPHPのバージョンを調べましょう。

  1. サーバーパネルにログイン
  2. 設定対象ドメインを高速化したいドメインに設定
  3. 左メニューバーにあるPHP Ver.切替をクリック

契約しているサーバーによって利用できるPHPのバージョンも違いますが、基本的には最新のバージョンにしておくのがベスト。

phpのバージョン切替

エックスサーバーでPHP7.1.4だとFastCGIも自動で有効化されます。

fastcgi

mod_pagespeed設定

エックスサーバーではGoogleは開発した拡張モジュール「mod_pagespeed」を使うことができます。

具体的な内容は以下の通り。

Google社により開発された拡張モジュール「mod_pagespeed」を使用して、Webサイトの表示速度を向上させる機能です。

「mod_pagespeed設定」を有効にすると、ファイルを圧縮してデータ転送量を削減する、同種のファイルを一まとめにして無駄な通信を削減するなどの最適化処理を実施します。

この最適化処理により、Webサイトにアクセスしたブラウザはデータ転送量が減少し、また、ページのロード時間を短縮できるため、Webサイトの表示速度改善を期待することができます。

出典:https://www.xserver.ne.jp/manual/man_server_mod_pagespeed.php

mod_pagespeedは初期設定だとOFFになっているので高速化したいならONにしましょう!

手順は

  1. サーバーパネルにログイン
  2. 設定対象ドメインを高速化したいドメインに設定
  3. 左メニューバーにあるmod_pagespeed設定をクリック
mod_pagespeedの設定

注意点としてはONの状態だとWordpressのカスタマイズが反映されるまで時間が掛かるようになります。

ヘッダー・ロゴ画像の変更やウィジェット内容、テーマのカスタマイズを行うときにはOFFにして下さい。

ON・OFFの切替自体はクリック1つで一瞬で終わるので遠慮なく切替えましょう!

ストークに限らず使えます

今回紹介した高速化の方法はもちろんストークに限らずWordpressなら使うことができます。

記事中にも解説したようにImagifyとWP Fastest Cacheを入れるだけで点数はかなり改善できるので、全部やるのが面倒な方はこの2つだけ設定して下さい。

 

高速化というのは地味な作業ですがユーザービリティの向上には欠かせませんし、全ての策を終えるとサイトがサクサク開くようになり自分で色んな記事を開くのが楽しくもなります(笑)

まだ1度も改善したことがない方は表示速度の測定から始めてみましょう!


副業で稼ぎたいあなたへ

副業で稼ぐために必要なノウハウやツールを無料でGETできるキャンペーンをまとめた特設ページを作りました。

本当にオススメできるキャンペーンのみを掲載&随時更新をしているのでぜひチェックしてください!


こちらでは私が副業アフィリエイトで稼げるようになった秘密をまとめた、『アフィリエイトで月収100万円を稼ぎたい”あなた”に見て欲しいマニュアル』をLINEで友達登録してくれた方に無料プレゼントしています。

アフィリエイトの基礎知識、具体的なノウハウ、そして副業が勤務先にバレない方法も収録しており、誰でも1から学べて始めることができます。

少しでも興味があれば気軽に登録して下さいね!

その他、副業全般に関する質問・相談も受付中ですm(_ _)m


⇒友達追加はココから

wordpressテーマのストークを高速化


副業ブームの前に始めよう

アフィリエイトマーケットでは誰しもが稼げるようになる正しく再現性の高い方法を無料のメルマガ講座で公開中です。

そして登録いただいた方には『月収100万円を稼ぐための基礎知識・ノウハウを収録した限定マニュアル』をプレゼント中!

※日本政府が今年度中に副業を解禁するようですが、2018年6月現在では原則禁止です。

解禁されてからではなく、先行者利益を得られる今!ライバルが少ないうちにアフィリエイトを始めることをオススメします。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA