超簡単!WordPressモバイルの表示スピードチェックと.htaccessによる速度アップの方法

投稿日:2017年3月24日 更新日:

wordpress_speedup12

 

「Test My Site」とは

従来「think with Google」としてgoogleより提供されていた表示スピードチェックサイトが、新たにモバイルサイト専用のスピード診断ツール「Test My Site」としてリニューアルされました。そこで本記事では内容を一新し、「Test My Site」の使い方と表示スピード改善のかんたんで有効な一手段をご紹介します。

 

スポンサーリンク

 

なお従来の「エックスサーバー移転直後のスピード低下」「『PageSpeed Insights』で問題点をチェックする方法」「STINGER7からAFFINGER4へのテーマ変更で重くなる」「データ転送量をチェック、圧縮を確認する方法」などの内容は、本記事最下段に移動しました。興味のある方はこちらよりご確認いただけます。

 

モバイルサイト専用に内容が一新

以前の「think with Google」はデスクトップパソコンでのスピード診断も可能でした。

wordpress_speedup01

 

一方、同URLで新たに誘導される「Test My Site」では、モバイルサイト専用となっています。

WordPressでここ1~2年にリリースされたテーマをお使いの方は多くがパソコンやスマホ、タブレットなどに自動的にリサイズして表示する「レスポンシブウェブデザイン」対応になっているので、ぜひチェックしてみてください。

そらよりブログの場合、googleアナリティクスで集客力をチェックするとモバイル端末、とくにスマホからの閲覧数はパソコンの倍近くに達しています。その意味でモバイルサイトのスピードチェックはとても重要と考えています。

 

speedcheck04

ちなみにhttps://sorayori.comをチェックしてみると、読み込み時間は「4秒」で「良好」。訪問者の推定離脱率は「10%」という結果になりました。

対象を絞り、そのタイムと具体的な影響が端的に表示され、とてもわかりやすいものになっています。またあとで改善のヒントを知ることも可能となっています。

そらよりブログの好判定は以前にWordPress内の「.htaccess」ファイルに手を加えていたためなのですが、それについては後ほど、ご説明します。

 

「Test My Site」の使い方

 icon-flag URLを入れるだけ

Test My Site」を訪問するとつぎの画面が表示されます。

speedcheck

下段の入力ボックスにチェックしたいモバイルサイトのURL(WordPressテーマなら普段お使いのURL)を入力します。

 

 icon-flag タイムと離脱率を表示

speedcheck04

すると先ほどご紹介した診断結果が即座に示されます。世界の一般的なモバイル回線接続である3G回線を想定したデータです。日本国内だけなら、実際のスピードは多少短縮されているはずです。

右下の「同業種内」と表示されたボタンをクリックしてみましょう。

 

 icon-flag 同業種内でのポジションを表示

speedcheck06

「同じ業種内の比較」が表示されます。そらよりは何でもありの雑記ブログですがアクセスの多い記事により「パソコン、家庭用電化製品」業種と判断されたようです。その業種で「4秒」は「良好」なほうであるという判定です。

さらに「次のステップ」に進んでみましょう。

 

 icon-flag 短縮可能なタイムを表示

speedcheck07

「少しの修正」で「3秒」短縮できるそうです。そうすれば「特に良好」トップクラスの仲間入りができるというわけです。やる気がわきますね。

赤枠で示した場所には「優先順位の高い修正点を確認」と書かれています。クリックして確認してみます。

 

 icon-flag 修正すべき点を教えてくれる

speedcheck05-2

タイプアップのために具体的に何をすればよいのか、優先順位の高いほうから教えてくれます。

そらよりブログの場合「レンダリングのパフォーマンスを低下させるJS(JavaScript)」「サーバーの応答時間を短縮する」「キャッシュ処理を活用する」の3点が示されています。

さすがに読み込み時間「4秒」となると改善点もレベルが高く、僕の能力では限界のようです。とりあえずここまでで満足としておきましょう。

なお下段青地部分の「無料レポートを取得」ではメールアドレスを提供することで、より詳細な改善指導を受けることができます。

 

 icon-flag 無料レポートで詳細がわかる

speedcheck08

メールで「無料レポート」を受け取ることが可能です。詳細な改善点が優先順位マーク付きで表示されています。リンク先ではさらに詳しいアドバイスが提示されます。

レポートによるとそらよりブログは「モバイルサイトの処理速度は十分です」とのこと。うん、これで安心です。

さて、冒頭で「そらよりブログの好判定は以前にWordPress内の『.htaccess』ファイルに手を加えていたため」とご説明しました。じつはその対応策が上の画像に表示されています。赤枠の「GZIPでリソースを圧縮する」です。緑のチェックマークがついており「問題なし」とされています。

では「.htaccess」ファイルを変更前の状態に戻したらどのような診断結果となるでしょう。

 

 

スポンサーリンク

 

 

「.htaccess」ファイル変更前の診断結果

そらよりブログの「.htaccess」ファイルを変更前の状態に戻し、再度診断してもらいました。結果はつぎのとおり。

speedcheck02

なんと2秒も遅くなってしまいました。評価も「良好」から「普通」に転落しています。

 

speedcheck03

修正すべき点の筆頭に「GZIPでリソースを圧縮する」が挙げられました。それほど重要な修正部分なのですね。

じつはこの修正方法、とってもかんたんなのです。

 

.htaccessで初心者でもかんたんにスピードアップ

googleで検索すると「gzip」とは概ね「ブラウザに表示するデータの転送量を減らしスピードを上げるための圧縮方式」であるとされています。またそのためのWordPressプラグインがあるそうです。

でもさらに調べていくとプラグインをインストールしなくても「.htaccess」ファイルにコードを追加するだけで手早く「GZIPでリソースを圧縮」できることがわかりました。

これまでご説明してきたとおり、実際に手を加えてみて大成功だったので、その手順を初心者の方向けに詳しくご紹介します。

なお予め以下のツールをご用意ください

 icon-check-square FFFTPなどのFTPクライアントソフト
目的:ファイルをダウンロードするため
※ご契約レンタルサーバーのWebサービスで代替えできる場合があります

  サクラエディタなどの日本語テキストエディタ
目的:ファイルに記述されたコードの変更・追加のため

 

 .htaccessファイルをダウンロード

まず「.htaccess」ファイルをサーバーからダウンロードします。変更を加える前の「.htaccess」ファイルは必ずバックアップを取っておきましょう。

まず「.htaccess」ファイルはつぎの場所にあります。FTPクライアントソフトを使い、サーバーに入りましょう。

 

wordpress_speedup07

最上層にあるドメイン名のフォルダを開きます。

 

wordpress_speedup08

「public_html」を開きます。

 

wordpress_speedup09

「.htaccess」がありました。これをデスクトップにドラッグし、コピーします。変更用と変更前バックアップ用に同じファイルを二つ保存しておきます。

 

 .htaccessファイルにコードを追加

変更用の「.htaccess」ファイルを日本語テキストエディタを使い開きます。

そして次のコードを追加します。

出典:dogmap.jp WordPressサイト用の.htaccess例

追加する場所はここ↓でかまいません。

 

 

AFFINGER4なら①の「# END WordPress」の下です。②のように「AddType~」から挿入します(上の画像では途中で切れていますが、すべての行をコピー&ペーストします)。

そしてこの変更を加えた「.htaccess」ファイルを、サーバー上にドラッグし、上書き保存します。

これだけで「GZIPによるリソースの圧縮」が完了です。このコードを開発されたdogmap.jpさんには心より感謝です。

 

もしも診断結果にお困りでしたら、ぜひ実施されることをおススメします。

 

スポンサーリンク

 

スポンサーリンク

AFFINGER4
稼ぐサイトの設計図-AFFINGER4公式ガイド
【こちらからご購入いただくと公式サイト8500円(税込)が優待特別価格8000円(税込)に!】

 

 

 

 2017年7月4日リニューアル以前の記事内容

 

エックスサーバーなのに10ポイント低下

そらよりブログは2017年3月20日リニューアルと同時に、ロリポップからエックスサーバーへとサーバーの移転を行いました。

移転の理由はこのところの表示スピードの低下でした。記事数が230を超えた辺りから目に見えて表示までの時間がかかるようになったのです。

ためしに「think with Google」で表示スピードをチェックしてみました。その結果がこれ。

 

wordpress_speedup01

 

左の「モバイルとの親和性」は「99」とたいへん良好ですが、「モバイルスピード52」「デスクトップスピード63」とともに「POOR」評価でした。

 

 icon-arrow-circle-down 「think with Google」の使用方法

thinkwithgoogle

出典:think with Google

「TEST NOW」左のブランクにサイトのURLを入力。Enterボタンを押すだけで、診断結果を表示してくれます。

 

表示スピードが遅いまま放置しておくと閲覧者の離脱リスクが高くなりSEO的にもよろしくないといわれています。ここは「貧相」な状態から脱却する必要があります。

今後の記事充実に備えておくのもいまでしょう、ここが潮時と高機能&安定稼働で定評のあるエックスサーバーに乗り換えスピードアップを図ることにしました。

しかし事態は思わぬ結果に!サーバー移設後にチェックしてみると…

 

wordpress_speedup02

 

「モバイルスピード」「デスクトップスピード」が10ポイント近くも下がっているじゃないですか。

 

リソースを圧縮すれば直る

あわてて「PageSpeed Insights」で問題点をチェックしてみました。このサイトはURLを入力すると表示スピードの評価だけでなく改善するための技術的ヒントを日本語で提示してくれます。

 

wordpress_speedup04

 

赤枠の部分に注目です。「修正が必要」な事項で、具体的な方法が列挙されているうちの先頭に「圧縮を有効にする」とあります。さらにその説明文には「gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らす」とありました。

「gzip や deflate を使用」も謎(後述します)ですが、まずは「リソースを圧縮」に注目しました。そうだ、WordPressテーマを変更していたのです!

 

スピード低下の原因はテーマの重さ

そらよりブログではリニューアルを機にWordPressテーマも新しいものに替えていました。以前はSTINGER7でしたがAFFINGER4にグレードアップしていたのです。

念のためテーマのデフォルトのサイズを調べてみてちょっと驚きました。

stinger7 ver20160406
サイズ355KB

affinger4 ver20170307
サイズ2.21MB

なるほど6倍以上重くなっているではありませんか。

でも考えてみれば当然です。格段に機能アップしているわけですから。そしてその機能に惹かれ初めてテーマを購入したのですから。AFFINGER4を責めるわけにはまいりません。

これはなんとしてでも「リソースを圧縮」する必要があります。

ただしここで注意していただきたいのは上記のファイルサイズがそのまま表示スピードに影響しているわけではありません。後述しますが、その一部によるものです。それでもファイルサイズに比例して増加しているはずと仮定すると、やはり手を打つ必要があると考えました。

 

データの転送量をチェック

GIDNetworkの「A simple online web page compression / deflate / gzip test tool」に行き、そらよりブログをブラウザに表示するため実際にどれだけのデータが転送されるのか調べてみました。

wordpress_speedup05

 

①調べたいサイトのURLを入力し「Check」をクリックします。

②まだ圧縮されていないことを示す「No」が表示されます。

③前述のようにaffinger4 ver20170307のサイズは2.21MBですが、実際に転送されるファイルは113041バイトでした。単位を合わせると0.11MBということです。

④かなり少ないと思えますが、それでも2.47秒を要していることがわかります。

 

圧縮を確認

「.htaccess」ファイルの変更により、どれだけ圧縮されたかGIDNetwork「A simple online web page compression / deflate / gzip test tool」でチェックしてみましょう。

wordpress_speedup11

 

「Yes」の表示があります。gzip圧縮が完了しました。113041バイトの転送ファイルが20300バイトに。なんと82%も圧縮されました。

 

 

スポンサーリンク

スポンサーリンク

さらにこんな記事はいかがでしょう(広告があります)



ブログ人気ランキングに参加しています

にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ

おススメ記事

horeizaiinhair 1

  本格的な夏がもうすぐやってきます。みなさん暑さ対策、熱中症予防はどのように工夫していますか。 うちの娘ちゃんによると、ポニーテールが結べるくらいの髪の長さがあれば、かんたんでとってもよい ...

スプレー容器 2

  春夏秋冬、汗っかきさんにとって気を緩めてよい季節なんてありませんよね。朝夕と昼の温度差が激しかったりしようものなら、うっかり服装のチョイスをまちがえ、外出先で大汗をかくということしばしば ...

hoshikata03 3

  家事に手慣れた方ならとっくに実践なさっているかもしれません。でも、一人暮らし初心者や家事が苦手など、まだご存じなかった方のためにシェアします。     ワキが臭くなる ...

デカ容器01 4

  昨晩、終電を逃した人の家までついていきインタビューするテレビ番組を観ていました。人気なのでご覧になった方も少なくないと思います。そこで深夜にもかかわらず娘の帰りを待っていたお母さんが、大 ...

パスワード作成 5

  パスワードがいくつもあって管理できない、と昔から言われ続けていますが、いっこうに改善される気配がありません。 でもパスワードを使う場面はますます増えています。 もしもご自分のパスワードの ...

補色01 6

  夏休みの想い出に友達と撮った記念写真。でも、後ろをふと眺めると壁や茂みにたくさんの人の顔が写っている。心霊写真のお馴染みのパターンですが、さすがに最近はテレビで取り上げることもなくなりま ...

パーティ開け11 7

  ポテチの袋、いつもどうやって開けてますか? 友達やパートナーとシェアして食べるとき、普通に開けたら、開封口の向きが気になって、ちょっと不便ですよね。横から手を入れるのも汚れて面倒。 つい ...

-WordPress, モバイル&PC
-

Copy Protected by Chetan's WP-Copyprotect.

Copyright© そらより , 2017 AllRights Reserved.