ガジェマガ

ガジェットと生活改善のブログマガジン【火木土更新】

ブログを書くコツ

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

2018年5月23日

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

トーマスです。ツイッターYoutubeもやってます。お問い合わせはこちら




この記事の目次(クリックでジャンプ)

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

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

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

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

表示開始まで6秒

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

注意点

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

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

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

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

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

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

Gzip圧縮(やめた)

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

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
 
#古いブラウザ対策
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html
 
#画像は圧縮しない GIF、JPEG、PNG、ICO
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary

#圧縮するファイル
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/js
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>

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

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

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

# Enable Keep-Alive を設定
<IfModule mod_headers.c>
    Header set Connection keep-alive
</IfModule>

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

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

# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<ifModule mod_expires.c>
    ExpiresActive On

    # キャッシュ初期化(1秒に設定)
    ExpiresDefault "access plus 1 seconds"

    # MIME Type ごとの設定
    ExpiresByType text/css "access plus 1 weeks"
    ExpiresByType text/js "access plus 1 weeks"
    ExpiresByType text/javascript "access plus 1 weeks"
    ExpiresByType image/gif "access plus 1 weeks"
    ExpiresByType image/jpeg "access plus 1 weeks"
    ExpiresByType image/png "access plus 1 weeks"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType application/pdf "access plus 1 weeks"
    ExpiresByType application/javascript "access plus 1 weeks"
    ExpiresByType application/x-javascript "access plus 1 weeks"
    ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
    ExpiresByType application/x-font-ttf "access plus 1 year"
    ExpiresByType application/x-font-woff "access plus 1 year"
    ExpiresByType application/x-font-opentype "access plus 1 year"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>

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

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

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

//レンダリングブロックしているJavascriptの読み込みを遅らせる
function move_scripts_head_to_footer_ex(){
  //ヘッダーのスクリプトを取り除く
  remove_action('wp_head', 'wp_print_scripts');
  remove_action('wp_head', 'wp_print_head_scripts', 9);
  remove_action('wp_head', 'wp_enqueue_scripts', 1);

  //フッターにスクリプトを移動する
  add_action('wp_footer', 'wp_print_scripts', 5);
  add_action('wp_footer', 'wp_print_head_scripts', 5);
  add_action('wp_footer', 'wp_enqueue_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'move_scripts_head_to_footer_ex' );

ちなみにプラグインの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秒以内に表示を開始できるようになった。たくさんのプラグインを入れることでウェブサイト表示速度計測ツールの判定は上がるかもしれないけど、重要なのはそこではない。

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

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

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

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

プラグインには副作用も

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

サーバー移転の判断基準

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

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

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

スマホ レビュー

2022/11/5

【Pixel 7 Proレビュー】最も理想的なAndroidスマホ

いつの間にかPixelシリーズの年一回の発売が恒例になり、Tensor搭載後はブランド力も獲得し、独自機能も増え、毎年のPixel発売が話題になるようになった。 そして今年も俺の手元には最新となるPixel 7 Proがある。ということで今年も今年のPixelはどうなのかをレビューする。 【結論】Pixel 7 Proはバージョンアップ版 先に結論から言ってしまうとPixel 7 ProはPixel 6 Proのバージョンアップ版に過ぎず、ほぼ変化がない。実際に使用感に影響する進化点は下記の2点のみ。 超 ...

ライフハック 買ってよかったもの

2022/11/27

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

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

ライフハック 買ってよかったもの

2021/10/8

【そもそも鞄いる?】ガジェマガの中の人のポケットとカバンの中身

多くの有名ブロガーがカバンの中身を記事にしているのにガジェマガではまだ一度も鞄の中身について書いたことがなかった。ブロガーになりたいのであれば、他のブロガーが書いている記事はしっかりと抑えておきたいということで、今回はガジェマガなりのカバンの中身と、ポケットの中身を紹介したい。 鞄はオカマの象徴 in USA 俺は中学生高校生の頃はリュックサックを使っていたし、社会人になってからはボディバッグを休日の荷物入れとして使っていた。社会人になり立ての頃にアメリカに留学していた妹と再会する機会があって、アメリカの ...

ライフハック 体験談

2021/6/18

【狭い家のメリットデメリット】6畳1Kに8年住んだ感想【一人暮らし

田舎の人が都会に引っ越す際に危惧するのは部屋の狭さなんだけどそれは間違ってない。都会は家賃が高いから広い部屋に住めない。 でもそれは悪いことばかりではない。寧ろ狭い部屋は快適だな。と渋谷区6畳1Kの家に8年住んで思う。ということで今回は俺が感じた狭い部屋に住むメリットデメリットを解説する。 狭い部屋の家賃だけじゃないメリット 狭い部屋は家賃が安い。これが最大のメリットなのは間違いない。 東京都の平均家賃相場は22万円 実際俺が住む東京都渋谷区は日本でもトップクラスに家賃が高いエリアで、2LDKとかを選んだ ...

ライフハック

2022/11/9

【デメリット】タワマンを実際に内見して断念した理由【庶民の憧れ】

タワマンに住みたい。という記事を以前出して、その後もタワマンを内見したり色々と検討したりしていたんだけど一旦断念することにした。 ということで断念するまでに悩んだ葛藤を記事にする。現在タワマンを検討している人は参考になれば嬉しい。 タワマンは庶民の憧れ 「いやいやタワマンなんて住んだところで」って意見はすげぇ来るんだけど、なんだかんだタワマンの記事はアクセスが超多くて注目度が高い。 タワマンを検討した記事は下記。 というのもタワマンは結局庶民の憧れなんだ。でも家賃が高すぎて住めない。だから住まない理由を探 ...

メンズ美容・健康 体験談

2022/11/4

【高すぎ】ゴリラクリニックのヒゲ脱毛で30万円提示された話【評判・口コミ】

髭いらねーって思って髭の永久脱毛に手を出そうとしたんだけど、ゴリラ脱毛のカウンセリング価格が想像以上に高くて、ネットでの値段の記載方法が悪質だと感じたので今日はその件を書きたい。 毎日髭剃るのめんどくさい みんなもそうだと思うけど、朝起きて仕事行くまでの時間は戦争だ。なぜなら俺はなるべく寝ていたい!むしろ起きたくない!でも社会人なので流石に会社に遅刻するわけにもいかず、毎日生きるためにゾンビ顔負けの死んだ表情で通勤しているのが実情だ。 そんな社会人にとって朝の時間は貴重だ。歯を磨いて顔を洗って髭そって朝ご ...

DIY ライフハック

2022/10/4

【ベッド拡張DIY】シングルベッドを横に30cm広げる【ダブル】

一人暮らしだからと言ってシングルベッドに拘る必要があるだろうか、いやない(反語)。ということに一人暮らし10年目にして気づいたからベッドを拡張することにした。 いつの間にか6畳1Kの限界に挑むのが俺の生きがいになりつつあるんだけど今回は多分その集大成にして頂点。色々取り組んできた部屋改善は多分これで終わりになる。 ということで実際にベッドをどう拡張したのか、6畳でベッドを大きくして快適になったのか、生活に支障は出ないのかを解説したい。 6畳1Kの限界に挑む 繰り返しになるけど俺は10年間6畳1Kの激狭物件 ...

ライフハック 俺の一軍

2022/11/12

【ルームツアー】家で使ってる物一覧と選んだ理由、感想【俺の一軍】

ガジェマガでは過去に色々な商品をレビューしすぎていて、 「で、結局今のお前は何を使ってるの?」 って聞かれることが多いから、ここでは俺の家で今現在使っている物と、それを使っている理由、感想を一言でまとめる。住環境構築の参考にしてほしい。 この記事では何か環境が変わるたびに内容を随時更新して俺の1軍をまとめる続ける予定(最終更新2022年11月10日) 家で使っている物一覧 まず俺が家の中で使っている物を一覧にすると下記。 クリックで感想にジャンプ リビング環境 壁美人 テレビ ChromeCast Fir ...

デスク環境 パソコン・周辺機器 俺の一軍

2022/11/17

【デスクツアー】デスクアイテム一覧と使ってる理由、感想【俺の一軍】

ガジェマガでは過去に色々な商品をレビューしすぎていて、 「で、結局今のお前は何を使ってるの?」 って聞かれることが多いから、ここではデスク環境周辺で俺が今現在使っている物と、それを使っている理由、感想を一言でまとめる。デスク環境構築の参考にしてほしい。 この記事では「俺の一軍シリーズ」として環境が変わるたびに内容を随時更新する続ける予定(最終更新2022年10月13日) デスク環境周辺で使っている物一覧 まず俺がデスク環境周辺で使っている物を一覧にすると下記。 クリックで感想にジャンプ デスク・椅子 Fl ...

スマホ レビュー

2021/12/14

【iPhone 13 Proレビュー】スマホ史上最高傑作。弱点4つ

毎年恒例のiPhone13シリーズが発売されたから俺も例に漏れずに購入した。別の記事でも解説した通り今回のiPhoneはProモデルが熱い。 ということでPro Maxを買いたかったんだけど出荷数が少なすぎるらしく手に入らなかったから大きさ以外の仕様が同じProを購入した。13になることでどれほど進化しているのかを確認したい。 iPhone 13 Proの特徴 今回のiPhone 13はProモデルが熱いというのは上でも書いた通りだけど、Proモデルは進化点が多い。特徴は下記。 リフレッシュレート120H ...

体験談 自転車・バイク

2022/10/30

【体験談】バイク王の買取でボコボコにされた話【評判・口コミ】

19歳の時にホーネット250を購入して27歳までで6万キロ乗ったんだけど、俺が東京に来たことですっかり乗らなくなってしまった。 28歳で一度帰省した時にエンジンをかけたことはあったんだけど、それ以降はめっきりで、既に放置して4年が経過していた。 このホーネットは思い出だらけではあるんだけど恐らくもう乗ることは無い。ということでバイク王を呼んで売却することにしたんだけど、その買い取り査定士の癖が強すぎたから交渉体験をまとめたい。 これからバイク王でバイクを売る人の参考にしてほしい。 ホーネット250の状態は ...

DIY ライフハック

2021/10/1

【壁掛けテレビの理想と現実】壁美人を3か月使った感想【賃貸】

賃貸でもテレビを壁掛け出来るのに原状復帰までできてしまう壁美人を導入してから早3カ月。まだテレビは一度も落ちていない。 とはいえ720個ものホチキスで取り付けるのってどうなの?とか、テレビを壁掛けにした不便はないの?と買いたいけど二の足を踏んでいる人は多いはず。 という仮定の下で壁美人を実際に3か月使った感想を書いていく。記事の内容的に楽だからという理由ではけっしてない。 壁美人はホチキスで壁に取り付け 壁美人の紹介記事でも書いた通りだけど、壁美人は720発ものホチキスで壁に取り付けることで25キロまでの ...

-ブログを書くコツ

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