AFFINGER6

知ってるようでしらないAFFINGER6でサイトを高速化する裏ワザ

2022-02-02

こんにちは、高校生ブロガーのNaokiです(@naoki_blogger)。

ブログ用_執筆者(改)

 

「AFFINGER6でサイトってどう高速化するの?」という方に向けて、今回はAFFINGER6でサイトを高速化する方法を紹介します。割とサイトの高速化を僕は極めてきました。

 

結論から述べると、プラグインを入れなくてもサイトの高速化はできます。1月時点の僕は、プラグインは画像系だけ入れることを推奨しています。理由としては、プラグインも入れた数だけ「他のプラグインと干渉/重くなる」からです。

 

サイトの速度を証明するデータ

僕はGTmetrixで読み込み速度1秒を切ってます。

2-2GTmetrixのデータ

 

またPageSpeed Insightsでは、「モバイル88点/パソコン99点」のスコアを記録しています。

2-2Pagespeed パソコン 2-2Pagespeed モバイル

 

この記事の目的は、プラグインを極力入れずにサイトの高速化を目指しています。記事を読むことでサイトを簡単に高速化出来ますよ。

 

【プラグインなし】秒速でサイトを高速化する手順

サイトを高速化する方法には、プラグインを導入する方法もあります。最初はプラグインなしでも可能なサイトの高速化方法をいくつか紹介します。

 

簡単にできるサイトの高速化手順3つ

  • SNSの埋め込みをサイトから外す
  • AFFINGER6純正の表示速度優先設定を有効に
  • ウィジェットやCSSの最適化をする

一つずつやり方を解説していきます。

SNSの埋め込みを外す

SNSの埋め込みをプロフィールから外すだけでもサイトが軽くなります。TwitterやInstagram、その他SNSを設定している方はぜひ実践してみてください。僕は3秒→1.6秒台に入りました。

 

サイトの表示速度はGTmetrixで測ることが出来ます。

 

やり方は、Wordpress管理画面にアクセスしユーザー→プロフィールを選択。連絡先情報の下にあるリンク一覧からURLを削除します。

連絡先情報_URL

AFFINGER純正の表示速度優先設定を有効に

AFFINGERには「表示速度優先」という設定項目があります。この設定をすると使えなくなる機能がいくつかあります。

ともる
本当に表示速度を極限まで速くしたい!

という方だけ実行してみてください。

 

表示速度優先設定で【使用できなくなる主な機能】

  • スライドショー機能(ショートコード含む)
  • Googleフォント・マテリアルアイコン
  • スクロール追尾広告
  • コピー機能(SNSボタン)
  • アニメーションクラス
  • カウントダウン(EX)
  • もっと読む(無限スクロール)(EX)
  • レスポンシブ(ショートコード含む記事一覧)画像の画質を上げる(EX)

やり方は、Wordpress管理画面にアクセスし、AFFINGER管理を開きます。そのあとSEO項目→一番下へスクロール→表示速度優先(β)を有効化します。

affinger_表示速度優先(β)

意外と簡単にできます。しかも手っ取り早くサイトを軽くできるので、やって損はないです。

 

ウィジェットやCSSの最適化をする

サイトを軽くする方法には、2つのやり方があります。

  • サイドバーのウィジェットを減らす
  • CSSの最適化をする

サイドバーのウィジェットを減らす方法

やり方は、外観→ウィジェットで出来ます。項目をマウスでドロップアウトするか、削除するだけで完了です。

affinger_サイドバーの高速化

 

サイドバーはそこまでサイトの表示速度に影響しません。ただブログを開設したばかりの人だと、ログインページがサイドバーに含まれていることがあります。セキュリティー的に危険なので、ログインホームは外しましょう。

 

CSSの最適化をする

やり方は、外観からカスタマイズ→追加CSSを選択します。

affinger_cssの最適化

画像のようにCSSのコードがあれば、空白を削除していけば大丈夫です。CSSコードはサイトの表記に影響しますので、分かる方だけでOKです。

 

【画像軽量化】サイトの表示速度を上げるには画像を軽量化しよう

最近では記録メディアの発達もあり、高画質な画像が多くなってきました。そのため画像だけでも容量を食うことがよくあります。サイトも同じように、無加工のpngなどをアップロードすると記事の読み込みに2〜3秒掛かることがあります。

僕もブログ初心者の頃、画像を軽量化せずに投稿してました。その結果、記事の読み込みが遅くなって「サイトの表示速度が2〜3秒」掛かっていた過去があります。
なおき

 

画像を軽量化するだけでも、サイトの表示速度が素早くなることもあります。そのくらい画像の軽量化は意外と大切です。

 

今回は2つのプラグインを導入します。

プラグインの導入方法は二種類ありますが、初心者向けに簡単な方法を説明しますね。プラグインの導入方法は、外観の下にあるプラグイン→新規追加を選択。

 

下記のような画面が出てきたらOKです。

affinger_プラグインの追加

 

今回は「WebP Express」と「EWWW Image Optimizer」を導入します。

キーワードに前述のプラグイン名を入れていきます。「今すぐインストール」の表記が出てきたら、クリックします。「有効化」をクリックすれば、プラグインの導入は完了です。

 

それぞれ設定項目や使い方を説明します。

EWWW Image Optimizerの使い方・設定画面

プラグインの管理画面に行ったら、設定をクリックします。

affinger_ewww image optimizerの設定

 

画像にある通り、項目をチェックしていきましょう。

ewww image optimizerの設定2

 

WebP 変換はオフで大丈夫です。

ewww image optimizerの設定3

 

基本の設定に移っていきます。

ewww image optimizerの設定4

このあと、画像の一括最適化をしていきます。設定したら保存をクリックしてダッシュボードに戻りましょう。

 

画像の最適化方法は、メディア→一括最適化から「最適化されてない画像をスキャンする」をクリック。

affinger_ewww image optimizerの設定5

最適化には数十秒かかります。終わればEWWW Image Optimizerの最適化は終了です。

 

WebP Expressの使い方・設定画面

設定画面が英語のため、画像に沿って進めることを推奨します。WebP Expressを簡単に説明すると、jpgやpngよりも軽量の次世代画像フォーマットであるWebPに変換するプラグインです。

 

当プラグインでは、画像の軽量化に数分〜数十分掛かります。設定の方法は、Wordpress管理画面のプラグイン→インストール済みプラグインから「settings」を選択。

WebP Expressの設定

 

設定画面に移ったら、そのまま「Conversion」と書いてあるところまでスクロールします。主にここで画像の軽量化をしたり、変換したファイルを削除できます。

WebP Expressの設定1

 

「Bulk Convert」を選択します。

WebP Expressの設定2_bulk

上記のような画面が出てきたら、「Start conversion」をクリック。

 

注意ポイント

※画像の変換には数十分かかる場合があります。パソコンが重くなるので、当記事とWordpressの管理画面以外のタブは閉じちゃいましょう。

 

【測ってみよう】サイトの表示速度を確認する方法2つ

サイトの表示速度を確認できるサイトは2つあります。結論から言うと、「GTmetrix」と「pingdom」です。

今回ぼくは、GTmetrixを使いました。
なおき

pingdomの特徴は、計測元のサーバーを7拠点から選べる点です。ただサイトが安定していないことが多々あります。そのためGTmetrixでの計測を僕は推奨します。

 

GTmetrixの特徴は、「サイトが安定している」「データが多種に渡って分かる」ことです。表示速度のほか、GTmetrix独自のグレードが分かるのも良いところ。サイトの表示速度を測るなら基本、GTmetrixをお勧めします。

 

さて今回は「AFFINGERの高速化方法」を紹介しました。今回した内容をまとめますね。

  • 簡単にできるサイトの高速化手順3つ紹介
  • SNSの埋め込みを外す
  • AFFINGER6の表示速度優先設定を有効に
  • ウィジェットやCSSを最適化する
  • 画像の軽量化だけでもサイトの表示速度は上がる
  • 画像の圧縮プラグインは「EWWW Image Optimizer」「WebP Express」
  • サイトの表示速度計測には「GTmetrix」を推奨

皆さんの参考になると幸いです。以上で終わります。

 

AFFINGERの関連記事

 

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

なおき|Z世代ブロガー

副業フェスティバルでは、スキルを習得するためのお手伝いをしています。プログラミング学習、Webデザイン学習、ブログ運営など、これからのWeb時代を生き残れるような発信を心がけてます。

18歳のブロガー|シドニーに留学中。16歳の時にNoteを始める→900本近くの記事を投稿。趣味は新しい知識を習得すること。

-AFFINGER6
-, ,

/* LazyLoad for google adsense */