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

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

 

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

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

メディアフォルダの画像

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

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

テーマファイルの画像

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

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

 

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

メディアフォルダの画像

メディアの画像はプラグイン【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 日本 …

 

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

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

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

 

4一部の画像を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' );

 

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

準備中。。。

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

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

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

 

6その他便利プラグイン

  • Flying Scripts by WP Speed Matters Settings
  • plugin load filter

 

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

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

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