ページの読み込み速度は速いですか？

私のブログはページの読み込み速度が
遅い、改善が必要と判定されていました。

結果、モバイルのスコアが３３→７０に！

実際にどんな手順で行ったのか？
ご紹介します。

表示速度の測定方法

表示速度の測定は簡単。
『PageSpeed Insights』
にアクセスし、計測したいサイトのURLを入力します。

私のブログは改善前、モバイルのスコアが
３３でした…

対策方法

①Webフォントを使用しない

Webフォントとはスマートフォンや
パソコンに入っているフォントではなく

Web上からフォントを読み込みます。

Webフォントのメリットは見やすい事。
デメリットは読み込み時間が遅い事です。

デフォルト以外はWebフォントなので
表示速度に悪影響を与えます。

②アニメーションをオフにする

カーソルを合わせた時のアニメーションを
オフにします。

ここまででモバイルのスコアは
３３→４４になりました！

③画像を最適化する

スマートフォンのカメラ性能向上などに
よって、画像は綺麗になりました。

しかしデータ容量は大きくなりました。

画像は文字に比べてデータ容量が桁違いに大きいので表示に時間がかかります。

表示時間を短縮するために
わざと容量を小さくする必要があります。

オススメのWordPressプラグインは
『EWWW Image Optimizer』です。

画像の劣化は最小限に
最適化してくれるプラグインです。

過去に追加した画像の一括最適化が
できます。

使い方は簡単です。
初期設定のままで使えます。

WordPressメニューの『メディア』から
『一括最適化』を選択します。

最適化ができる画像数が表示されるので
クリックして最適化します。

ここまででモバイルのスコアは
５９になりました！

④画像の読み込みを遅らせる

見ている方がすぐには表示しない
画像の読み込みを『わざと』遅らせます。

すると最初のページ表示が速くなります。

使用するプラグインは
『a3 Lazy Load』です。

使い方は簡単。
インストールして有効化するだけです。

設定の「Lazy Load Activation」内の「Enable Lazy Load」が
ONになっていることを確認しましょう。

ここまででモバイルのスコアが
６６になりました！

⑤Font Awesomeを読み込まない

Font Awesomeとは、Webサイトにアイコンフォントを簡単に表示させることができるWebサービスです。

提供されているアイコンフォントは商用利用可能で、個人のWebサイトやブログに導入できます！

アイコンフォントを表示できて便利ですがデメリットとして読み込みに時間がかかってしまいます。

使用せずに読み込み速度を優先する場合の設定方法は

カスタマイズの『その他設定』内の
『fontawesomeを読み込まない』に
チェックを入れるとFont Awesomeが
無効化されます。

⑥不要なタグを削除する

「head」というサイトの情報が書かれた
HTMLタグの一部があります。

headにはGoogleアナリティクスの計測用や、Googleアドセンスの審査用のタグなどを挿入します。

headに不要なタグがあると、ページの読み込み時間が遅くなってしまいます。

不要になる可能性があるのは
『Googleアドセンス』審査用タグです。

自動広告をオンにしている場合は必要ですが、あなた自身で広告のタグを挿入している場合は不要です。

私の場合は自動広告をオンにしているのでそのままとしました。

⑦JavaScriptやCSSを最適化する

Webサイトは文字や画像以外にもJavaScriptやCSSといったコードを使用して成り立っています。

なのでJavaScriptやCSSも最適化する必要があります。

「そんな難しそうなことできないよ…」
と思ったあなたもこのプラグインを使えば大丈夫！

『Autoptimize』という
WordPressのプラグインです。

Autoptimizeをインストール、有効化したら下記の設定にチェックが入っているか
確認します。

設定画面を開いて「JS、CSS&HTML」のタブを選択します。

1. JavaScriptコードの最適化
2. JSファイルを連結する

にチェックを入れます。

下にスクロールし、「CSSオプション」の下記３項目にチェックを入れます。

1. CSSコードを最適化
2. CSSファイルを連結する
3. インラインのCSSも連結

さらに下にスクロールし、
「HTMLオプション」の「HTMLコードを最適化」のみにチェックを入れます。

さらに下にスクロールし、
「その他オプション」の下記４項目にチェックを入れます。

1. 連結されたスクリプト / CSS を静的ファイルとして保存
2. 除外された CSS ファイルと JS ファイルを最小化
3. 404 フォールバックの使用
4. ログイン状態の編集者、管理者にも最適化を行う

チェックを入れたら
「変更の保存とキャッシュの削除」を
クリックします。

⑧Async JavaScriptを使用する

『Async JavaScript』はJavaScriptを
遅れて読み込むようにしてくれるなど
JavaScriptを最適化するプラグインです。

オススメの設定は下記です。

設定画面を開き、「Settings」のタブを選択します。

「Enable Async JavaScript」に
チェックを入れます。これをすることでプラグインの機能が有効になります。

次に、「Quick Settings」の
「Apply Async」をクリックします。

最後に一番下の「Save Setting」を
クリックして設定完了です。

⑨WP Fastest Cacheを使用する

『WP Fastest Cache』はサーバー上で事前にページを生成し、キャッシュとして保存しておくことで、表示速度を改善してくれるプラグインです。

デフォルトで全ての設定項目がアンチェック状態なので、インストールしただけでは有効になりません。

オススメの設定は下記です。

1. 言語を日本語に設定する
2. キャッシュを有効にする
3. 先読み
4. ログインしたユーザー
5. モバイル
6. 新規投稿
7. 投稿更新
8. Gzip 圧縮
9. ブラウザキャッシュ

最後に一番下の『変更を保存』を
クリックして設定完了です。

⑩サーバーの高速化設定(Conoha WING)

サーバーの高速化設定については、使用しているサーバーで異なります。

私はConoha WINGを使用していますので、例としてConoha WINGの高速化方法をご紹介します。

『WEXALⓇ Page Speed Technology』をONにします。

管理画面のメニュー「高速化」内の
「WEXAL」を選択し、「ON」にします。

「最適化中」と表示されますのでしばらく待ちます。

「最適化完了」と表示されたら完了です。

注意点として、サーバーのキャッシュ設定とは併用できませんが

キャッシュ設定は干渉して不具合の原因となることも多いので、プラグインに任せています。

ここまででモバイルのスコアが
７０になりました！

まとめ

Webサイトの表示速度はGoogleの
「PageSpeed Insights」で
計測できます。

WordPressテーマ「JIN」は初期設定の
ままだと表示が遅いですが、
以下の対策が有効です。

• Webフォントを使用しない
• アニメーションをオフにする
• 画像を最適化する
• 画像の読み込みを遅らせる
• Font Awesomeを読み込まない
• 不要なタグを削除する
• JavaScriptやCSSを最適化する
• Async JavaScriptを使用する
• WP Fastest Cacheを使用する
• サーバーの高速化設定(Conoha WING)

もちろんJIN以外のテーマでも有効です。

あなたの参考になれば幸いです。

アドバイスやご質問がございましたら
ぜひご連絡ください。

投稿 【解決策】JINを高速化！モバイルのスコアを倍にした方法とは？ は 車とバイクの整備情報サイト『ガレージゆい』 に最初に表示されました。

Googleが提供しているプラグイン
『Site Kit』は便利ですよね(^^)

でもエラーが出て、
データが反映されなかったんです…

原因は、最初に別のGoogleアカウントで
Site Kitにログインしていたことでした。

解決した方法をご紹介したいと思います。

Site Kitをリセット

WordPressの管理画面から
Site Kitのダッシュボードを開きます。

ログインしているアカウントを選択し
ログアウトします。

するとこのような画面になります。

このまま再度ログインするのではなく

Site Kitをリセット　して下さい。

リセットを選択すると
このような画面になります。

リセット　を選択して下さい。

改めてログインする

リセットに成功すると
次の画面になります。

『正常にリセットしました。』

の表示を確認し、改めてログインします。

複数アカウントをお持ちの方は
Google AdSenseの管理者になっている
アカウントを選択しログインします。

ここが重要です。

私の場合、ここで間違えて
別アカウントを選択していた
事が原因でした。

アカウントを選択したら
続行を選択し次に進みます。

上の画面が出てくれば
設定を完了　を選択し完了です。

リセットが重要

問題が解決するまで
複数回ログアウト⇛ログインを
試しましたが解決しませんでした。

重要なのは今回ご紹介した
リセット　です。

同じ悩みを抱えている
あなたの助けになれば幸いです。

投稿 Site KitでAdSenseのエラーが！ は 車とバイクの整備情報サイト『ガレージゆい』 に最初に表示されました。