ブログの設定方法

AFFINGER5の表示を高速化する方法。すべてプラグインで解決できます! 2021年1月

 

ブログの表示が遅いので、なんとか速くしたい…。どうすればいいの?
相談者

 

こんな疑問を解決します。

 

ブログの表示は早いに越したことはありません。

 

Googleでは読み込み速度がSEOに直接関係するとは明言はしていません。ですが、ユーザーは表示が遅いブログはすぐに離脱します。Googleは滞在時間が低いサイトを嫌うため、表示速度はSEOにとって重要な項目となります。

 

速いは正義!

 

ブログは大きく二つにわけられます。

  • パソコンでみる場合
  • スマホで見る場合

 

ブログの速度は下記のサイトでチェックできます。

 

Google Page Speed Insights

 

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

 

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

 

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

 

ブロガー歴3年が推奨するブログを爆速化する有料プラグイン【世界が変わります】

 

st_af id="23331"]

 

ブログの速度が極端に遅い場合

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

 

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

 

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

 

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

 

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

 

ブログ環境の説明

下記の環境で実施
  • 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をインライン化

 

  • 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」もありますが、ここまでやってしまうと画像に粗が目立ってきます。

 

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

 

st_af id="23331"]

 

AFFINGER5のサイトを高速化するほうほう(まとめ)

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

 

ブログはいくら見た目がきれいでも読まれなければ意味がありません。

 

ワードプレスはテーマによって重いものから軽いものから様々です。

 

AFFINGER5はデザインが美しくなりますが、重くなる傾向にあります。

 

ぜひ、紹介した方法で高速化をしてみてください。

 

最後までお読みいただきありがとうございました。

 

st_af id="23331"]

 

ブログで稼いで時間とお金に余裕を持ちたくありませんか?

ちょっとお試しでWordPressブログを作ってみる

 

あなたは今の給料に満足ですか?

 

ほとんどの人は「ノー」と答えます。

 

もし「イエス」である人はこのページは意味のないものになりますので、そのままページを閉じてください。

 

コロナ禍の時代、いつ収入がなくなってもおかしくはありません。副業を始めようにも本業が忙しく時間なんてほとんどない…。

 

収入が少ないのに朝から晩まで仕事に明け暮れる毎日。楽しいことなんてひとつもありませんよね。

 

まず言っておきますが、あなたが会社のためにいくら頑張ってもこの先いつ首を切られてもおかしくありません。

 

それでも会社についていくというのであれば、ここから先はやはり意味のないページになりますので閉じてください。

 

いや、自分で稼ぐちからもつけておきたい!という人はぜひ読み進めてみてください。

 

今、稼ぐ方法として注目されている副業が「副業ブログ」です。

 

私は本業をこなしつつ副業ブログを運営しています。
はや

 

とは言え「副業 ブログ」で検索すると出てくるのは怪しい情報ばかり…。

  • 毎日10分の作業で月収100万円
  • ワンクリックで毎日数万円の収入
  • 全自動で毎月100万円

 

ブランド物の写真や旅行先で豪遊している写真付きで紹介されている場合がありますが、あれはすべて嘘なのでお気を付けください。

 

副業ブログは自分の持っている知識(情報)を発信して収入を得る仕組みです。

 

副業ブログを始めてから収益が出るまでは道のりは険しいですが、努力を積み重ねるほど成果がでます。

 

私の場合は4年の積み重ねで収益7桁を達成することができました。

 

A8.netでは収益に応じたランクがあり、現在私は「ブラックランク」です。

 

ブラックランクは3か月の収益が50万~299万円の部類になります。

 

 

副業ブログでは「夢」がありますし、月額5万円ぐらいならあなたでも達成することができます。

 

繰り返しになりますが、今の時代、会社に保護される時代は終わりました。

 

いくら成果をだして優秀な人材であっても会社がなくなれば泡と消えますし、いつ肩を叩かれるかわかりません。

 

気づいている人はすでに副業ブログを始めています。

 

月100万円は稼がなくても5万~10万収入が増えるだけでかなり生活に余裕を持つことができます。

 

この余裕とは下記の3つ

  • 時間的余裕
  • 金銭的余裕
  • 精神的余裕

 

この3つの余裕を持つことができればあなたがやりたかったことが思い通りになります。

 

今まで我慢していたことができるようになるってかなり素晴らしいことだとおもいませんか?
はや

 

ただし副業ブログでは条件が2つあります。

 

「行動力」「継続する力」です。

 

人生に余裕を持ちたいと思っているのであれば「今から行動」し、「ブログの運営を続けていく」ことが重要です。

 

あなたの人生を変えるときは「今」です。

 

会社に縛られない余裕ある生活を送りたいのであれば副業ブログは早い方が断然有利です。

 

ここでいう有利とは特定のライバルではなくあなたの今後の人生において有利になる、ということ。

 

あなたのためにブログの作り方を用意しましたので、「収入を増やしたい」「副業ブログを始めたい」という気持ちをお持ちであればまずはブログを作りませんか?

 

ちょっとお試しでWordPressブログを作ってみる

 

ブログの作り方でお悩みのことがあればどんどん質問してくださいね。
はや

-ブログの設定方法
-, ,