在宅勤務はイセザキモールで

横浜・関内イセザキモール近辺ランチ情報などを

2月からモバイルページエクスペリエンスが悪化FIDの問題を改善する

モバイルページエクスペリエンスが0%に

いつも通りGoogle Search ConsoleにURL登録してと、記事更新後のルーティーンをしていましたところ、ふと何気に左のサイドバー「ページエクスペリエンス」という項目をクリックしてみました。この指標はいったい何でしょう?0%?!2月から急激に低下しています。これは心が折れるでしょう!ちなみに私は、はてなブログ無料版です。

google

こんなのってあり? Google先生どうなってるんですか?

突然でてきて、驚きの下降線!ふざけんなーっと叫びたくなりました。ここからまた、ブログとの戦いが始まるのでした。どうすりゃいいんでしょ。もうすぐブログ開設1年そういえば最初のころにモバイルユーザビリティで文字が小さすぎるダノなんだので苦労していたのを思い出しました・・・・レスポンシブデザインの採用されてるテーマに切替て解決したことを思い出しました。今回はどうなるやら

ちなみに昔の記事はこれです

SEO対策小さすぎて読めなぁぁぁい!モバイルユーザビリティ問題

まずは原因を調べます

サチコ

この辺が怪しいなぁ~

FID の問題: 100ミリ秒 超(モバイル)とな?!なんのこっちゃ140ミリ秒と書いてあるから、遅いって事かな?!→PAGESPEED INSIGHTSというリンクがあるのでポチっクリックしてみました。しかし急になんで遅くなったんだろ?!多分Google神の怒りだな

PAGESPEED INSIGHTSの結果は?

スピード

なにこれ? 凄い数字なんですが・・・・

100点満点中17点こんなに低いとはある意味ショックです。どうすればいいんでしょうか?さらに下にヒントがあります。

解決策

ちゃんと解決策をGoogle先生は出してくれています

解決の詳細について

使用していない JavaScript の削減というのが1番目ですね。まずはこれから着手しましょう!ということで 先生~Google先生!久々の登場ですよ。ググって調べます。

そうするとはてなブログは遅い!とやたら記事が出てきます。(* ̄- ̄)ふ~んなるほど、今まで気にしてなかったけどじゃーどうすりゃいんだよ(# ゚Д゚)となるんですが、いくつか案が出てきて、対策を施しました。コードは拾ったものをコピペです<(_ _)>

・ソーシャルパーツを外す

これはハテナブックマークとかツイートとかLINEのボタンが最初から設定で設置できるのですが、どうもこれが重たいらしいです。でも万が一ボタン押してくれるかもしれないから、設定で消した後、CSSにコードを書いて設置しました。これで軽くなるらしいです。{}デザインCSSにペタペタコピペ

・サイドバーの整理

これも上記内容と同じ感じです。不要な読み込みを減らすという事ですので、最新記事とかを外し、注目記事だけにして画像も小さくして数を5個から3個に減らしました。自己紹介のはてな備え付けボタン(読者になる、Twitter)をHTMLで書き直しました。ブログ村のリンク重いけど外したくないので、PVランキングだけ削除しました。あと、サイトの検索googleバーも使われたことないので削除

・aboutページの設定見直し

読者やブログ投稿日数、記事の数など読み込んでくる設定を外しました

・公開設定

 読者が記事本文の一部を選択したとき、引用ツールを表示するを外しました

・Googleアドセンスの遅延読み込み

これはムズかったですが、CSSのコードを拾ってきて色々やってみました。専門の記事をお読みください<(_ _)>{}デザインCSS

・タイトル画像の張り直し

JPEGを小さくして張り直ししました

・ヘッダーとフッターを非表示

はてなブログさんのツールバーみたいなのをCSSで非表示にしました。読者になるボタンも非表示に変更。{}デザインCSSにペタペタコピペ

・DNSプリフェッチ

これもコードをペタリと貼り付け自分の環境に合わせて修正。張る場所は詳細設定の「<head>要素にメタデータを追加」

それで結果はどうなんでしょ?

いやー色々やりました。即点数がでるから面白くって5日くらい熱心に取り組みました

効果少ない

ガックリ・・期待通りにはなりませぬ

多少効果が出ましたが、50点台には到達できませんでした。正直どれがどう効果が出たのかよくわかりませんし、何回もチェックすると19点とかになったりするので正確にわからんのですわ。あー疲れたし、残念~!!あと、今はもとに戻している下記対策もやってみました。

・CSSの圧縮

・デザインテーマをCSSへの書き出しする

これらはやってみましたが、あまり効果が見えないのと、後からわからなくなりそうなので、とりあえず戻しました。

・はてなスター これはモチベーション維持のために・・・はてブの良いとこだもん

これからどうするか?

google

googleアナリスティックの検索流入状況

ページエクスペリエンスは低下、スピードも20点台ですがGoogleからの検索流入は減ってない状況に気づきました。もっともこれから影響が出てくるのかもしれません。

あと、改善項目の所に小さく書いてあったのですが、パフォーマンス スコアには直接影響しませんと書いてあるのです・・ナニコレ?!もうやることやったし、手が無いのでしばらく様子見する事にします。PROを導入して広告を外すしかないかと思い詰めてましたよ(;^ω^)

ただ古いページをチェックしていて気づいたのですが

古いページは直す必要あるかも?!

結果

ページによって状況が違うんですわ・・

ルートのページではなく、他のページをチェックするとページによっては「オフスクリーン画像の遅延読み込み」「適切なサイズの画像」というチェックに引っかかってます。これは、21年6月9日以前に張り付けた画像は遅延読み込み(lazy load)の設定がかかっていないんです。Σ( ̄ロ ̄lll)ガーンはてなブログはこの日からバージョンアップして対応したようです。と、いうことで、見たまま編集モードを使ってる方は、残念ながら、それ以前の記事は全部画像張り直しするしか、遅延読み込みに修正できないのです。大変だ( ゚Д゚)コツコツやるしかないなこりゃ。張り直しに際しては、PNGはJPGで、はてなフォトの機能で画質を色々確認した結果、70%、600ピクセルでやり直すことにします。これは時間がかかるのでまた、結果を後日ご報告いたします<(_ _)>

なんとなくですが、チェックした古いページも含めた平均とかでスコアリングされているような気がするので、ものすごく足を引っ張っているページの画像を張り直ししていけばよくなるかもしれません。お楽しみに・・・いつになるやら( ;∀;)

First Input Delay (FID)が改善すればいいと思うんですよね~