WiMAX 2+や格安SIM、Android端末、ダイエット法から住宅情報など、幅広い情報を熱烈発信中。

HAYAMIZ BLOG

AFFINGER

WING AFFINGER 5の表示を速くしたい。スピードアップの方法を紹介 2019年5月

更新日:

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

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

PageSpeed Insights

 

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

 

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

 

前提事項

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

WING AFFINGER5 バージョン20181025 2019年1月10日追記:20190110bで試しています。

ワードプレス バージョン4.9.8

ConoHa WING ベーシックプラン

 

2019年1月10日追記

  • 親テーマ

WING-AFFINGER5バージョン: 20190110b

 

  • 子テーマ

AFFINGER5 JET-Childバージョン: 20181226

 

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

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

 

PC版

 

モバイル版

 

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

 

コンテンツのレンダリングをブロックしているJavaScriptとCSSを排除

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

いろいろプラグインが出ていますが、一番効果的なのが、「Autoptimize」です。

 

Autoptimize

メインタブ

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

 

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

 

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

そして、一番厄介なCSSですが、「CSSコードを最適化」「Aggregate CSS-files?」「インラインのCSSを連結」「すべてのCSSをインライン化」の4か所にチェックを入れます。

 

CSSについては、サイトの規模やサイトデザインで大きくパフォーマンスが異なります。

「すべてのCSSをインライン化」については、説明にもあるとおりサイトの大きさで重くなる可能性もあります。

 

はや
私のブログではパフォーマンスが向上したので、チェックを入れてます!

 

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

 

追加タブ

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

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

 

注目ポイント

上述していますが、WING AFFINGER5バージョン20190110bでは使用していないGoogle Fontsは読み込みを行わなくなりました。これだけで、20から30ポイントは数値が改善されるかと思います。

 

これらを使わずに自分が使いたいgoogle fontsがある場合、テーマからgoogle fontsの削除をしてもかまいませんが今後気分によっては設定したくなる場合もあります。

そこで、レンダリングをブロックさせるGoogle Fontsを後で読み込ませるために、下記の対策を実施します。

 

Google Fontsの項目の「Combine and preload in head (fonts load late, but are not render-blocking)」にチェックを入れることで読み込みを遅らせることが可能です。

 

英語での説明ですが、カッコ内を訳すと「フォントは後で読み込まれます。しかしレンダリングはブロックしません。」とあります。

 

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

保存して終了します。

 

WP Fastest Cacheでブログをキャッシュする

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

WP Fastest Cacheにも似た機能はありますが、CSSやJavaScriptはAutopitimizeが優秀でしたので、そちらで設定をしました。

ブログのキャッシュ設定には定評のあるWP Fastest Cacheを使用します。

 

設定方法は下図のようになります。

 

Preloadをチェックすると、下図のポップアップが開きますので、こちらも図を参考にチェックを入れます。

 

注意事項

WING AFFINGER5をお使いのかたは「モバイルユーザーにキャッシュを表示しない」にもチェックを入れておきます。これをしておかないと、記事下のモバイルアドセンスが重複表示(アドセンス規約違反)されてしまう恐れがあります。

引用元:WordPressの表示スピードを高速化する方法

 

ブラウザキャッシュのチェックを入れても動かない場合、チェックを外し直接.htaccessを設定すると良いです。

 

.htaccessを使ったブラウザキャッシュの設定

WP Fastest Cacheを使ってもキャッシュに関する最適化案がでる場合もあります。

その時は、WP Fastest Cacheでブラウザキャッシュのチェックを外し、.htaccessに直接ブラウザキャッシュに関する設定を書き込みます。

 

設定を始める前に…

.htaccessはブログをどう動かすかにまつわる部分なので、記述を間違えるとサイトが表示されなくなります。事前にバックアップ(記載内容をコピペ)しておくことを推奨します。

 

書き込む内容は下記のとおりです。

すべてをコピー&ペーストして.htaccessファイルに貼り付けます。

<IfModule mod_deflate.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 months" 
ExpiresByType image/jpeg "access plus 1 months" 
ExpiresByType image/png "access plus 1 months" 
ExpiresByType image/x-icon "access plus 6 months" 
ExpiresByType text/css "access plus 1 months" 
ExpiresByType text/javascript "access plus 1 months" 
ExpiresByType application/javascript "access plus 1 months" 
ExpiresByType application/x-javascript "access plus 1 months"
</IfModule>

 

引用元:.htaccessファイルのブラウザキャッシュ設定方法!最適化してページを高速表示させる | CLOUD 9 Works

 

計測

最後に計測をして意図したとおりの結果になったか確認をしてください。

 

モバイル

モバイルの表示スピード結果

 

パソコン

パソコンの表示スピード結果

 

計測前の状況がないので、説得力に欠けますがモバイルは20ポイント数値がアップしています。

 

なお、最適化案についてはまだ改善の余地がありそうですが、とくにJavaScript/CSSの最適化はこれが限界ですね…。

この2つはテーマに関係するphpなのでどこいじっていいかがわかりませんでした。

 

画像についても最適化案がいくつも出ていますが、圧縮すれば問題ないのでここでは割愛します。

 

画像最適化案については、「EWWW Image Optimizer」など画像圧縮プラグインや画像編集ソフトを使って画像を圧縮することでこの辺りは対応できます。

 

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

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

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

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

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

 

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

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

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

 

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

 

再度サイトのスピードを計測します。

見事パソコンも80点越えをすることができました!

 

おわりに

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

テーマによってサイトスピードが違ってきますので、テーマ選びも重要です。

 

そのワードプレステーマは思いどおりに稼げていますか?AFFINGER 5はその上を行くテーマです

  正直なところ、あなたは今のブログで稼げていますか?   「ブログで全然稼げない・・」 「有料のテ ...

続きを見る

 

参考になれば幸いです。

amazonチャージ!

amazonマーケットプレイズで掘り出し物が見つかったけど、支払いはクレジットカード払いのみだったりしますよね・・・。

しかし「amazonチャージ」を利用すればもうあきらめる必要がなくなります!

しかも、チャージするほどポイントが貯まり、お得にお買い物できちゃいます。

スペース

\くわしい内容はコチラ/

amazonチャージの入金方法

関連記事一覧

  • この記事を書いた人
  • 最新記事

はや

20キロの減量に成功した元「顔がまんまる」の現役ネットワークエンジニアです。皆様の疑問に答える一身で日々精進しております。レビュー依頼など執筆依頼は「お問い合わせ」から頂けると幸いです。

-AFFINGER
-,

Copyright© HAYAMIZ BLOG , 2019 All Rights Reserved.