人気ブログランキング にほんブログ村 主婦日記ブログ 平凡主婦へ

応援お願いします♪

Howto

【JIN 高速表示】改定版、遅いモバイル、Adsenseありで25から84に!

2020/06/04 追記改定しました。
結果、モバイルがアドセンスありで84になりました!
追記した部分はこの緑枠になっています。

初心者モフ子、GoogleさんのPageSpeed Insightsなるサービスを見つけてしまいました。

wordpressテーマ「JIN」はデザインが気に入って購入しました。
特にモバイルのキレイさに惚れてしまったのです。

では私のブログのトップページを計測してみます。
アドセンス広告を表示していて、アドセンス広告の数は

  • モバイルはインフィード広告2つにサイバー1つの計3つ
  • パソコンはインフィード広告3つにサイバー1つの計4つ
モフ美(娘)

初心者だからって、欲張ったわね

記事はアドセンスあり用になっていますが、
下記工程をふんでいけばアドセンスなしのブログでも適用できます。
アドセンスなしの速度画像はこちら

最初の計測は

いざ計測!

パソコンはまあまあですね!ではモバイルは?

え?え?(絶句)

モフ子

さて、どうしたものか。。。

パソコンはいいけどモバイルをなんとかしなくては。

JIN公式を確認したけど

JINのマニュアルではこうなってました。

  • FontAwesomeをOFFにする
  • 画像を圧縮してアップロードする
  • アニメーションをOFFにする
  • 標準フォントを利用する
  • 「Xアクセラレーター」を利用する(現在ロリポップのためロリポップ!アクセラレータ

上記のことはすでにやっています!しかもサーバーは「ハイスピードプラン」!(エックスサーバーのX10プラン相当)

  • 高速化プラグインを利用する
モフ雄

これねー、ここをまず調整しましょう。

プラグインの調整

Compress JPEG & PNG images

私はオンライン画像圧縮ツールを使用してから、wordpressのメディアに上げていたので、圧縮は十分と考えていました。

ですが、wordpressとうのは、用途によって軽いイメージを使用するそうで、1つの画像に対して複数の画像サイズを勝手に作ってくれるのだそうです。すぐにわかる例としてはサムネイルですね。

モフ子

場所によって使い分けてるのねー。

1つの画像に対して複数できる画像に対しても圧縮したい思い、「Compress JPEG & PNG images」を採用。

採用理由は「EWWW Image Optimizer」はあまり圧縮されないからと、現役コーダーだったときにこのパンダのtinypngオンラインサービスは使用していたので。

すでにwordpressにあげちゃった画像も一気に圧縮してくれるので、便利です。ただ上限500枚(複数できるやつもカウントされると思う)

モフ子

ちなみにクレジットカード登録もしました。

結果PageSpeed Insightsでのモバイルでの画像系はだいぶ改善!
しかし、まだ「赤色」の数値のままです。

「Compress JPEG & PNG images」を入れたのですが、
アイキャッチの画像 640×360 のサイズが大きいよ
との指摘あり。

このサイズになっている変換保存されている画像は記事を一覧表示しているトップやカテゴリートップで使用されていました。

FTPソフトで640×360の画像をダウンロード

一度アイキャッチの640×360を全てダウンロードします。

画像がどこに保存されているのかは、PageSpeed Insightsの指摘部分を右クリックすればわかります。

squooshで10kb以下に圧縮

オンラインツールを使用して10kb以下になるように圧縮します。

画像は粗くなりますが、アイコンとしての役割なので、私の場合は軽い方を選びました。(もう少しキレイなのは記事でみてもらえばいいかと)

FTPソフトで640×360の画像をアップロード

圧縮した画像をもとの場所に再アップ!

「サイズをもっと小さくできるよ」とPageSpeed Insightsに言われた場合はこの方法が便利です。

Autoptimize

あくまで私の場合の設定を公開しますと

画像遅延の他のプラグインは使っていないため、「Lazy-load images?」をチェックしました。
Autoptimizeにおまかせ

とりあえず、Googleフォント、絵文字類は削除してみました。

WP Super Cacheは削除

この「WP Super Cache」もJINでそこそこに推奨されていますが、Autoptimizeといっしょに使用しても利点がなさそうなので削除しました。

というか、逆に数値が落ちたりしました

.htaccessに追記

キャッシュ系

これは有名ですが、自分のサーバのwordpressが入っているルートの.htaccessに以下を追記しました。

え、.htaccess追加ってどうするんだっけ?
という方は以下の記事をご参照ください。SSL設定するときに.htaccessを触っているはずです。

WordPressとAdSense WordPressインストールしよう!
3【WordPress&Adsense】wordpressをインストールして自分のドメインをSSL化しよう!レンタルしたサーバーにwordpressをインストールして、独自ドメインのurlをSSL化するまでの説明です。...

設定に追加するのは以下です。コピペで大丈夫です。

追加
ExpiresActive On
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/jpg "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/x-icon "access plus 6 months"
ExpiresByType text/html "access plus 1 days"
ExpiresByType text/css "access plus 1 days"
ExpiresByType text/javascript "access plus 1 months"
ExpiresByType application/javascript "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"

各数値についてはお好みで変更してください。

スクリプトの後読み込み

普通のスクリプト

JINでは左メニューに「HTMLタグ設定」があります。
ここでは

  • <head>内に入れる
  • </body>直前に入れる

の2つがあります。

<head>内に入れてください。
となっているものでも</body>の前に入れます。

htmlの後半で処理するためです。そのためのプラグイン「JavaScript to Footer」などもあるくらいなので、表示してみて不具合がないようなら</body>直前がおすすめです。

たとえばGoogleアナリティクスのスクリプトも後半で問題ないようです。

アドセンス用スクリプト

こちらも</body>直前に入れるのですが、そのままではなく、後読み用のスクリプトを知り合いに書いてもらい入れています。
この後読みでだいぶ改善しました。(配っていいのか友人に相談中)

ここで私はちょっと設定をミスってました。

<script async 
src="https://pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js"></script>

これを設定から全部取り除きました。
後読み用のスクリプトに入っていたので、いらないのだそうです。

このスクリプトについての問い合わせはTwitterのDMで受付ます。

トップページでは使わないスクリプトなど

たとえばトップページには使わないけれど詳細ページには使いたいスクリプトなどはウィジェットに入れて使うなどの方法もあります。

この場合私は「Widget Logic」プラグインを使用しています。

結果はモバイル84!

パソコンの結果は

モバイルの結果は

今アドセンスのインフィード広告を増やして表示していますが、なかなかの結果!
これでもう迷いません!

アドセンス入れなかったらどうなの?

えっとー、モバイル95、パソコン100という結果になってしまいました!

モフ子

悩める~。アドセンス表示しないか、減らそうかな。


この数値見たら迷いますよね。
現在はトップページではアドセンス表示を各々1つ減らしていますので、モバイル65くらいです。(また変えるかもしれませんが(o^―^o))

個人的には84は納得した数字なので、このままの設定でいこうと思います!