PageSpeed Insightsで計測後、改善できる項目の中に、『適切なサイズの画像』が表示される場合があります。

改善を行う必要があるので、画像を探して圧縮し画像を投稿画面へ戻す事になります。

では画像はどこにあるの?

どうやって戻すの?

簡単そうでも、わかりにくかったので画像付きで説明していきます。

 

PageSpeed Insightsで計測

PageSpeed Insightsで計測してみましょう。

計測の結果はサイトによって改善できる項目は異なります、

今回のテーマは画像を改善して投稿画面へ戻す事です。

ご自分のサイトを計測してみましょう

サイトURLを入力する(https://△△△△△△△△/)

PageSpeed Insights:https://developers.google.com/speed/pagespeed/insights/

適切なサイズの画像-01

適切なサイズの画像-01

 

画像上から2番目に適切なサイズの画像-0.38
PageSpeed Insightsで適切なサイズの画像の項目がない方は今後の改善の為に覚えておいてくださいね。

 

適切なサイズの画像を確認する

適切なサイズの画像を押します
説明の下に改善できる画像が表示
適切なサイズの画像-02

適切なサイズの画像-02

適切なサイズの画像にして配信する事を推薦しています。
改善するとモバイルデータ量を節約し読み込み時間が短縮できるといっています。
節約とありますが画像の圧縮をする事で読み込み時間がかなり速くまります。
画像を探して圧縮して元に戻せば良いのです。

改善できる項目、適切なサイズの画像を探す

画像URLを確認

適切なサイズの画像-02の画像で画像データを節約したい画像を押します
押すとプラウザchromeの画面に変わって画像のURLが表示されます。
画像の名前をコピーします、画像オレンジ枠の所
参考:期間工公式サイトのご案内.jpg
適切なサイズの画像-05

適切なサイズの画像-05

ワードプレスから画像を探す

画像のURLのコピーができたらワードプレス管理画面にログインしてください。

左側サイドバーからメディアを選択

適切なサイズの画像-06

適切なサイズの画像-06

1、メディア

2、ライブラリー

3、画像のURLを貼り付け検索

4、指定した画像が検索されている事を確認後(圧縮前)

 

画像を改善して投稿画面へ戻す

画像を改善

4-1、画像が確認できたら、ワードプレスからデスクトップに移動します

5、画像を無料WEBサイトで画像を圧縮させます
→こちらで解説しています

投稿画面へ戻す

6、画像を圧縮して最適化後(圧縮後)、
ワードプレスにアップロードしますが
その前に7を実行すること

画像アップロード

画像の圧縮を終えたらワードプレスにアップロードしますがその前に、

適切なサイズの画像-06の7番で元の画像を画像を削除することを忘れないないでください。

一度そのままでデスクトップからワードプレスメディアに移動して見ましたが反応がありませんでした。

ワードプレスで他の方法があればそれで良いと思いますが、
とりあえず削除してから新しく圧縮した画像をアップロードしました、問題なしです。

FFFTPやエックスサーバーのファイルマネージャーを使える方はサーバーへアップロードしてください。

/あなたのサイトドメイン/public_html/wp-content/uploads/2020/09

uploads/2020/09に画像があります。
年/月は画像をアップロードした日になります、投稿画面で月日を確認できます。

7、7の所に完全削除があります、削除してください

注意1、あせらないで!
改善前の投稿画像画像を削除してから、
圧縮後の画像をアップロードしてください。
注意2、投稿記事を確認する、忘れないで!
元の画像を削除していますので投稿記事の画像は消えています
元の画像があった投稿記事に最適化した画像をメディアから追加します。

PageSpeed Insightsで確認する

1枚の画像の最適化でも慣れないと時間がかかります、私の場合は5枚の画像がPageSpeed Insightsで改善が必要となっていました。

『ワードプレスDiver高速化 PageSpeed - 適切なサイズの画像にする』で、5回繰り返しで改善されるのであれば多少の時間のロスは短いと思います。

ワードプレスDiver高速化 PageSpeed - 適切なサイズの画像にする

ワードプレスDiver高速化 PageSpeed - 適切なサイズの画像にする

適切なサイズの画像-04_optimized

適切なサイズの画像-04_optimized

 

PageSpeed Insightsで1枚の画像を圧縮して2ポイントアップです。

スピードアップで数値が小さいのか大きいのか判断基準の1つとしてください。

 

モバイルが上がればPCのスコアも上がりますね。

 

まとめ

適切なサイズの画像の改善は思ったより簡単にできたと思います。

もう一度確認してみましょう。

新規投稿の前にはプラグインEWWW Image Optimizeを使って最適化を行う
  • PageSpeed Insightsで計測
  • PageSpeed Insightsで適切なサイズの画像を確認する
  • ワードプレスから指摘された画像を探す
  • 無料WEBサービスで適切なサイズの画像にする
  • 画像をアップロード
  • PageSpeed Insightsを確認する

pagespeed insightsの判定結果で改善できる項目は早めに対策する事です。

その中でも初心者レベルでも早急に改善できるのは画像です、今すぐ試してスコアアップしてください。

 

参考として現時点のスコア!

改善できる項目の対策中のモバイル判定結果
改善後画像-01

改善後画像-01

 

期間工募集中!
激アツ 情報

期間工最新情報、激アツ
トヨタ期間工が募集再開を始めた!

 

入社祝い金10

 

初回更新手当10

 

経験者手当:最高10

 

年収例425以上可能

 

詳細は別記事で紹介している

 

 

募集、予約面接会場マップ、
他メーカー情報:
当サイトオリジナル

 

 

 

期間工、募集企業名 特典
トヨタ自動社
豊田自動織機 入社祝い金 20
トヨタ自動車九州
スバル 選考参加費 5
ホンダ
日産自動車 入社祝い金合計 :いわき工場 30

追浜工場:入社祝い金5

日産車体 入社祝い金総額 30
日産自動車九州
日産車体九州 入社祝い金等総額 34
オートワークス京都
ダイハツ九州 入社祝い金 10
いすゞ自動車
スズキ
入社祝い金 10
コマツ製作所
シーヴイテック
入社祝い金 15
ジャアトコ
NTN
入社祝い金 20
ブリヂストン
入社祝い金合計 15
住電装プラテック
キャノン
太陽誘電ケミカルテクノロジー
コマツ

 

 

 

スポンサーリンク
おすすめの記事