ガジェマガ

おすすめガジェットと生活改善のブログマガジン

ブログPV・アクセス

【プラグインは無駄】ワードプレスを表示速度を1秒台にした12項目と俺の結論

更新日:

俺のウェブサイトが死ぬほど重いことに気づいた。ページが表示されるまでに6秒かかって、読み込みが完了するまでに20秒ぐらいかかる。あほか。

本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。




結論にも書いてるんだけどプラグインは無駄だ。ウェブサイトの高速表示によるユーザビリティと検索順位の向上を目指している人は、俺と同じ失敗をしないでほしい。表示速度計測ツールのランクに意味はない。

自分のサイトの表示速度の見方

自分で自分のウェブサイトチェックしても、自分のサイトだから何回も見てるし、既にブラウザのキャッシュにデータが入ってるから表示が早い。だから今まで気づかなかった。今回ワードプレステーマを変更する機会があって、そのタイミングで今まで手を付けていなかったところを見直すことにした結果、表示まで6秒もかかっていることに気づいた。

Chromeを使っている人が自分のウェブサイトの表示速度を確認したいときは、パソコンであればCtrl+F5同時押しでキャッシュを削除してからの再読み込み、スマホであればシークレットタブを開いてそこから自分のウェブサイトにアクセスすることで確認できる。

表示開始まで6秒

そこで確認できたのはウェブサイトが表示されるまで6秒、読み込みが完了するまで20秒という事実だった。おそすぎる。ガジェマガにアクセスした人はよく今まで諦めることなく6秒も待ち続けてくれた。ありがとう。その後三日三晩対策をすることで表示開始を1秒まで改善したので、そのためにやったこと、そして辞めたことを備忘録として残したい。

注意点

表示速度改善の作業に正解はない。どれが効果があってどれが効果がないかはウェブサイトによりけりだ。そのため、1つ変更してはチェックするヒットアンドエラーの作業が必要になる。俺は1つ変更する度にウェブサイト表示速度計測ツールで速度をチェックしつつ、サイトのレイアウトに異常がないことを確認する作業を繰り返した。つまりなにをしているか理解する必要はなくて、単純にウェブサイトが高速化されているか、きちんとウェブサイトが表示できているかの二点を確認しながら牛歩戦術で進めていけばいい。

ウェブサイト表示速度継続ツール

ウェブサイト表示速度計測ツールはGoogle PageSpeed Insightsが最も有名だが、現在は仕様変更により殆どのサイトで計測できなくなっている。それに代わるツールとしてGTmetrixを利用した。使い方は計測したいページのURLを貼り付けてスタートボタンを押すだけだ。気をつけてほしいのはウェブサイト全体の計測というわけではなく、トップページのURLだとトップページのみの計測になるということだ。記事ページも計測したいなら個別の記事ページのURLを貼り付けないといけない。

Sponcerd


1 不要プラグインの停止(継続)

多くの人が使っていて、かつ重いことで有名なプラグインであるAll In One SEO PackとWP Popular Postを思い切ってオフに。その他プラグインを精査して必要最低限のものにした。スピードに拘りたいならプラグインは少なければ少ないほどいい。

2 .htacssへの追記(やめた)

Gzip圧縮(やめた)

サーバーから送信されるデータをGzip圧縮するためのコードを書き込んだ。Gzip参考(→.htaccessファイルでgzip圧縮させてサイト表示速度を向上させる方法

ウェブサイト読み込みはまずサーバーからデータを読み込んで、それをブラウザが描写するんだけど、Gzip圧縮のコードを.htacssへ追記することで読み込みデータ量を少なくできるらしい。これによって読み込み速度が改善するんだけど、ガジェマガではウェブサイトキャッシュプラグインとしてWP Fastest Cacheを使っていて、 このプラグインに同じ機能があることに気づいたので、この記述はやめた。

Keep Alive設定を追記(やめた)

サーバーと通信できる状態を維持し続けるKeep Aliveを設定。その都度のやりとりが減って高速化に繋がるらしい。

ブラウザキャッシュ設定を追記(やめた)

ブラウザに一定期間キャッシュして一度訪れた人は高速で表示できる設定を追記。

正直どれも体感できる違いはなかった。GSmetrix等の表示速度計測対策ツール対策でしかないのでやらなくてもいいと思う。

3 functions.phpへの追記(継続)

これは効果が大きかった。グーグルアドセンスを筆頭とする重いJavascriptの読み込みを最後にすることでコンテンツの表示を高速化する記述だ。明確に表示が早くなった。

ちなみにプラグインのJavaScript to FooterHead Cleanerでも同じことが出来る。

4 W3 Total Cache(やめた)

有名キャッシュソフト。高機能だけどエラーが起きることでも有名。

キャッシュソフトはユーザーがアクセスするたびにワードプレスを1から構築するのを辞めて、予め用意しておいたウェブサイトをユーザーに見せるプラグインで、導入すると明らかな効果を実感できる。

W3 Total Cacheはガジェマガだと表示が崩れるので利用を取りやめた。その代わりWP Fastest Cacheを使ってる。こっちはエラーもなく順調に使えてる。

WP Fastest Cache(継続)

有名キャッシュプラグイン。W3 Total Cacheの代わりに導入。使いやすいし不具合もないし、表示速度も速くなった。チーターがかわいい。

6 CloudFlare(やめた)

有名CDNアプリ。設定することで最適なCloudFlareのサーバーからウェブサイトをユーザーに提供できるようになる。サーバーの負荷軽減と表示速度高速化に役立つ。どうも不安定なのとあまり効果を実感できないので取りやめた。あとW3 Total Cacheとの組み合わせは最悪だと思う。バグって死ぬほど重くなった。こわい。もう触りたくない。

7 Autoptimize(やめた)

CSS、javascript、htmlを圧縮してウェブサイトの表示を早くするらしい。特に効果を感じなかった。

8 Head Cleaner(やめた)

上のAutoptimizeと同じようにCSS、javascript、htmlを圧縮してウェブサイトの表示を早くするらしい。また、javascriptをフッターで読み込ませる機能なども盛り込まれている。javascriptは上記のfunctions.phpの項目で手動で対策しているし、これも特に効果を感じなかった。

9 EWWW Image Optimizer(やめた)

画像をリサイズと圧縮してくれるプラグイン。俺はアップロードの段階で縮小専用で画像をリサイズしてるから使うの辞めた。このプラグインの機能には圧縮もあるけど、ガジェマガでは画像の品質には拘りたいと思っているので圧縮する必要はないと判断した。

10 PB Responsive Images(継続)

閲覧者の表示解像度によって画像のサイズを変更してくれるプラグイン。ガジェマガではこのプラグインを使って画像のサイズを出し分けることでデータ容量を少なくしてる。具体的には、スマホ表示なら画像の解像度最大768px、タブレットなら800px、PCなら900pxの画像を表示している。スマホサイトは横幅450pxも無いからもう少し768pxの画像を表示する必要はないんだけど、画面サイズに画像サイズを合わせると画像の劣化が激しい。納得できるレベルのところで768pxを選択した。画像サイズとウェブサイトの高速表示は切り離せない関係にあるけど、PB Responsive Imagesは見事に要望に応えてくれた。ガジェマガはデータ通信制限にかかった庶民にも優しいウェブサイトでありたい。

設定を変更しようとするとページが真っ白になって反映されないけど、phpを直接いじることで解決できる。やり方は別記事で解説している(→【PB Responsive Images導入】画面サイズに合わせた画像を出し分けてページを軽量化する

11 Unveil Lazy Load(やめた)

画像の読み込みを送らせて高速表示するプラグイン。今表示されている画像しか読み込まないことで表示速度を改善している。使い方は簡単で、インストール→有効化だけだ。ただ、このプラグインを入れることで画像が画像検索に引っかからなくなるらしい。少しでも検索からの流入を増やすことを優先したいからこのプラグインはやめた。

12 表示開始まで1秒を切った決め手はサーバー移転(最強)

最終的に元も子もない話をしてしまうと、Xserverに乗り換えたんだけど、これが一番効果が大きかった。もし現在Xserver以外のサーバーを使っていて、読み込み速度に頭を抱えている人は移転した方が早い。

プラグインは無駄

とにかくウェブサイトの表示を高速化するために悩み抜いて色んな設定をし続けた結果、始めは表示開始まで6秒かかっていたところ、こねくり回して3秒まで縮めることができた。ただ、それでも数ある有名サイトは1秒以内には表示を開始していた。この差はサーバーだった。

Xserver最強

俺は万が一の可能性も考えてアダルト可のFUTOKAを利用していたんだけど、これを高性能で有名なXserverに乗り換えることで1秒以内に表示を開始できるようになった。たくさんのプラグインを入れることでウェブサイト表示速度計測ツールの判定は上がるかもしれないけど、重要なのはそこではない。

Sponcerd


SEOに大きく影響する表示開始速度

ユーザーがストレスを感じるのはウェブサイトが表示されるまでの時間で、表示されてしまえば読み込みが完了するまでの時間を意識することはほとんど無い。多くの場合スクロールしてる間に読み込みが完了してしまう。そしてウェブサイトが表示されるまでの時間はサーバーの応答速度が大きく影響していて、プラグインでどうにかできる問題ではなかった

ウェブサイト表示速度計測ツールでいくら高得点を出そうと無意味だ。表示開始が遅ければユーザーは離脱する。なんでも良いから1秒以内に表示して、ユーザーにページが切り替わったと思わせることで離脱率は下がり、ページビューは伸びる。これは間違いない。

実際ガジェマガはサーバーをXserverに移転してSSL暗号化通信に対応してテーマをAffingerJETに置き換えた翌日からページの検索順位が幹並上がってアクセスが20%増えた。重要なことなので繰り返すけど、プラグインをこねくり回すのは無駄だ。

プラグインには副作用も

三日三晩で色々こねくり回した結果ガジェマガのCSSは崩れて、更にプラグインのバグに見舞われて表示まで20秒かかるようになってしまったこともあった。これだと本末転倒だ。プラグインでどうにかしようという発想を捨てて根本となるサーバーを良いものにしたほうがいい。

サーバー移転の判断基準

そのために追加料金を払って、手間暇かけてまでサーバーを移転する必要があるかは悩む。ガジェマガはブログで生活できるまで成長させる予定なので、初期投資を惜しまないことにした。表示速度改善はSEOと回遊率の改善に繋がる。サーバーを移転することでブログ収益が増えて、いずれ元が取れると判断した。

それに書いても書いても成果が出ない時に自分に対してできる言い訳は無くしておきたい。時間をかけて成長させるストックビジネスであるブログにおいて、表示速度とかSSL暗号化とか有料テーマとか、SEOに影響があるとされているものは先に対策しておいて損はない。足を引っ張る要素を潰せばあとはコンテンツだけに注力すればいい。

だからそこまで考えていない人は手間暇と追加料金を払ってまでサーバーを移転する必要はないと思う。

まとめ ライフハック

2018/12/16

【2018年版】生活が変わるガジェマガ式買ってよかったもの16選

いよいよ一人暮らしも5年目に突入しようとしていて、欲しいモノは一通り買ってしまった。これからも物欲は尽きることないだろうし、ガジェットに限らず様々な物を購入することになると思うけど、今後は足りないものを補うというより、今あるものをグレードアップする買い物が主流になると思う。 そんな満たされた生活の中でも、俺基準俺調べの買ってよかった商品を、生活に与えたインパクト順にランキング形式でを紹介したい。正直もっと早く買っておけば良かったと思うものばかりなので、まだ持っていないものがあれば急いで購入してほしい。 本 ...

ReadMore

スマホ・タブレット ライフハック

2018/12/11

家電量販店販売員と交渉してスマホを安く購入する方法【応用可】

どうせ同じスマホを購入するなら1円でも安く買いたい。そんな人におすすめなのが家電量販店でのスマホ販売員との交渉だ。 家電量販店の販売員はショップの店員さんと違って表には出さない下げ幅を持っていることが多く、うまく交渉することで相手が持つ下げ幅を最大限引き出すことができる。 今回は一時期電話番号を23回線保有しながら月の支払いが2,000円程度だった元携帯乞食でありながら、家電量販店と携帯ショップでのスマホ販売経験もある俺が値下げを引き出すコツを教える。 本日もガジェマガ(@Gadgetkaeru)をご覧い ...

ReadMore

パソコン・周辺機器

2018/11/27

【Matebook X Proレビュー】Macの外観サーフェスのスペック

2018年の6月に発売されたばかりのMatebook X Proを購入したので、ライバル機であるMacbookやSurfaceと比較しながらレビューする。 Matebook X Proの最大の魅力は3:2比率で画面占有率91%の3Kディスプレイだから、そこを中心にボディの質感からスペックまで網羅した。 今薄型ノートパソコンウルトラブックの購入、買い替えを検討している人は参考にしてほしい。 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 Huawei Matebook X ...

ReadMore

お得情報 スマホ・タブレット

2018/11/18

【ZenFone5Zが5万円】GEARBESTでスマホを安く買う

GEAR BESTって知ってるだろうか。簡単に言うと中国のAMAZONなんだけど、日本への進出も着々と進めていて、最近では日本倉庫まで作ってしまった通販会社だ。AMAZONも楽天もあるなかで更に通販会社の選択を増やす必要があるのだろうかという疑問を抱く気持ちはよく分かるんだろうけど、GEAR BESTには独自の魅力がある。今日はGEAR BESTが同魅力的なのか、具体的に製品を列挙しながら解説したい。 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 GEAR BESTの魅 ...

ReadMore

【iPhoneとAndroidの違いと比較】選ぶポイントまとめ

スマホ・タブレット

2018/11/9

【iPhoneとAndroidの違いと比較】選ぶポイントまとめ

これからスマホを買う人、次のスマホへの買い替えを検討している人向けに、AndroidとiPhoneの違いとそれぞれの優れている点を比較解説する。 また、なぜ俺がiPhoneからAndroidに買い替えたのかを解説したい。 迷っている人はとりあえずこの記事を読めば違いがすべて把握できる。 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 iPhoneもAndroidもできることはほぼ一緒 当たり前だけど主に出来ることはほとんど一緒だから、iPhoneとAndroidの違いはト ...

ReadMore

スマホ・タブレット まとめ 格安SIM

2018/12/16

【ほぼ同じ】格安SIM11社の料金と特徴比較+おすすめスマホ15

既に格安SIMを取り扱うMVNOの提供会社は100社を超えていて、過当競争が進みすぎて値段も品質もほとんど違いがない。 そんな中でも比較的有名な格安SIM提供会社11社の比較と、それぞれが取り扱うスマホのおすすめランキングを紹介する。前半でMVNOの格安SIMをまとめて、後半でスマホをまとめている。 格安SIMの違いはどうでもいいからスマホのおすすめが知りたい人は後半からどうぞ(⇒後半までスキップ) 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 格安SIMはどこも一緒で ...

ReadMore

-ブログPV・アクセス

Copyright© ガジェマガ , 2018 All Rights Reserved Powered by AFFINGER5.