【webp革命】ハト でもわかるWordPress【Google Pagespeed Insights 】対策まとめ

サルでもわかるWordPress【Google Pagespeed Insights 】対策ざっくりまとめです

※2021年5月公開

※ 2021年7月更新しました。

※ 2021年8月更新しました。

※Googleの評価基準が読み込み速度から、レイアウトシフトがいかに少ないかに少しシフトしました。なのでcssやjsをfooterで後読み込みにしても、レイアウトが大きく変わる場合、評価が下がりますので注意しましょう。

ファーストビューの読み込みを早くする　2021/08/18追記

loading=”lazy”（遅延読み込み）をプラグインなどで行うのが通常であるが、ファーストビュー部分に遅延読み込みを行うとかえってスコアが下がってしまう。

ファーストビューの判断

さて、難しいのは「ファーストビューに入るか入らないか？」の判断だ。ファーストビューに入る画像を遅延読み込みにしてしまうと、LCPつまり「そのページの主要部分の描画完了」が遅れてしまうからである。ファーストビューに入る画像は優先的に読み込み、それ以外は遅延読み込みというのがLCPを健全に保つためのアプローチだ。

たとえば、この記事のように「ページの上部にアイキャッチ画像がある」という場合は簡単で、アイキャッチ表示のコードに loading="eager" を指定すれば済む。

the_post_thumbnail( 'post-thumbnail', [
    'loading' => 'eager',
] );

しかしながら、WordPressはCMSであり、とくにGutenberg以降のブロックエディターだと、ページ全体がブロックで構成されるようなパターンが増えてくる。この場合、なにがファーストビューかを決めることは原理的に難しい。カバーブロックかもしれないし、画像かもしれない。

https://capitalp.jp/2021/07/08/image-optimization-for-wordpress/

読み込まれているwp-block-library-css の削除（ブロックエディタでないので）2202197追記

ブロックエディタを使用していない場合は、読み込まれているwp-block-library-css の削除を記述します。functionさわれない人はスルーでお願いします。

https://hacknote.jp/archives/48382/

 

グーグルマップやフェイスブック、ツイッターウィジェットに loading=”lazy”を付与する　202197追記

アイフレーム系を後読み込みにします。すぐにでもできるのでオススメです。

iframeもYouTube埋め込みもFacebookボタンも簡単に遅延読み込み。HTMLに14文字追加するだけ

 

画像要素で width と height が明示的に指定されていない対応　　202197追記

画像に直接width と heightを指定して一時的にレイアウトが大幅にずれることを防ぎます。最近の支流になったようです。

画像要素にwidthとheightを指定してCLS改善

 

レイアウトシフトをCSSで改善

CSSの読み込み中にあまりにもレイアウトがずれる箇所をCSSで対応して修正することで数値を上げます。

 

重複記載されているCSSなどを整理する

podision:absoloteとかreativeとか重複してついているとcssの読み込み家庭においてレイアウトシフトが発生しますので手書きで直します。

 

諸々の画像系プラグインがwebp対応しました。

今まではhttaccessなどのファイルを編集する必要があったwebp対応ですが、EWWWなどの画像系プラグインがwebp対応しました。

jsで画像を変換するか、pictureタグで変換するかを選ぶことができます。

pictureタグにした場合画像自体に付与されているクラスが外れる場合がありますので注意しましょう。

 

１画像を最適な大きさにする 【最適なサイズの画像】

バカでかい画像などがないようにしましょう。

※202107補足　webp対応が容易になったので必須の対応ではなくなりました。しかしwebpにする前に大きい画像はサイズを小さくすることは有効です。

メディアフォルダの画像

Imsanityというプラグインで可能です。また次回以降のアップロードは設定したサイズを上限とすることができます。

Imsanity – WordPress プラグイン | WordPress.org 日本語

 

テーマファイルの画像

テーマファイルで使用している画像を確認しましょう、大きい場合は適切な大きさに変更しましょう。

例えばPCのテーマをスマートフォンでそのまま使用している場合、画像が大きすぎる場合がある、スマートフォンの適性サイズは大体750pxです

 

２画像を圧縮する　【適切なサイズの画像】

※202107補足　EWWWがwebp対応しました。最適化をするとwebpを生成します。

 

メディアフォルダの画像

メディアの画像はプラグイン【ewww-image-optimizer】でサクッと行います。

EWWW Image Optimizer – WordPress プラグイン | WordPress …

メディア＞画像最適化　で一括圧縮できます。

 

TOPに表示されている画像

TOPで表示されているものはギチギチに圧縮します、画像圧縮率が高いのは下記のサイトです。

TinyPNG – Compress PNG images while preserving …

メディアにアップした画像が使われている場合は、一個ずつ上記で圧縮しましょう。

 

サブループサムネイル（最近投稿された記事やランキング）画像

サムネイルを表示している場合は無駄に大きい画像を使用しないようにする。（データファイル弄れない方はスルー）

最もベーシックな記述だと以下のようなものがあります・

<?php the_post_thumbnail(ここにデカさ記載); ?>

入力される文字は下記、それらしきところを見つけて適切な大きさにします

the_post_thumbnail(); // パラメータなし -> 'post-thumbnail'
the_post_thumbnail( 'thumbnail' ); // サムネイル (デフォルト 150px x 150px :最大値)
the_post_thumbnail( 'medium' ); // 中サイズ (デフォルト 300px x 300px :最大値)
the_post_thumbnail( 'large' ); // 大サイズ (デフォルト 640px x 640px :最大値)
the_post_thumbnail( 'full' ); // フルサイズ (アップロードした画像の元サイズ)
the_post_thumbnail( array( 100, 100 ) ); // 他のサイズ

テンプレートタグ/the post thumbnail – WordPress Codex 日本 …

 

３適切な拡張子にしてサイズ軽減　【効率的な画像フォーマット】

※202107補足　webp対応が容易になったのであんまり必須の対応ではなくなりました。

画像には拡張子があり、それぞれ特徴が異なります。写真などをpngにするとファイルが大きくなったりしますので改めましょう。

  • 色数の多い写真→JPEG
  • グラフや図など→PNG（PNG-8）
  • 背景透過・色数多め→PNG（PNG-24）
  • 背景透過・色数少なめ→GIF

 

４一部の画像をwebp化してサイズ軽減　【次世代フォーマットでの画像の配信】

※202107補足　webp対応が容易になったのでごちゃごちゃ対応するひつようがなくなりました。

webp（ウェッピー）とは、インターネットエクスプローラー（IE）と一部のsafariを仲間外れにした次世代の画像拡張子です。拡張子は（.webp）です。

webpを紹介しているサイトは、なぜ意味わからんことが書いてあるの？

結論から言いますと、jpg,png形式の画像に対して、webpの画像が用意され、かつwebpが表示できるブラウザの場合に限り、webp画像のアドレスに置換（置き換え）する、という記述の説明になります。

リダイレクト（ここにアクセスしたらあっちにリンクさせる系）の一種でhtaccessというファイルに書かなければいけないことを話しているので、そんなん知らん人には意味わからんことになります。

また各種プラグインでやろうとしていることもその類だと思います。

普通にwebpをシンプルに使いたいのだが

全部webpとかにするんじゃなくて、シンプルに使うことも可能です。

まずWBPへの変換ですが、ウェブからでも可能です。

WEBP変換ツール (jpg、pngとwebpを相互変換) – SYNCER

次にアップロード方法ですが、、、

メディアからアップロードできないのでFTPアップロードは必須になります。

FTP環境がない場合はfile managerという管理画面内からFTPアップロードが可能なプラグインでwebpを使用することができます。

File Manager – WordPress プラグイン | WordPress.org 日本語

IEかsafariのときは、jpgかpng画像を表示しなければいけないので、<picture>タグを使います。

これはレスポンシブサイトでPCとスマートフォンサイトの画像を使い分ける際に、大きい画像と小さい画像を切り替える系のやつです。

<picture>
<source type="image/webp" srcset="Webp画像のURL">
<img src="JPGやPNG画像のURL" alt="">
</picture>

WebPをWordPressで使えるようにする3つの方法【画像変換 …

これで、大規模改修せずとも【次世代フォーマットでの画像の配信】に該当している画像のみの対応でOKです・

 

いちいちFTPからのアップが面倒な人

functions.phpを編集できる人は、下記を追記でアップロード可能になります。
functionはミスったら真っ白になるのでライトユーザーは注意していください。

WebPをWordPressで使えるようにする3つの方法【画像変換 …

function custom_mime_types( $mimes ) {
$mimes['webp'] = 'image/webp';
return $mimes;
}
add_filter( 'upload_mimes', 'custom_mime_types' );

 

５イロイロな要素の読み込みを後回しにする【レンダリングを妨げるリソースの除外】

準備中。。。

jsファイルにdeferを付与する

<script defer src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”>

Page Speed Insightsで0点→96点に上げるために当店がやった …

 

６その他便利プラグイン

  • Flying Scripts by WP Speed Matters Settings
  • plugin load filter　←挙動が怪しいので注意しましょう。

 

※CSSやJSのあと読み込みを行った場合、高さを図るイベントに不具合が発生する場合があるので、その場合は記述に「画像が読み込まれてから」を追記する必要がある

// ページが完全に読み込み終了したら発動
$(window).on('load', function() {
// ～処理～
});

jQueryのready()やload()のタイミングの違い – flatFlag