PageSpeed Insightsで、私が試したスコア改善の備忘録です。人様のブログを読み漁り、自分に適しているものを選択肢して対策しました。参考にしたリンクをまとめです。
Cocoonを使っています。私の記事のヒントから自分のブログに最適なものを見つけて頂けたら幸いです。
私はGoogle AdSenseを外したので、もともとスコアはそれほど悪くはなかったです。
この「はてなブログ」では何も対策しておりません。
こちらのブログで対策しています。（WordPressのテーマ：Cocoon）
▶自分でやってみた｜とらいちゃんのブログ
↑2022年3月22日携帯電話のタブ
- 自己責任でお願いします
- まずはバックアップ
- レンダリングを妨げるリソースの除外
- 使用していない JavaScript の削除
- 画像要素で width と height が明示的に指定されていない 吹き出し Cocoon
- お問い合わせフォームもプラグインなし
- 画像の圧縮とwebp
- PCのCLSの改善：Cumulative Layout Shift Cocoon
- そもそも改善しようとしたきっかけ
- 【おまけ】人様のブログのWordPressのテーマを調べられるサイト
自己責任でお願いします
PageSpeed Insightsの改善については、自己責任でお願いします。
まずは、わいひらさんのCocoon本サイトの記事に目を通しましょう。
▼Cocoonおすすめのサイト高速化
▼Cocoonを利用する上でお勧めしないプラグインまとめ
▼私の導入しているプラグイン
まずはバックアップ
まずはバックアップを取っておきます。
「BackWPup」のプラグイン。設定の見直し、手動バックアップ。
▼参考ブログ
レンダリングを妨げるリソースの除外
私はほとんどプラグインを入れてないので、この記事の方の対策で解決しました。
「子テーマの functions.php にコードをコピペ」
PHPに入力するなんて！初心者なので緊張しましたが、不具合はなかったです。簡単でした。
ダッシュボード→外観→テーマファイルエディタ→Cocoon Child: テーマのための関数 (functions.php)に、参考ブログの方のコードをコピペ
▼参考ブログ
使用していない JavaScript の削除
そもそもこれは何だろう？というのが私のレベルです。
「Flying Scripts by WP Speed Matters」
このプラグインを入れたら解決しました。
5分で解決。
「キャッシュクリアしたほうがよい」と書いてあったブログもあったのですが、何のキャッシュクリアなのかわからなかったです。
Google Chromeなどのキャッシュクリア、もしくは、WordPressのダッシュボードにあるキャッシュクリア。私は両方キャッシュクリアしました。
プラグイン入れるのってちょっと怖いですよね。不具合が起きたらどうしようって。
「Flying Scripts by WP Speed Matters」は、SWELLの人は標準装備されているとか。
たくさんリンクを載せました。内容は似てますがたくさんの記事を読んで理解を深めたほうがよいです。
2022年9月28日追記
このプラグインの影響で、モバイルフッターメニューの「トップへ戻る」や「目次」が機能しなくなっていました。
PC版のトップへ戻るボタンの表示も消えました。
「jquery.min.js」を遅延項目から消したら復活しました。
Twitter情報で助かりました。
▼参考ブログ
▼目次が表示されなくなった方も
画像要素で width と height が明示的に指定されていない 吹き出し Cocoon
cocoon設定のヘッダーの項目に、ヘッダーロゴサイズを入力しました。
吹き出しについてはこれから説明します。
PHPに入力するなんて大丈夫なのか！
初心者なので緊張しましたが、不具合はなかったです。
「カスタマイズコードをfunctions.phpに入力」
ダッシュボード→外観→テーマファイルエディタ→Cocoon Child: テーマのための関数 (functions.php)
▼参考ブログ
お問い合わせフォームもプラグインなし
「Contact Form 7」のプラグインを使っていましたが、この「はてなブログ」でも採用している、
「Googleフォームを利用する」方法を採用しました。
プラグインをひとつ減らしました。
▼参考ブログ。メリットも参考になります。
tosakinblog.comwww.naosan.blog
画像の圧縮とwebp
EWWW Image Optimizerのプラグインが苦手なので自分で圧縮しています。
PCのCLSの改善：Cumulative Layout Shift Cocoon
「おすすめカード」を撤廃したら一気に改善しました。その後、またオススメカードは２つだけ復活させました。
そもそも改善しようとしたきっかけ
search-console（通称：サチコ）です。
ページエクスペリエンスの項目の、グラフの悪化です。
一気に劇的に下がっていくこのグラフに耐えられなかったのです。
そもそも何も改善していないのに、一気に上がったのも謎です。それからの急降下。なぜ急降下したのかもわかりません。
現在は改善されました。
合格したばかりです。
それまでは、PageSpeed Insightsはあまり見ていませんでした。その時は特に問題がなかったのでしょう。
久しぶりに見たら、色々問題が発生していました。
まだまだ改善点はいっぱいあります。少しずつ勉強していきます。
警告: オリジンの https://lifehack4all.com の `font-display` の値を Lighthouse で確認できませんでした。
上記の警告にも対応出来ていません。対策はCocoonのフォーラムで見つけたのですが、難しそうで。
【おまけ】人様のブログのWordPressのテーマを調べられるサイト
▼いつも人様のサイトを調べています。
PageSpeed Insightsのスコア改善するために訪れたブログは、どんなテーマを使っているのか参考になるので調べさせてもらいました。
検索上位のブログでもスコアが悪いサイトもあります。あまりスコアを気にせず中身の充実を目指して頑張りたいですが、気になってしまいますよね。
Googleさんに「不良」とか「失敗」とか「不合格」とか書かれるとつらいですよ。
数日後にグラフも改善してきました。
モバイル↑
