モバイルページエクスペリエンスが０％に
いつも通りGoogle Search ConsoleにURL登録してと、記事更新後のルーティーンをしていましたところ、ふと何気に左のサイドバー「ページエクスペリエンス」という項目をクリックしてみました。この指標はいったい何でしょう？０％？！２月から急激に低下しています。これは心が折れるでしょう！ちなみに私は、はてなブログ無料版です。
突然でてきて、驚きの下降線！ふざけんなーっと叫びたくなりました。ここからまた、ブログとの戦いが始まるのでした。どうすりゃいいんでしょ。もうすぐブログ開設１年そういえば最初のころにモバイルユーザビリティで文字が小さすぎるダノなんだので苦労していたのを思い出しました・・・・レスポンシブデザインの採用されてるテーマに切替て解決したことを思い出しました。今回はどうなるやら
ちなみに昔の記事はこれです
ＳＥＯ対策小さすぎて読めなぁぁぁい！モバイルユーザビリティ問題
まずは原因を調べます
FID の問題: 100ミリ秒 超（モバイル）とな？！なんのこっちゃ１４０ミリ秒と書いてあるから、遅いって事かな？！→PAGESPEED INSIGHTSというリンクがあるのでポチっクリックしてみました。しかし急になんで遅くなったんだろ？！多分Google神の怒りだな
PAGESPEED INSIGHTSの結果は？
１００点満点中１７点こんなに低いとはある意味ショックです。どうすればいいんでしょうか？さらに下にヒントがあります。
解決の詳細について
使用していない JavaScript の削減というのが１番目ですね。まずはこれから着手しましょう！ということで 先生～Google先生！久々の登場ですよ。ググって調べます。
そうするとはてなブログは遅い！とやたら記事が出てきます。(*￣-￣)ふ～んなるほど、今まで気にしてなかったけどじゃーどうすりゃいんだよ(# ﾟДﾟ)となるんですが、いくつか案が出てきて、対策を施しました。コードは拾ったものをコピペです<(_ _)>
・ソーシャルパーツを外す
これはハテナブックマークとかツイートとかＬＩＮＥのボタンが最初から設定で設置できるのですが、どうもこれが重たいらしいです。でも万が一ボタン押してくれるかもしれないから、設定で消した後、CSSにコードを書いて設置しました。これで軽くなるらしいです。｛｝デザインCSSにペタペタコピペ
・サイドバーの整理
これも上記内容と同じ感じです。不要な読み込みを減らすという事ですので、最新記事とかを外し、注目記事だけにして画像も小さくして数を５個から３個に減らしました。自己紹介のはてな備え付けボタン（読者になる、Twitter）をHTMLで書き直しました。ブログ村のリンク重いけど外したくないので、ＰＶランキングだけ削除しました。あと、サイトの検索googleバーも使われたことないので削除
・aboutページの設定見直し
読者やブログ投稿日数、記事の数など読み込んでくる設定を外しました
・公開設定
読者が記事本文の一部を選択したとき、引用ツールを表示するを外しました
・Googleアドセンスの遅延読み込み
これはムズかったですが、ＣＳＳのコードを拾ってきて色々やってみました。専門の記事をお読みください<(_ _)>｛｝デザインCSSに
・タイトル画像の張り直し
ＪＰＥＧを小さくして張り直ししました
・ヘッダーとフッターを非表示
はてなブログさんのツールバーみたいなのをCSSで非表示にしました。読者になるボタンも非表示に変更。｛｝デザインCSSにペタペタコピペ
・ＤＮＳプリフェッチ
これもコードをペタリと貼り付け自分の環境に合わせて修正。張る場所は詳細設定の「<head>要素にメタデータを追加」
それで結果はどうなんでしょ？
いやー色々やりました。即点数がでるから面白くって５日くらい熱心に取り組みました
多少効果が出ましたが、５０点台には到達できませんでした。正直どれがどう効果が出たのかよくわかりませんし、何回もチェックすると１９点とかになったりするので正確にわからんのですわ。あー疲れたし、残念～！！あと、今はもとに戻している下記対策もやってみました。
・CSSの圧縮
・デザインテーマをCSSへの書き出しする
これらはやってみましたが、あまり効果が見えないのと、後からわからなくなりそうなので、とりあえず戻しました。
・はてなスター これはモチベーション維持のために・・・はてブの良いとこだもん
これからどうするか？
ページエクスペリエンスは低下、スピードも２０点台ですがGoogleからの検索流入は減ってない状況に気づきました。もっともこれから影響が出てくるのかもしれません。
あと、改善項目の所に小さく書いてあったのですが、パフォーマンス スコアには直接影響しませんと書いてあるのです・・ナニコレ？！もうやることやったし、手が無いのでしばらく様子見する事にします。ＰＲＯを導入して広告を外すしかないかと思い詰めてましたよ(;^ω^)
ただ古いページをチェックしていて気づいたのですが
古いページは直す必要あるかも？！
ルートのページではなく、他のページをチェックするとページによっては「オフスクリーン画像の遅延読み込み」「適切なサイズの画像」というチェックに引っかかってます。これは、２１年６月９日以前に張り付けた画像は遅延読み込み（lazy load）の設定がかかっていないんです。Σ(￣ロ￣lll)ｶﾞｰﾝはてなブログはこの日からバージョンアップして対応したようです。と、いうことで、見たまま編集モードを使ってる方は、残念ながら、それ以前の記事は全部画像張り直しするしか、遅延読み込みに修正できないのです。大変だ( ﾟДﾟ)コツコツやるしかないなこりゃ。張り直しに際しては、ＰＮＧはＪＰＧで、はてなフォトの機能で画質を色々確認した結果、７０％、６００ピクセルでやり直すことにします。これは時間がかかるのでまた、結果を後日ご報告いたします<(_ _)>
なんとなくですが、チェックした古いページも含めた平均とかでスコアリングされているような気がするので、ものすごく足を引っ張っているページの画像を張り直ししていけばよくなるかもしれません。お楽しみに・・・いつになるやら( ；∀；)
First Input Delay (FID)が改善すればいいと思うんですよね～
