工夫してなんとか

30代後半。平凡な主婦が在宅ワーク、副業、懸賞をして楽しんでいるブログ。ちびっこ娘2人+末っ子長男子育て中。「お金で買えないものは工夫する」という考えの夫と暮らしています。

【Cocoon】PageSpeed Insightsのスコア改善 高速化

PageSpeed Insightsで、私が試したスコア改善の備忘録です。人様のブログを読み漁り、自分に適しているものを選択肢して対策しました。参考にしたリンクをまとめです。

Cocoonを使っています。私の記事のヒントから自分のブログに最適なものを見つけて頂けたら幸いです。

ポイント:一つずつ不具合が出ないか確かめながらやると良い


私はGoogle AdSenseを外したので、もともとスコアはそれほど悪くはなかったです。

この「はてなブログ」では何も対策しておりません。

こちらのブログで対策しています。(WordPressのテーマ:Cocoon)
自分でやってみた|とらいちゃんのブログ

f:id:koarasandesu:20220322140416p:plain

↑2022年3月22日携帯電話のタブ

にゃんハム
ブログトップページのスコアはよいのですが、個々のページはまだまだです。 

 

▶PageSpeed Insights

自己責任でお願いします

PageSpeed Insightsの改善については、自己責任でお願いします。


まずは、わいひらさんのCocoon本サイトの記事に目を通しましょう。

▼Cocoonおすすめのサイト高速化

wp-cocoon.com

▼Cocoonを利用する上でお勧めしないプラグインまとめ

wp-cocoon.com

▼私の導入しているプラグイン

f:id:koarasandesu:20220322114114j:plain
自分でやってみた|とらいちゃんのブログ

まずはバックアップ

まずはバックアップを取っておきます。

「BackWPup」のプラグイン。設定の見直し、手動バックアップ。

▼参考ブログ

レンダリングを妨げるリソースの除外

私はほとんどプラグインを入れてないので、この記事の方の対策で解決しました。

「子テーマの functions.php にコードをコピペ」

PHPに入力するなんて!初心者なので緊張しましたが、不具合はなかったです。簡単でした。

ダッシュボード→外観→テーマファイルエディタ→Cocoon Child: テーマのための関数 (functions.php)に、参考ブログの方のコードをコピペ

▼参考ブログ

使用していない JavaScript の削除

そもそもこれは何だろう?というのが私のレベルです。

f:id:koarasandesu:20220322115125p:plain


「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情報で助かりました。

ポイント:一つずつ不具合が出ないか確かめながらやると良い


▼参考ブログ

tecchanblogs.com

nico-mama.com

11874.click

affilife.sainoa.com

mamakuma.site

onityanzyuku.com

hinakira.com

▼目次が表示されなくなった方も

afdoh.com

画像要素で width と height が明示的に指定されていない 吹き出し Cocoon

cocoon設定のヘッダーの項目に、ヘッダーロゴサイズを入力しました。

f:id:koarasandesu:20220322145857p:plain


吹き出しについてはこれから説明します。

PHPに入力するなんて大丈夫なのか!

初心者なので緊張しましたが、不具合はなかったです。

「カスタマイズコードをfunctions.phpに入力」

ダッシュボード→外観→テーマファイルエディタ→Cocoon Child: テーマのための関数 (functions.php)

▼参考ブログ

nldot.info

お問い合わせフォームもプラグインなし

「Contact Form 7」のプラグインを使っていましたが、この「はてなブログ」でも採用している、

「Googleフォームを利用する」方法を採用しました。

プラグインをひとつ減らしました。

▼参考ブログ。メリットも参考になります。

tosakinblog.comwww.naosan.blog

画像の圧縮とwebp

EWWW Image Optimizerのプラグインが苦手なので自分で圧縮しています。

tinypng.com

lab.syncer.jp

forest.watch.impress.co.jp

PCのCLSの改善:Cumulative Layout Shift Cocoon

「おすすめカード」を撤廃したら一気に改善しました。その後、またオススメカードは2つだけ復活させました。

そもそも改善しようとしたきっかけ

search-console(通称:サチコ)です。

ページエクスペリエンスの項目の、グラフの悪化です。

f:id:koarasandesu:20220322125936p:plain

f:id:koarasandesu:20220322130002p:plain

一気に劇的に下がっていくこのグラフに耐えられなかったのです。

そもそも何も改善していないのに、一気に上がったのも謎です。それからの急降下。なぜ急降下したのかもわかりません。
f:id:koarasandesu:20220322130026p:plain

現在は改善されました。

f:id:koarasandesu:20220322130052p:plain

合格したばかりです。

f:id:koarasandesu:20220322130134p:plain

それまでは、PageSpeed Insightsはあまり見ていませんでした。その時は特に問題がなかったのでしょう。

久しぶりに見たら、色々問題が発生していました。

まだまだ改善点はいっぱいあります。少しずつ勉強していきます。

警告: オリジンの https://lifehack4all.com の `font-display` の値を Lighthouse で確認できませんでした。

上記の警告にも対応出来ていません。対策はCocoonのフォーラムで見つけたのですが、難しそうで。

【おまけ】人様のブログのWordPressのテーマを調べられるサイト

▼いつも人様のサイトを調べています。

www.webtoolss.com

PageSpeed Insightsのスコア改善するために訪れたブログは、どんなテーマを使っているのか参考になるので調べさせてもらいました。

検索上位のブログでもスコアが悪いサイトもあります。あまりスコアを気にせず中身の充実を目指して頑張りたいですが、気になってしまいますよね。

Googleさんに「不良」とか「失敗」とか「不合格」とか書かれるとつらいですよ。

数日後にグラフも改善してきました。

モバイル↑