こんにちは、高校生ブロガーのNaokiです(@naoki_blogger)。
「AFFINGER6でサイトってどう高速化するの？」という方に向けて、今回はAFFINGER６でサイトを高速化する方法を紹介します。割とサイトの高速化を僕は極めてきました。
結論から述べると、プラグインを入れなくてもサイトの高速化はできます。1月時点の僕は、プラグインは画像系だけ入れることを推奨しています。理由としては、プラグインも入れた数だけ「他のプラグインと干渉/重くなる」からです。
サイトの速度を証明するデータ
僕はGTmetrixで読み込み速度1秒を切ってます。
またPageSpeed Insightsでは、「モバイル88点/パソコン99点」のスコアを記録しています。
この記事の目的は、プラグインを極力入れずにサイトの高速化を目指しています。記事を読むことでサイトを簡単に高速化出来ますよ。
【プラグインなし】秒速でサイトを高速化する手順
サイトを高速化する方法には、プラグインを導入する方法もあります。最初はプラグインなしでも可能なサイトの高速化方法をいくつか紹介します。
簡単にできるサイトの高速化手順3つ
- SNSの埋め込みをサイトから外す
- AFFINGER6純正の表示速度優先設定を有効に
- ウィジェットやCSSの最適化をする
一つずつやり方を解説していきます。
SNSの埋め込みを外す
SNSの埋め込みをプロフィールから外すだけでもサイトが軽くなります。TwitterやInstagram、その他SNSを設定している方はぜひ実践してみてください。僕は3秒→1.6秒台に入りました。
サイトの表示速度はGTmetrixで測ることが出来ます。
やり方は、Wordpress管理画面にアクセスしユーザー→プロフィールを選択。連絡先情報の下にあるリンク一覧からURLを削除します。
AFFINGER純正の表示速度優先設定を有効に
AFFINGERには「表示速度優先」という設定項目があります。この設定をすると使えなくなる機能がいくつかあります。
という方だけ実行してみてください。
表示速度優先設定で【使用できなくなる主な機能】
- スライドショー機能（ショートコード含む）
- Googleフォント・マテリアルアイコン
- スクロール追尾広告
- コピー機能（SNSボタン）
- アニメーションクラス
- カウントダウン（EX）
- もっと読む（無限スクロール）（EX）
- レスポンシブ（ショートコード含む記事一覧）画像の画質を上げる（EX）
やり方は、Wordpress管理画面にアクセスし、AFFINGER管理を開きます。そのあとSEO項目→一番下へスクロール→表示速度優先(β)を有効化します。
意外と簡単にできます。しかも手っ取り早くサイトを軽くできるので、やって損はないです。
ウィジェットやCSSの最適化をする
サイトを軽くする方法には、２つのやり方があります。
- サイドバーのウィジェットを減らす
- CSSの最適化をする
サイドバーのウィジェットを減らす方法
やり方は、外観→ウィジェットで出来ます。項目をマウスでドロップアウトするか、削除するだけで完了です。
サイドバーはそこまでサイトの表示速度に影響しません。ただブログを開設したばかりの人だと、ログインページがサイドバーに含まれていることがあります。セキュリティー的に危険なので、ログインホームは外しましょう。
CSSの最適化をする
やり方は、外観からカスタマイズ→追加CSSを選択します。
画像のようにCSSのコードがあれば、空白を削除していけば大丈夫です。CSSコードはサイトの表記に影響しますので、分かる方だけでOKです。
【画像軽量化】サイトの表示速度を上げるには画像を軽量化しよう
最近では記録メディアの発達もあり、高画質な画像が多くなってきました。そのため画像だけでも容量を食うことがよくあります。サイトも同じように、無加工のpngなどをアップロードすると記事の読み込みに2〜3秒掛かることがあります。
画像を軽量化するだけでも、サイトの表示速度が素早くなることもあります。そのくらい画像の軽量化は意外と大切です。
今回は2つのプラグインを導入します。
プラグインの導入方法は二種類ありますが、初心者向けに簡単な方法を説明しますね。プラグインの導入方法は、外観の下にあるプラグイン→新規追加を選択。
下記のような画面が出てきたらOKです。
今回は「WebP Express」と「EWWW Image Optimizer」を導入します。
キーワードに前述のプラグイン名を入れていきます。「今すぐインストール」の表記が出てきたら、クリックします。「有効化」をクリックすれば、プラグインの導入は完了です。
それぞれ設定項目や使い方を説明します。
EWWW Image Optimizerの使い方・設定画面
プラグインの管理画面に行ったら、設定をクリックします。
画像にある通り、項目をチェックしていきましょう。
WebP 変換はオフで大丈夫です。
基本の設定に移っていきます。
このあと、画像の一括最適化をしていきます。設定したら保存をクリックしてダッシュボードに戻りましょう。
画像の最適化方法は、メディア→一括最適化から「最適化されてない画像をスキャンする」をクリック。
最適化には数十秒かかります。終わればEWWW Image Optimizerの最適化は終了です。
WebP Expressの使い方・設定画面
設定画面が英語のため、画像に沿って進めることを推奨します。WebP Expressを簡単に説明すると、jpgやpngよりも軽量の次世代画像フォーマットであるWebPに変換するプラグインです。
当プラグインでは、画像の軽量化に数分〜数十分掛かります。設定の方法は、Wordpress管理画面のプラグイン→インストール済みプラグインから「settings」を選択。
設定画面に移ったら、そのまま「Conversion」と書いてあるところまでスクロールします。主にここで画像の軽量化をしたり、変換したファイルを削除できます。
「Bulk Convert」を選択します。
上記のような画面が出てきたら、「Start conversion」をクリック。
注意ポイント
※画像の変換には数十分かかる場合があります。パソコンが重くなるので、当記事とWordpressの管理画面以外のタブは閉じちゃいましょう。
【測ってみよう】サイトの表示速度を確認する方法2つ
サイトの表示速度を確認できるサイトは2つあります。結論から言うと、「GTmetrix」と「pingdom」です。
pingdomの特徴は、計測元のサーバーを7拠点から選べる点です。ただサイトが安定していないことが多々あります。そのためGTmetrixでの計測を僕は推奨します。
GTmetrixの特徴は、「サイトが安定している」「データが多種に渡って分かる」ことです。表示速度のほか、GTmetrix独自のグレードが分かるのも良いところ。サイトの表示速度を測るなら基本、GTmetrixをお勧めします。
さて今回は「AFFINGERの高速化方法」を紹介しました。今回した内容をまとめますね。
- 簡単にできるサイトの高速化手順3つ紹介
- SNSの埋め込みを外す
- AFFINGER6の表示速度優先設定を有効に
- ウィジェットやCSSを最適化する
- 画像の軽量化だけでもサイトの表示速度は上がる
- 画像の圧縮プラグインは「EWWW Image Optimizer」「WebP Express」
- サイトの表示速度計測には「GTmetrix」を推奨
皆さんの参考になると幸いです。以上で終わります。
AFFINGERの関連記事
。 「AFFINGER6でサイトってどう高速化するの？」という方に向けて、今回はAFFINGER６でサイトを高速){kind=link}