思う事

ワードプレスのスマホの表示速度を上げるのに疲れました

ブログ制作について何にもわからなかった主婦がわからないまま突っ走って現在、迷走中・・・・。

最初はルクセリタス を使用

立ち上げて当初は無料テーマ「ルクセリタス」を使っていました。

私のような全くのド素人でも気がつくと結構サクサクと検索結果が良くなっていき、表示速度もスマホは80超え、PCは100近い数字をだし、見てくださる方も増えてきて喜んでいましたが欲も出てくるもので

「もっと自分の好きなデザインにしたい、画像をきれいにしたい」といろいろプラグインを入れるようになっていきました。

ネット上に溢れているブロガーさんの情報を片っ端からわからないまま読み漁り、読んだままその通りに。

でもだんだんと不具合が出てきておかしくなってきたので、

またここはド素人。「有料テーマならより快適に作れるかも。」と安易な気持ちでアフィンガー5を購入。

そして今度こそもっと快適に自分の表現できるように作れるかな?と思ったら・・・・・・。

アフィンガー 5を購入

不思議ですね〜、反比例してどんどん最悪な方向に。

検索結果も圏外が増え本格的な巣ごもりサイトになり、スピードも遅くて酷い時はスマホの速度が9

9が出た時はあまりの低速度に気が抜けてしまいましたね〜。

またGoogle Search Consoleのウェブに関する主な指標にあった100以上ずらっと並んでいた緑の良好 URLが0に。

現在はなんとかスピードは40台をウロウロしてます。

 

→2021年の今はやっと、良好URLが全件緑色でクリアしました。

 

(PCのほうは速度も75と悪くはないんですけどね。でも今だに良好URLは0です。)

→こちらも2021年は全て良好になりました。なぜ良くなったのかは不明です。

 

ちなみに同じ有料テーマで作っている方で公式HPにおすすめで載っている方のHPのスピードを測ってみたら・・・・・・。

なんとスマホは26、PCの表示速度も64・・・・・・・・。

家のPCで見ても画面が全部表示されるのに少し時間がかかりました。

(お洒落なHPや凝ったHPを見学しましたが、速度が遅いHPが多かった印象です。)

でも検索順位はその方のHPのサイト名で検索すると24位。

もしかして、表示速度って検索結果とあんまり関係ないんじゃない??

と思いましたがどうなんでしょうね。不思議です。

とにかく、

どうして?なんで?
巣ごもりママ

PHPなどファイルにも書き込み、調べ尽くして最善の状態になるように毎日毎日苦戦してきたのに。

2年間ブログを作ってきましたが、毎日毎日トラブル連続でした。

突然わけのわからない状況に涼しい顔をしてエラーを報告してくるので、それに対応するだけでほぼ一日潰れていました。

現在は、なんとか慣れてきました。

 

ふと気がつくと目の前にエラーがある日々

何気なく目の前にあったメッセージパネルをみにいくと、エラーがいろいろあるじゃないですか〜。

え?
巣ごもりママ

ページのリソースの一部を読み込めませんでした、これはbotがページをどう認識するかに影響する場合があります、問題を解決してbotが全て取得できるようにしてください・・・・。

今頃やっとメッセージパネルという存在に気がつく私です。

そっか、そもそもbotさんが我が家に入れないように私が設定してしまってるのか〜。

PCに夫が入れてるセキュリティソフトかな?

botさん関係は私がいじるとPCを真っ白、もしくはエラーページを出してしまうのでここは夫に任せようと決めました。

ワードプレス、無料テーマ、有料テーマという言葉を昨年覚えたばかりですが、

初心者には無理です。

精神的にギリギリの状態です。

はてなブログ等にしておけばよかったと正直思っています。

一つだけ良いこともありました。

CSS、html、PHP、Google関連など日々勉強になりごくわずかですが知識は増えています。

シンプル イズ ベスト

サイトのスピードに関してはデザインなど省けるものは省いたり、プラグインを削除したりとしていますがなかなか改善されません。

画像  圧縮、数、サイズも減らしました。

webフォント   速度が遅くなるので削除。

SNS   SNS関連を載せると遅くなると知り削除。

アニメーション  削除。(その後広告動画は増えてますね・・・)

 

昨日は「これだけでブログは作れる!検索も圏外から脱出!」「これだけやれば大丈夫!SEO」というような本も買ってその通りにしていっていますが良くなりません。

息子は今まで一切挫折を知りませんが、私は紆余曲折いろいろ体験し挫折しまくってます。

親子でこの両極端な人生は悲しみを通り越して面白いです。

 

私はブログ作りで「シンプル イズ ベスト」という言葉を覚えました。

悲しいですが、シンプルにすればするほど速度は上がっていくようです。装飾関係、画像など凝るのはもうやめました。

ディベロッパーツールで確認するとSEOは92スコア出てました。アフィンガー5のテーマはSEOは良いようです。

スマホも私にとっては超憧れの黄色い数字、50。まだ一瞬しか出ませんけど常時出るようになったらいいなあ。

 

→2021年の今は、スマホでやっと48〜52が出るようになりました。

 

閲覧時のサイト横幅もGoogle基準の980pxに変更。

ちなみに私が使っているプラグインは、

Autoptimize

表示速度に関するプラグインはこれしか入れてません。

巣ごもりママ
意味がわからず入れてました

EWWW Image Optimizerは入れるとなぜか遅くなるので省きました。

現在入れている表示速度改善系プラグイン

Async JavaScript

Autoptimize

Imagify⇒画像圧縮プラグイン。思い切って購入。全部圧縮して85%もまだ余裕あるので購入してよかった。Photoshopで先にweb用に保存にして圧縮したものをImagifyでwebp化する以外に使っていない。

Cache Enabler使っていたが、エックスサーバーのXアクセラレーター2と相性が合わないのか、トップページのタイトルが消えることが時々あり削除。

 

以前w3 total cache を使っていましたが、アドセンス審査合格の後、広告をはると急激にスピードが低下したので削除しました。

Cache Enablerは設置するだけですごく簡単なプラグインです。コツがあるそうで、一度キャッシュしてからが効果を発揮するみたいです。

 

実際にGoogleのPage Speedで速度を測る時は

  1. Autoptimizeの設定の一番下にある、「変更の保存とキャッシュの削除」を押すか、ワードプレス管理画面の一番上にあるAutoptimizeの「キャッシュを削除」を選んで消す
  2. ブラウザのキャッシュも削除
  3. ブラウザから自己HPの表示を消す
  4. サーバーのキャッシュをする

そこからPage Speedで速度を測ると、スマホは52と上昇。

でも、広告貼ってると速度が上がりにくいです。

エックスサーバーのXアクセラレーターを使う時はキャッシュ系プラグインはバッティングすることが多いので控えた方が良いそうです。サーバーのブラウザキャッシュ設定も時々押して使うと速度が早くなります。

AutoptimizeはXアクセラレーター2と相性は悪くないそうなので使っています。

ランキング系プラグインを変更、そして削除へ

ランキング系プラグインを変更し、CSSとHTMLを加えました。WPPは遅くなるそうです。

最初はWordPress Popular PostsからSimple GA Ranking

画像はPhotoshopweb用に保存を選んでjpegで低画質や中画質の画質に変えて画像の縦横のサイズも変えて保存するようになってから速度が改善されてきました。

枚数が多い時は複数ファイルをバッチ処理したりしてます。

(※現在は圧縮は主にPhotoshopでしてからImagifyでさらに圧縮できたらする感じですが、Imagifyをほとんど使わず済んでいます。)

プラグインなしで何度かランキング系をいじってみましたが、画面真っ白になったりおかしくなったりするので現在はやめています。

 

→現在は「ランキングは要らない」と言う方のアドバイスを信頼してランキングプラグインを削除。

ランキングの代わりに、「おすすめ」「更新」として読んでもらいたい記事を自分で選ぶようにしました。

 

プロブロガーさんのHPを少し拝見。

トップページのメインページには広告を貼っていない(サイドバーには貼っている)方が多かったので参考にしました。

考えた挙句、トップページの広告を一つだけ削除。

 

サイドバーにGoogle検索を使っていましたが、「検索窓はほとんど使われない」らしいのでアフィンガー5の普通の検索窓に変更。

本当は検索窓も削除したいのですが、私のHP作りが雑多で整理整頓できてないので見る方が探すのが大変かなと残すことにしました。

 

Squoosh   webp画像も圧縮できるGoogleが開発したツール

その画像をさらに圧縮できそうな時、Squooshを使っています。

Squooshを使うようになってやっと黄色いラインがモバイルでも見れるようになりました。

中に書き込んだりとか書き換えたりしたこともあるのですが、なんせド素人なのですぐ真っ白かエラー表示出るんですよね。

それが怖いので今は中をいじるのはやっていません。

プラグインもほとんど使ってない物は思い切って削除したりしてますが。

あとは画像の枚数を減らすことしかできないので、1ページに1枚もしくは0枚にしようかと考えていますが、気がつくと3枚、4枚と増えています。

巣ごもりママ
文章で勝負しなさいということなんでしょうね〜きっと

 

→現在はPhotoshopの「web用に保存」を使い、Imagifyでwebp化しています。

 

PageSpeed Insightsの第三者コードの影響を抑えてください

プラグインAutoptimizeの追加を選ぶとサードパーティのドメインに事前接続するのところに、この第三者コードに挙げられているURLをコピペ。

書き込みましたがあんまり改善されず。うーんなんでかなあと達人HPを見学。

reCAPTCHAを読み込むので遅くなる?

そーなんだ〜とその方の通りに。

お問い合わせのページを利用する時だけreCAPTCHAを読むように書き込むそう。

スラッグ(ページの名前)がcontactでそのまま同じだったので文言をfunctions.php にコピペさせてもらいました。

すると、スマホで初めての86!!

pagespeed-insightsで初めての86

巣ごもりママ
嬉しいです〜いきなりの86!

あとはプラグインを使わず目次を書き込んだりといろいろ改善しないといけないところがまだまだたくさんありますが、やっとイエローゾーンに常時居れることが増えたので嬉しかったです・・・・・。

しかし。

Autoptimizeの機能を使ってなんとか改善

その後アフィリエイト、Google広告を貼ったり画像も増えてスマホの速度も40台に激減。

もう少し上げたいとプロブロガーさんのHPを検索しまくり、なんとか理解しました。

Autoptimizeの追加のところにある「サードパーティのドメインに事前接続 (上級者向け)」と「リクエストの事前読み込み (上級者向け)」を使います。

事前接続にはドメイン(.comとか)のみを記入。事前読み込みにはドメインだけでなく詳細なアドレス(.com/・・・jsとか)を記入。

事前接続の方はページスピードインサイトの第三者コードに記載されている青いサイト名を右クリックして「リンクのアドレスをコピー」を選んでコピー。

事前読み込みに載せるほうは青いサイト名の下に並んでいる黒い文字のアドレスの方を右クリックして同じくコピー。

(不具合が起きるかもしれませんので試される場合は自己責任でお願いいたします。)

私の場合は事前接続だけ載せても変化なしだったので、事前接続のほうはブロック時間が0以上のものを全部書いて、事前読み込みのほうはCDNのajax.googleapis.com、Google/Doubleclick Adsのgoogletagservices.comだけにしておきました。

これでキャッシュをしてから試してみると、やっとPCは96とか出るようになりましたが、スマホは56です。

でもやっとなんとかスマホが赤色から黄色に安定してきたので一旦スピード改善はお休みしています。

 

プラグインを次々削除

BackWPup

バックアップはサーバーでとってくれてるので要らないなと削除。FTPでもできるそうですがやり方を覚えていません。(削除は自己責任でお願いいたします・・・・)

Ps auto sitemap

HTMLサイトマップ自動作成するプラグインを削除→functions.phpにサイトマップ用ショートコードのコードを達人HPでコピーさせてもらったものをペースト。あとは固定ページにショートコードを書くだけ。

有料目次プラグイン

削除。(購入したのですが極小サイトでは必要なかったです)→有料テーマにそのままついてる目次タグですぐ設置。簡単。

プラグインを削除すると劇的にスマホの速度が上がりました。

一部のページをAMP化

有料テーマに元々ついているのでそれを使用。

あと、Amazonのアフィリエイトが貼ってあるとAMP化できないので、AmazonのAMP用にfunction.phpにHTMLを記入。

「AMP化 Amazon」で検索してベテランブロガーさんのを参考にさせてもらいました。

このAmazonAMP化でやっとスマホの速度が48〜52の間になりました。

 

Googleアドセンス、楽天、Amazonの広告はスマホの表示速度が遅くなるのでこの辺りをどう改善するかで表示速度が改善するんでしょうね・・・・。

 

有料テーマはアフィンガー5を使っていますが、SEOに関して効果を発揮していると思います。Googleクロームの拡張機能、Lighthouseで数値を測るとスピードは遅いですが、SEOは90点と緑色でした。私はGoogleの構造化支援ツール等使ってマークアップ以外特別何もしていませんのでその点はすごくよかったなと思っています。(アフィンガー5にも構造化データ設定があるようです。)

Google AdSense審査通過後設定を変えてみたら

Googleアドセンスの審査を通過してから、広告を配置ししばらく1ページ1カラム、メニューのカテゴリー数も整理整頓せず適当にしていたのですが、スマホスピードがなかなか改善されず時間だけが経過していました。

プロブロガーさんのアドバイスを見てPHPもコピペ等して、微小ながら改善。

ふと、「1カラムにしてると広告サイズも自動で大きくなるから遅くなるんじゃない?メニューも多いと速度落ちるんじゃない?」と思い、2カラムに変更、メニューも「外出」「旅行」「お出かけ」と同じ内容を一つにして削除してみました。

するといきなりのスマホ52。

スマホのpagespeed

この数字も一瞬です、すぐに30〜40へと降下します。そのつどキャッシュするとこの数字が復活します・・・・。

画像圧縮とか数減らしとか頑張ってきたけどそこだけじゃなかったんだと思いました。

メニューの階層が深過ぎないのも良いのかもしれませんね。

 

現在はページスピードを上げることは諦めて放置しています。

1人、2人とポツポツきてくださると「あ〜、読んでくれてる。書いてよかった。」と感じてすごく嬉しいです。

そんな感じで細々と続けられたらいいなあと今は思っています。

  • この記事を書いた人

巣ごもりママ

乳がんになりブログを始めた主婦です。(ASD・ADHD有り) 公立中学から進学した息子の幼い頃〜高校生の現在と大学受験の事が主な内容です。 遊んでいた知育玩具や問題集、夫の趣味(PC)などのせています。

-思う事
-, ,