AFFINGER

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

2019年7月7日

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

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

 

速いは正義!

 

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

 

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

 

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

 

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

 

注意点

外部へのアクセスが多い(大多数は広告かな)と、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)を利用すれば、家でも外でインターネットが使えますし、ギガ数を一切気にせず好きな動画が好きなだけ見れるようになります。

「あ~あの動画見たいのに~・・。」といった悲しい気持ちになる必要はもうありません。

 

今の時代、テレビよりも面白い番組はYoutubeやオンデマンド動画配信サービスであることが圧倒的。

 

スマホの月のギガ数が気になってなかなかみれなかった動画もモバイルルーター(WiMAX)を利用すれば、、、

  • 生でスポーツ観戦がいつでも見れる!
  • 見たい映画がどこでも好きなだけ見れる!
  • オンラインゲームだってどこででもできる!
  • 渋滞中の子供の一時的なあやしにオンデマンド配信アニメを見せる!

 

などなど、ギガ数を気にしていたときとは違い我慢する必要が何ひとつなくなります。

 

月のギガ数を気にしすぎて出来ることをしないなんて控えめに言って、とてももったいないことだと思います。

 

GMOとくとくBBは、キャッシュバックが高額で有名ですが実はそれを上回るキャンペーンがあります。

 

その名は「得の極み」

キャッシュバックを上回る最安値級のキャンペーンなので、今月で終了する可能性もあります。

 

ちょっとWiMAXが気になっていた人は最後のチャンスかもしれない「得の極み」キャンペーン。

 

あき
ぜひお得にWiMAXデビューをしてくださいねっ

 

わたしが長年愛用しているモバイルルーター「WiMAX」の使い勝手や感想、よくある質問をまとめた記事をぜひご参考になさってみてください。

\ あなたも今日からWiMAX! /

GMOとくとくBB 得の極み

※ギガ数制限とはこれでおさらば!

関連コンテンツ

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

\ 応援お願いします! /

-AFFINGER
-,

Copyright© HAYAMIZ BLOG , 2019 All Rights Reserved.