AFFINGER

AFFINGER5のモバイル版の表示を爆速にする方法。すべてプラグインで解決できます! 2020年1月

2019年7月7日

ブログの表示が遅いか速いか気にしたことはありますか?

2018年7月にGoogle Speed Updateが行われたことはブログを書いている人であれば気になる内容だったと思います。

 

速いは正義!

 

はや
とくにモバイル版で影響がでるのですが、表示が速いか遅いかで検索結果の順位に影響がでるというなかなかに恐怖なアップデートですね。

 

下記のURLであなたが運営しているサイトの表示スピードが確認できます。

 

上記のページはGoogleが提供しているサイトで、ブログの表示スピードの結果と改善策を表示してくれるサイトでブログを運営していく上で重要なツールのひとつです。

 

今回今まで気なっていたサイトのスピードが散々な結果でしたので、改善策をみなさんと共有できればと思います。

 

今回は無料のプラグインを3つ使用した速度の改善方法ですが、ひとつのプラグインでより安全にサイトの高速化を図りたい場合はこちらの記事が参考になります。

WordPressを高速化する方法
ブロガー歴4年が推奨するブログを爆速化するプラグイン【ビビるほど速い】

続きを見る

 

注意点

外部へのアクセスが多い(大多数は広告かな)と、PageSpeed Insightsのポイントは上がらない場合があります。

HAYAMIZ BLOGのトップページも、当初外部リンク(Adsenseなど)が多く数値が下がったことがあります。

WordPress Popular Postsを使っている場合、これが原因で読み込みが遅くなることもあります。

 

まずは不要なプラグインの停止、本当に必要なものだけを取捨選択してから当記事の方法を試してみてください。

端折る勇気を!

 

なお、CloudflareなどのCDNを用いるとさらに4~5ポイントほどアップしましたが、常に更新を行うブログではテクニックが必要になりますので、今回紹介しておりません。

HAYAMIZ BLOGの場合、特定の記事の表示が意図するようなレイアウトにならかったりしたため。

 

はや
ブログは速さが正義ですが、安定があってこそのものです。

 

ブログ環境の説明

下記の環境で実施しています。

  • WING AFFINGER5 バージョン :20190504
  • AFFINGER 5 JET バージョン :20190125
  • ワードプレス バージョン :5.2.2
  • XSERVER(エックスサーバー) :X10プラン

 

 

2019年1月10日追記

  • 親テーマ

WING-AFFINGER5バージョン: 20190110b

 

  • 子テーマ

AFFINGER5 JET-Childバージョン: 20181226

 

上記のバージョン以降では、未使用のGoogle Fontsの読み込みを行わなくなりました。

そのため、当サイトのページの表示スピードが、「大幅に仕様変更されたPageSpeed Insights」において劇的に改善されています。

 

パソコン版

 

モバイル版

 

はや
なお、設定方法については以降で紹介していますので、ごらんくださいませ!

 

コンテンツのレンダリングをブロックしているJavaScriptとCSSを排除し、ブログをキャッシュさせる

サイトスピードの表示で一番厄介なものがレンダリングをブロックするJavaScriptとCSSです。

いろいろプラグインが出ていますが、一番効果的で扱いやすいプラグインを使用します。

 

使用プラグインは下記の3つです。

  • Autoptimize
  • W3 TOTAL CACHE
  • Async JavaScript

 

Autoptimize

Autoptimizeはあらかじめ、高度な設定を表示するにしておきます。

図はすでに高度な設定を表示させているため、非表示となっています。図のようになっていれば、OKです。

 

JavaScriptオプションは、「一般的には」チェックを入れますが、後ほど「Async JavaScript」というプラグインで細かく設定をしますので、ここにはチェックを入れません。

 

CSSオプションでは「CSSコードを最適化」「Aggregate CSS-files」「インラインのCSSを連結」「すべてのCSSをインライン化」の4つにチェックを入れます。

HTMLオプションは「HTMLコードを最適化」のみチェックを入れます。

 

  • 上記のAutoptimize設定はAFFINGER5 バージョン20190504の場合の設定ですが、ほかテーマでも有効とは思います。
  • その際は、あなたがお使いのワードプレステーマで独自のCSSやJavaScriptに関する速度調整を行っていないかチェックをしてください。
  • ワードプレステーマとプラグインでも同じ設定をしてしまうと思わぬ誤作動を起こす場合があるためです。

 

最後に「変更を保存してキャッシュを削除」をクリックします。

 

続いて、追加タブをクリックします。

WING AFFINGER5では、Google fontsがデフォルトで設定されています。そのため、フォントを使用する・しない関係なくサイトの読み込みの際、google fontsがレンダリングをブロックします。

 

AFFINGER5ではGoogleフォントを使わない場合、「無効」になるはずなのですが、どうも読み込んでいる形跡がありましたので、Autoptimizeで無効化設定をしています。

「Googleフォントの削除」にチェックを入れます。

絵文字を使うことがないようであれば「絵文字を削除」にもチェックを入れてしまってOKです。

ここでいう絵文字とはFont Awesomeのことではありません。

 

以上で、Autoptimizeの設定は完了です。

保存して終了します。

 

W3 TOTAL CACHEでブログをキャッシュする

Autopitimizeは主にCSSやJavaScript、HTMLの最適化に特化したプラグインです。

ブログのキャッシュ設定には定評のあるW3 TOTAL CACHE(ダブルスリートータルキャッシュと読む)を使用します。

理由は下記の2つです。

  • モバイルページにもキャッシュを有効にすることが可能(WP Fastest Cacheにもあるが有料
  • AFFINGER5にW3 Total Cacheの独自設定が設けられている

 

「Page Cache」にチェックを入れます。

 

「Minify」の項目は無効「Enableにチェックを入れない」にします。Enableは有効という意味です。

CSSとHTMLはすでにAutoptimizeで縮小化の設定をしているためです。

これを使えば「Autoptimize」いらないんじゃない?!となりますが、JavaScriptは詳細に設定をしたいので、ここでは有効にしません。

 

「Data Base Cache」にチェックを入れます。

 

「Browser Cache」にチェックを入れます。

 

Async JavaScriptで非同期、遅延読み込みをさせる

AutoptimizeやW3 TOTAL CACHEにはJavaScriptを小さくしたりする設定はありますが、非同期にさせたり、遅延読み込みをさせる設定ができません。

ワードプレスで使うJavaScriptは読み込みが完了するまで描画をブロックするため、小さくしたりしたところで描画をブロックすることには変わりません。

 

描画がとまるということはブログを訪問してくれた人にとっては画面がいつまでたっても表示されないだけです。

 

はや
いくらブログのデザインが良くても表示されるまでに時間がかかればユーザーは立ち去ります。

 

それを改善させるためには不要な部分は後から読み込ませることが一番です。

Google PageSpeed Insightsでも遅延させることを推奨してきますので、そのように設定をしましょう。

プラグインには「Async JavaScript」を使用します。

 

Async JavaScriptの設定画面で図のように3箇所にチェックを入れいます。

 

「Async JavaScript Method」「jQuery」に図のとおり設定をします。

Methodは「方法」という意味があり、Asyncは「非同期」、Deferは「遅延」という意味があります。

 

「Async JavaScript For Plugins」でAutoptimizeと連携する

Async JavaScirptのおもしろい機能のひとつとして、「Async JavaScript For Plugins」というものがあります。

これは簡単にいうとほかのプラグインと連携することができる機能で、Async JavaScriptが連携できるプラグインがインストールされていればそのプラグインと連携するというものです。

 

Async JavaScriptは「Autoptimize」と連携ができます。

赤枠部分にチェックを入れます。

 

画像圧縮したが改善されない場合

EWWW Image Oputimizerなど使って画像を圧縮しているにもかかわらず画像圧縮を提案される場合があります。

少々強引ではありますが、コツがあります。

計測結果を見ると下記のメッセージがあるの、お気づきでしょうか。

画像圧縮された画像をダウンロードすることができる

 

ここから最適化された画像をダウンロードして、あなたが運営しているサーバーへアップロードすることで画像圧縮の恩恵を受けることができます。

赤枠以外の部分は外部サイトからの引用なので、対策が難しいですが、赤枠で囲った部分は自分のサイト内なので、対策可能です!

ワードプレス内の画像を置いてあるフォルダーへ対象の画像ファイルを置き換えることで圧縮された画像を適用することができます。

 

はや
これはひとつずつ手入力で対応していくので、今後、記事作成していく際、画像の大きさには気を付けていく必要がありますね。

 

今回は紹介する程度にとどめますが、EWWW Image Oputimizerよりもより高画質で高圧縮が可能な、「Imagify」がおすすめです。

無料版では1ヶ月に圧縮できる画像枚数は限られますが、なかなかの効率アップが図れます。

 

はや
わたしは「LITE版」を購入しました。
良い買い物だね!
相方

 

Imagifyでは画像の圧縮レベルが設定できますが、「Nomal」が無難です。「AGGRESSIVE」や「URTLA」もありますが、ここまでやってしまうと画像に粗が目立ってきます。

 

はや
画像は画像作成時に小さなサイズを作成することがデータサイズを抑えるコツです。

 

おわりに

サイト表示のスピードアップはSEO対策にもなりますので、ワードプレス脱・初心者を目指す意味でもぜひ対策してみてください。

ワードプレスのテーマによってサイトの読み込み速度はまったく違います。

 

サイトの読み込みスピードはSEO対策に重要な項目ですので、ワードプレステーマ選びからすでにSEO対策がはじまっているんです。

 

 

参考になれば幸いです。

WING AFFINGER 5

詳しくみて見る

※ブログで稼ぐなら近道しませんか?

 

こんなに便利。3000万回線契約されているWiMAX!あなたはまさか損していませんよね?

タブレットやノートパソコンはインターネットに接続することができるってご存知ですか?

スタバなどのカフェで使えることは知っていても、場所を気にせずどこでもインターネットを使うことができるってことまではほとんど知られていません。

 

これって驚きですよね!

 

あなたはこんなことでモヤモヤとした気分になったことありませんか?

  • 仕事で自宅に帰れない。でもみたい動画があってなかなか見れずストレスが…。
  • スポーツを生観戦したいけど、スマホだと通信制限が気になって…。
  • 車の渋滞中・移動中の退屈しのぎに動画を家族に見せたいけど、通信制限が気になる…。

 

現代人はとても忙しいです。

動画はそんな忙しいあなたにとって手軽に情報を得ることができる近年重要視されているコンテンツです。

ですが、動画はデータが大きいのでスマホやタブレットはすぐに通信量がなくなってしまいますよね。

 

動画は便利で楽しいコンテンツである反面、スマホで思う存分動画を楽しむには敷居が高すぎます。

 

そこで注目されているのが、WiMAXを利用したモバイルルーターです。

モバイルルーターを利用すれば、家はもちろん、外でもインターネットが使えます。

最大の特長は、スマホのような厳しすぎる通信制限がありません。

 

想像してみてください。

 

あなたはモバイルルーターを契約したことで、、、

  • 好きな動画を仕事の合間に楽しむことができる
  • 大好きなスポーツ観戦がリアルタイムでどこでも観ることができる
  • 渋滞中の車内でも子供にアニメを見せることができる
  • 彼女と身を寄せ合ってひとつのスマホで動画を見る

 

楽しいことしか思い浮かびません。

 

「あ~あの動画見たいのに結局観れなかったなー・・。」といった何で自分だけこんな目に・・・といった悲しい気持ちになる必要もなくなります。

 

WiMAXのモバイルルーターは3000万回線が契約されています。

 

はや
わたしもWiMAX利用者のひとりです。

 

ちなみに契約した理由は、ストレスなく動画を見たかったから。

 

家族で外出することが多く移動中なので、どうしても子供が移動中飽きてしまうことが多いんですよね。

そこではじめはスマホで動画を見せていましたが、これが毎月サクッと通信制限に引っかかるんですよね。

 

もうストレスMAXでした。

 

ですが、WiMAXを契約してからは通信量を気にするストレスから開放されて、ここぞと言うとき躊躇せず動画を見せることができています。

 

はや
見せ過ぎにはもちろん注意しています。

 

動画コンテンツが増えてきた今、あなたは通信量を我慢するあまり有益な情報を見逃している可能性があります。

これってすごくもったいないことです。

 

でも、いきなり契約は・・・と、お考えかと思います。

わたしが6年間使用したWiMAXのモバイルルーターの使用感を記事にしましたので、まずはご覧になってみてください。

 

\ 上手なWiMAX選び /

GMO WiMAX公式はこちら

※ベスト・オブ・WiMAX

 

関連コンテンツ

\ あんなメモやこんなメモも!? /
にほんブログ村 IT技術ブログ IT技術メモへ
にほんブログ村
 

\ 応援お願いします! /

-AFFINGER
-,

Copyright© HAYAMIZ BLOG , 2020 All Rights Reserved.