そんな悩みが解決できる記事を書きました。

本記事では、WordPressブログにおけるWebP対応手順を中心に解説します。

意外と簡単にできますので、サイト速度を改善したい方はこの記事を参考にやってみて下さいね。

WebPの対応手順だけ知りたい方は、2章からご覧くださいね。
さっそく解説していきます。

Webとは？

WebP（ウェッピー）とは、Googleが開発した次世代の画像フォーマットのこと。

ファイルの拡張子は、「.webp」となります。

WebPの特徴：ファイルサイズの軽量化が図れること

WebPの最大の特徴は、ファイルサイズの軽量化が図れること。

軽量化によりサイトの表示速度を改善できれば、もちろんSEO対策にも繋がります。

ファイルサイズはどれくらい圧縮されるの？

JPEGファイルと比較して25~34%、PNGと比較して28%小さくなると言われています。

▼実際にJPEGとWebPの比較をしてみましたのでご覧ください。

画像の劣化はまったく分からないにも関わらず、ファイルサイズは80%程度も小さくなっています。

ウェッピーってすごいんだね！

WebPのデメリット：一部のブラウザで非対応

実はWebPには、IEなど一部非対応のブラウザがあります。

これがWebP導入を躊躇してしまう要因だったりします。

それじゃ導入はやめておこうかな…

いえいえ、これから紹介する方法であれば、WebP対応ブラウザならWebP、非対応ならこれまで同様JPGやPNGというような出し分けができますので、ぜひ参考にしてみてください。

さっそく次章より紹介していきます。

WordPressでのWebP対応手順３ステップ解説

WordPressブログであれば、「EWWW Image Optimizer」というプラグインを使えば、意外と簡単にWebP変換を導入できます。

さっそく手順を紹介していきます。

1. EWWW Image OptimizerのWebP変換設定
2. .htaccessを編集
3. 一括最適化

順に説明します。

EWWW Image OptimizerにてWebP変換設定

EWWW Image OptimizerにてWeb変換設定をしていきます。

まずは、EWWW Image Optimizerをインストールしましょう。

▼1.WordPress管理画面の「プラグイン」→「新規追加」より、EWWW Image Optimizerをインストール後、有効にします。

上図はすでにインストール＆有効にしていますが、はじめは「今すぐインストール」になっているはずです。

▼2.EWWW Image Optimizerの設定画面を開いたら、「WebP」というタブを開きます。
そこの「WebP変換」という項目にチェックを入れます。

最後に、変更を保存をクリックして保存ください。

▼3.すると、下図のような怪しげなコードが表示されると思います。それを丸ごとコピーしましょう！

これは、次の.htaccessファイルの編集の際に使用します。怪しいものではないのでご安心を。

【補足】EWWW Image Optimizerそのほかの設定

EWWW Image Optimizerは優秀な画像最適化プラグイン。せっかくなので、そのほかの設定も確認しておきましょう。

と言っても基本的に確認するのは以下の2点くらいです。

①▼基本タブの「メタデータを削除」にチェックを入れる。

②▼変換タブの「変換リンクを非表示」にチェックを入れる。

2つともデフォルトでチェックが入っていたかもしれませんが念のため。

他の項目はデフォルトのままで大丈夫です。

画像遅延読み込みの設定もありますが、そちらは後で紹介します。

.htaccessを編集

次に、サーバーの設定を変更する「.htaccess」ファイルを編集します。

▼1.まずはConoHa WINGにログイン後、「サイト管理」→「サイト設定」→「.htaccess設定」をクリック。

▼エックスサーバーであれば、サーバーパネルにログイン後、「.htaccess」をクリック。

▼.htaccess設定の右側の鉛筆マークを押せば編集できますので、先ほどコピーしたものを貼り付けましょう。
先頭に貼り付けておけばOKかと（元々コードがある場合は、間に追加したりしないように！）。

これで、WebP対応ブラウザならWebP、非対応ならこれまで同様jpgやpngというような出し分けができるようになります。

▼この時点でEWWW Image Optimizerの画面で「PNG」と表示されていたのが、緑色で「WebP」に変わっているはずなので確認してみてください（下図の右下）。

確認できたら、次に進みましょう。
（確認できなければ、設定を間違えた可能性がありますので見直してみてください。）

一括最適化

EWWW Image Optimizerの一括最適化機能を使って、既にサイト内にある画像ファイルをWebP化していきましょう。

▼1.WordPressの管理画面より、「メディア」→「一括最適化」をクリック。

▼2.「最適化されていない画像をスキャンする」を押せば最適化できますが、圧縮は他のプラグインなどで実施済みだよって方は、「WebPのみ」にチェックをいれてから実行してもいいでしょう。

僕はチェックを入れて実行しました。

▼3.最後に、下図の最適化のボタンをクリックします。

▼4.最適化が始まります。完了するまでしばらく待ちましょう。

僕は1時間くらいかかりましたね。

完了すれば以上で終了です。

WebP変換確認

実際にWebP化できているか確認してみましょう。

自分のサイトに行って、F12を押して検証ツールを開きます。

▼Networkタブに行って、「Img」を選択。「Disable cache」にもチェックを入れておくと、キャッシュの読み込みを無効化してくれるので、こちらにもチェックを入れておきましょう。

Typeの欄に「webp」と表示されていればWebPに変換できています！

また、IEで開くとJPGやPNGのままちゃんと表示されているので確認してみてくださいね。

EWWW Image Optimizerなら画像遅延読み込みにも対応可能

▼EWWW Image Optimizerの設定で下図の赤枠にチェックを入れれば、画像遅延読み込みも対応可能です。

上記の設定を行えば、

• A3 Lazy Load
• Autoptimizeの画像遅延設定

などは不要になります。

僕はチェックを入れて、Autoptimizeの画像遅延設定を解除しましたが、このあたりのプラグインの良し悪しは検証しておりませんので、お好みでお願いします。

Compress JPEG & PNG imagesプラグインを導入している方へ

同じ画像圧縮プラグインとして有名な「Compress JPEG & PNG images」を使用している方も多いのではないでしょうか。

しかし、WebPにしたほうが圧縮率が高いですよね～。

なので今後はEWWW Image Optimizerを使っていこうと思います。（パンダ君ごめんなさいね。）

WebP対応手順３ステップ解説 まとめ

いかがでしたでしょうか。意外と簡単にできたのではないでしょうか。

僕のサイトはPageSpeedInsightsのスコア自体はあまり変わりませんでしたが、人によっては大きく改善されるかもしれませんね。

WebP対応でスコアが大きく改善されたよって方は、Twitter（@KoaraCom）までご連絡いただけると助かります。

当サイトではPageSpeedInsightsの項目を基準に、あなたのサイト速度を改善できる施策を多数用意しております。

その他にも簡単に取り組める施策がありますので、サイトが重くて気になる方はトライしてみてください。
>>サイト速度を改善する施策一覧を見てみる。

ちょっと待った！

ファイルサイズが大きいままの画像をブログに載せ続けると、ページの読み込み速度がもろに悪化しますよ！

それに、画像を最適化しないと、Googleの検索エンジンにも評価されませんからね。

そうなの？？
では記事に画像を掲載するまでの手順を教えてください！

本記事では、WordPressのブログ記事に画像を掲載するまでの手順を３ステップで解説していきます。

この記事の内容を実践して頂ければ、SEO対策効果も期待できるので、検索順位も上がる可能性がありますよ。

ご存知のかたも、チェックリスト代わりに読んでみてくださいね。
さっそく解説していきます。

画像の最適化とは？

ブロガーさんにとっての画像の最適化とは、リサイズや圧縮などをおこなうことで、画像を適切なファイルサイズでブログに配置することです。

画像の最適化で得られる効果

画像の最適化により、以下の効果が得られます。

1. Webページの読み込み速度が改善される
2. Googleの検索エンジンにも評価される

Webページの読み込み速度が改善される

画像を最適化することで、画像のファイルサイズが縮小します。
その結果、Webページの読み込み速度が改善されます。

Webページを構成する要素のうち、画像のファイルサイズは大きなウェイトを占めますので、読み込み速度が改善される可能性はじゅうぶんありますよ。

Googleの検索エンジンにも評価される

画像を最適化することで、Googleの検索エンジンにも評価されます。

なので、画像の最適化によりSEO対策効果につながり、検索順位も上がる可能性がありますよ。

最適化を行わないとどうなるの？

それはまさに、ブログを始めた当初の僕ですね…

何も知識のなかった僕は、気にせずそのまま画像をブログにアップロード！

すると、サイト全体がみるみるうちに重くなってしまったんですよね…

あなたもこうなる前に、早めに最適化の手順をマスターしておきましょう。

【画像最適化】WordPressに画像を掲載するまでの手順【３ステップ】

画像の最適化を行い、WordPressに画像を掲載するまでの手順は以下の3ステップでできます。

1. リサイズしよう
2. 圧縮しよう
3. alt属性に画像の説明を記載しよう

ステップ１：リサイズしよう

リサイズツールは、今回は僕も使っているBulk Resize Photosを使います。

これを使って、あなたのブログ記事の横幅サイズに合わせてあげれば、一番無駄がないファイルサイズとなるでしょう。

▼僕の場合は、ブログ記事の横幅の最大が728pxなので、画像の横幅も大体それくらいになるようにリサイズします。

ところで、ブログ記事の横幅サイズなんて知らないんですけど？？

Chromeブラウザの検証ツールを使えばかんたんに分かりますよ。

▼Windowsなら、あなたのブログ記事を開いてから、右クリック→検証を選択後、下図の赤枠のアイコンをクリックします。

▼記事のタイトルにでも矢印キーを合わせれば横幅のサイズが分かります。

おお！これは使える！

調べるのが面倒でしたら、大体700～800pxくらいにしておけば、たいていのブログ記事に対応できるかと。

豆知識その１：アイキャッチ画像サイズについて

アイキャッチ画像だけは、少し大きめの1200×630pxがいいようです。

これは、SNSの中でも一番サイズの大きいFacebookに掲載するサイズに合わせるためです。

ちなみに、このサイズをTwitterに適用すると、上下が15pxずつ見切れる計算になります。
頭の片隅にでも覚えておくとよいかも。

豆知識その２：JPGとPNGについて

画像の拡張子でよく見かけるJPGとPNGの違いについて、ご存知ですか？

写真や風景画などは、JPG。

色数の少ないアイコンは、PNGで。

良く分からなければ、JPGにしておきましょう。

ステップ２：圧縮しよう

圧縮は、WordPressのプラグイン「Compress JPEG & PNG images」を使えばかんたんにできます。

一度設定しておくと、あとは自動で圧縮してくれますので導入しておきましょう。

これで圧縮の準備が整いました。

▼あとは、リサイズした画像をいつも通り、WordPressのメディアライブラリにドラッグ＆ドロップしてアップロードします。
※圧縮は、プラグインが自動で行ってくれますのでご安心を！

Gutenbergエディタをお使いなら、投稿編集画面に直接ドラッグ＆ドロップでもいけますね。

画像ファイルサイズの最適化に関しては、リサイズ→圧縮の2ステップで終了です！

元々の画像のファイルサイズと比べると、明らかに軽くなっているはずです。

ステップ３：alt属性に画像の説明を記載しよう

alt属性ってご存知ですか？

alt属性は、画像を掲載する際のコードに付加するもので、グーグルの巡回ロボット君があなたの記事を評価する際に利用します。

実際、意味のない装飾画像であれば記入不要です。

ただ、判断に困りそうなら基本的にalt属性には、画像の説明を必ず記入すると覚えておいても問題ないでしょう。

どこに記入すればいいの？

コードに直接記入する以外の方法だと、2パターンあります。

1つ目が、メディアライブラリから記入するパターン。

▼WordPressの管理画面より、メディアライブラリを開きます。

▼適当な画像を選択すると、下図の画面が出てきますので、そこの「代替テキスト」と言う欄に書き込めばOKです。

2つ目が、投稿編集画面から記入するパターン。

▼Gutenbergなら、挿入した画像をクリックして、画像設定のAltテキストという所に記入すればOK。

メディアライブラリに記入した内容より、こちらで記入した内容のほうが優先されます。

▼これも検証ツールで確認すると、ちゃんと反映されていることが分かります。
（毎回確認する必要はないですからね）

alt属性に記入する内容について

記入する内容は、記事のキーワードの羅列ではなく、画像を説明する自然な言葉や文章がいいでしょう。

【発展】画像を遅延読み込みさせよう

こちらは発展です。

Webページを開いたときに見えない画像を遅延読み込みさせることで、読み込み速度を改善することができます。

▼詳しくはこちらで解説しています。

オフスクリーン画像の遅延読み込みはAutoptimizeで速攻解決

2020年7月30日

【画像最適化】WordPressに画像を掲載するまでの手順を解説 まとめ

画像の取り扱いを身につけておくだけで、Webページの読み込み速度が改善されるだけでなく、Googleにも評価される記事になります。

リサイズなど面倒ではありますが、のちのち困らないように、この記事で覚えたことを実践してみてくださいね。

あなたのサイトは大丈夫？
▼画像を最適化して、自サイトの読み込み速度を改善しましょう。

【最新版】PageSpeedInsightsの使い方と計測結果の見方を解説

2020年8月1日

オフスクリーン画像の遅延読み込みはAutoptimizeで速攻解決

2020年7月30日

【超簡単】Chrome検証ツールでブログデザインを調べる方法

2020年8月1日

そんな要望に応える記事を書きました。

なるほど。
それなら「Bulk Resize Photos」というツールがおすすめですよ。

ブロガーの方なら記事に画像を載せるために、1枚だけじゃなく何枚もリサイズする必要がありますよね。

そんなときにこのツールはとっても便利なんです。

本記事では、「Bulk Resize Photos」の特徴と使い方について解説していきます。

リサイズツールをお探しの方は、本記事を読んでぜひ使ってみてください。

さっそく解説していきます。

画像リサイズツール「Bulk Resize Photos」の使い方

お先に使い方の説明をしてしまいましょう。

Bulk Resize Photosにアクセスします。

リサイズしたい画像をドラッグ＆ドロップ、または「画像を選択します」より、画像を追加します。
複数追加可能です。

以下の中から機能を選択して使用します。
僕がよく使うものには、★マークをつけています。

• 規模 ★
  画像サイズを%指定でリサイズできます。
• ファイルサイズ
  指定したファイルサイズ以下にリサイズできます。
• 正確な寸法 ★
  高さと幅を指定した寸法でリサイズできます。
• 幅
  幅を指定した寸法でリサイズ。高さは幅のリサイズ分に応じてリサイズしてくれます。
• 高さ
  高さを指定した寸法でリサイズ。幅は高さのリサイズ分に応じてリサイズしてくれます。
• 最長の辺
  最長の辺を指定した寸法でリサイズできます。

あとは、「スタートリサイズ」をクリックすれば、PCのダウンロードフォルダにリサイズした画像がダウンロードされます。

画像リサイズツール「Bulk Resize Photos」の特徴

1. まとめてリサイズできる
2. 設定が保存できる
3. 100%リサイズでファイルサイズの圧縮可能

順に解説します。

まとめてリサイズできる（150個まで）

画像をたくさん追加して、まとめてリサイズできるのが超絶に便利ですね。

ブログに掲載する画像って、たいていは1枚だけではないですし、記事中の画像サイズは同じで良かったりします。

なので、まとめてサッとリサイズしたいときにもBulk Resize Photosは重宝しますね。

設定が保存できる

リサイズの設定画面で設定した内容をお気に入りに保存すれば、次回からはいちいち設定しなくてもリサイズできます。

やり方は簡単でして、下図の①のボタンをクリックするか、Chromeなら②のお気に入りボタンより、この画面をお気に入りに登録すればOK。

よく使う設定をお気に入りに登録しておきましょう。

100%リサイズでファイルサイズの圧縮可能

リサイズツールと言いつつ、画像サイズの圧縮にも使えます。

圧縮とは、画質は若干悪くなりますが、ファイルサイズを小さくすることができます。

使用場面としては、アイキャッチに用いる画像ですね。

アイキャッチは、「Canva」というアプリをよく使っています。

Canvaでアイキャッチ画像を作成するとき、画像サイズは指定済みのため、リサイズする必要はないのですが、規模のサイズ指定を100%にすることで圧縮にも使用できるってわけです。

【番外編】他におすすめのツールは？

Google発のWebアプリ「Squoosh」もおすすめですね（これ、なんて読むんでしょう？）。

このアプリの最大の特徴は、リサイズ、圧縮中の画像の劣化具合を、元画像と比較しながら自由に調整できるところ。

普段は「Bulk Resize Photos」で。
しっかり調整したい画像に限っては、「Squoosh」を使うとよいでしょう。

セキュリティ面は問題ないか？

セキュリティ面は問題ないと言えます。

なので、外部のサーバーにアップロードされたりすることはありません。

確かに、インターネット接続をしない状態でも利用できました。

セキュリティ面についても安心ですね。

ブロガーにおすすめの画像リサイズツール「Bulk Resize Photos」まとめ

最後に、「Bulk Resize Photos」の特徴をもう一度。

しっかり画像の最適化調整したい場合は、「Squoosh」もおすすめです。

とっても簡単そうなので、さっそく使ってみます。

そのほか、WordPressユーザーがブログに画像を掲載するまでの全手順を解説する記事を書いています。

期待してお待ちくださいね。

あなたのサイトは大丈夫？
▼画像を最適化して、自サイトの読み込み速度を改善しましょう。

オフスクリーン画像の遅延読み込みはAutoptimizeで速攻解決

2020年7月30日

Autoptimizeプラグインの設定方法【注意点あり】

2020年7月30日

そんな疑問が解決できる記事を書きました。

たしかに、Twitterのツイートをたくさん埋め込むとページの読み込み遅延の要因となります。

でも、実はツイートの埋め込みコードの一部を削除するだけで、ちょっとした速度改善につながる方法があるんですよ。

かんたんなので、ひとつの記事内にたくさんツイートを埋め込まれている方はやってみてくださいね。

さっそく解説していきます。

【WordPress】Twitterの埋め込み方法

Twitterの埋め込み方法のおさらいです。

ご存知であれば、この章は飛ばしてくださいね。

▼埋め込みたいツイートの右上のアイコンをクリックします。

▼ツイートを埋め込むを選択。

▼コードが生成されますので、CopyCodeをクリックしてコードをコピーします。

あとは、これをブログに貼るだけ。

▼Gutenbergなら、カスタムHTML編集にして貼り付ければOK。

▼出来上がり。

あなたには逃げの選択肢はありますか？

僕も持ち合わせていません。
でも実は逃げのカードが欲しいのです。

逃げと言うとマイナスの印象を持ちますが、
自分にはこんな能力があるから大丈夫と思えるもの。それが欲しいですね。

でもそのためには、
今、攻めないといけないですね🐨🔥

— コアラ🐨サイト速度の解析屋 (@KoaraCom) June 12, 2020

無事埋め込みできましたね。

複数ツイートを埋め込む際の改善策

さて、ここからが複数ツイートを埋め込んでページが重くなった際の改善策になります。

▼記事内に埋め込んだツイートの最後に注目！scriptタグが含まれていますよね？

実は、このコードは記事内で1回だけ実行されればOKです。

これだけです。かんたんでしたね。

このscriptタグは何してるの？

ツイートを載せる際にデザインを整えてくれたりするスクリプトのようです。

すべて削除してしまうとTwitter風に表示されませんので、一つだけ残しておきましょう。

【効果の検証】読み込み速度を検証してみた

試しに、先ほどのスクリプト部分を100回くらい読み込んでみて、Chromeの検証ツールで読み込み速度を検証してみました。

改善前が100回読み込んだ場合。
改善後が1回だけ読み込んだ場合です。

改善前

改善後

すこーし見づらいですが、「Queueing（キューイング）」という欄に注目。

1回だけ読み込んだときのほうが速いですね！

このキューイングという時間は、「スクリプトが読み込まれるのを待っている時間」と考えて頂ければいいです。

なので、改善前に比べて、改善後はすぐに読み込まれているので、ページの表示速度も上がったというわけ。

なるほど～。良く分かりました！

自ブログのサイトスピードが気になる方へ

Googleはコンテンツの質を判断する際に、「サイト速度」も判断基準にしています。

まずはGoogle提供のPageSpeedInsightsでもサイト速度をチェックしてみましょう。

スコアはいかがでしたでしょうか？

Googleさん、わりと厳しめでして、あまり詳しくない方なら、スコア60もあれば上出来かと思います。

▼こんな感じで改善できる項目という欄にずらずらと警告が出てきていますか？

心配ご無用！速度改善できるチャンスです。

改善方法を記事にしておりますので、参考にしてみてくださいね。

＼当ブログですべて解決／

そんな悩みが解決できる記事を書きました。

このように英語で表示されているかもしれませんね。

本記事では、サーバーの初期応答時間を短縮（TTFB）の改善方法として３つ紹介します。

さっそく解説していきます。

サーバーの初期応答時間（TTFB）を短縮するとは？

サーバーの初期応答時間を短縮するとは、「サーバーの処理速度を向上させて、ページの読み込み時間を短縮してくださいね」と言っています。

いま、あなたが見ているWebページって、サーバーに保存されたページを読み込んで閲覧しているんですね。

なので、サーバーの性能があまりに低いと、当然ページの読み込みに時間がかかってしまうというわけ。

しょぼいサーバーは機会損失のもとですね。

サーバーの初期応答時間を短縮（TTFB）の3つの改善方法

サーバーの初期応答時間を短縮（TTFB）の改善方法はこの3つ。

1. PHPのバージョンアップ
2. 時間をおいてから計測しなおす
3. サーバーの引っ越し

順に解説していきます。

PHPのバージョンアップ

PHPをバージョンアップすることで、応答時間を短縮できる可能性があります。

使用しているレンタルサーバーのサイトにログインして、PHPをバージョンアップできるかどうか確認すると良いでしょう。

僕もやってみるとかんたんにできましたので、Xserverでのバージョンアップ方法を次に説明します。

【Xserver】PHPのバージョンアップ方法

Xserverの管理画面にアクセスします。

▼サーバーパネルログインより、ログインします。

▼PHP Ver.切り替えをクリック

▼PHPのバージョンを選択します。今回は、（推奨）となっているPHP7.3.16にバージョンアップしておきました。

かんたんでしたね。

時間をおいてから計測しなおす

つづいて2つめの改善方法。

時間をおいてからPageSpeedInsightsで再度計測してみましょう。警告が解消されることがよくあります。

もちろん、一番負荷がかかるときに遅延しているとよくはないですけどね。

Googleの推奨するサーバーの初期応答時間（TTFB）は、200ミリ秒以下だそうです。

ここからあまりにかけ離れている場合は、次に説明するサーバーの引っ越しを検討してみてもいいかも。

サーバーの引っ越し

やっぱり根本から解決したい！という場合は、サーバーの引っ越しですね。

僕は、国内最大手のレンタルサーバーであるXserver（エックスサーバー）を利用しています。

今のところ不自由なく使えていますが、実は今、Conoha Wing（コノハ ウィング）というレンタルサーバーに注目しています。

ConoHa WINGとは？

ConoHa WING とは、2018年から提供しているレンタルサーバーのひとつで、特出すべきは「圧倒的なサーバーの処理速度」。

金額面についての特徴

• 1年契約で810円（2021年2月調べ）
• バックアップ復元無料

Xserverの場合は、もしものときのバックアップ復元に5,000円かかりますからね。

国内最大手のXserverと比較しても、遜色ないどころかむしろ優れているかも。

料金プランはたいていの人はベーシックプランで十分でしょう。

公式サイトにヒトデさんを筆頭に有名ブロガーさんのインタビューがありますので、ぜひ覗いてみてください。

＼国内最速レンタルサーバー／

ConoHa WINGの公式サイトはこちら

僕も2020年10月でXserverのレンタル契約が切れますので、ConoHa WINGに乗り換えるのを楽しみにしております。

▼（2020年12月追記）実際に乗り換えてみました！僕の所感付きで移行手順を紹介しております。

【最新版】エックスサーバーからConoHa WINGへの移行手順を解説

2020年10月13日

サーバーの初期応答時間を短縮（TTFB）の改善方法【PageSpeedInsights】まとめ

僕も気になっているConoHa WINGサーバーに乗り換えられた方がいらっしゃいましたら、ぜひ感想をお聞かせください^^

この記事が参考になりますと幸いです。

レンダリングを妨げるリソースの除外の改善方法をていねいに解説

2020年8月30日

サイト速度改善に役立つプラグインならこの3つ【まるっと解決】

2020年6月27日

そんな悩みが解決できる記事を書きました。

上図は合格してますが、こちらの項目のことですね。

さっそく解説していきます。

JavaScriptの最小化とは？

JavaScriptの最小化とは、「JavaScriptファイル内のコードを可能な限リ縮小して、ページの読み込み速度を向上させましょう」と言っています。

縮小ってなにするの？

コード内にある無駄な空白やコメントを、コードの内容が変わらない範囲で削除します。

縮小するとなぜ速度改善につながるの？

縮小によってファイルサイズが小さくなり、読み込み時間の短縮につながります。

JavaScriptの最小化 2つの改善方法を紹介

JavaScriptの最小化を行う2つの改善方法を紹介します。

1. Autoptimizeプラグインを活用 ※おすすめ！
2. フリーツールを使って最小化

順にみていきます。

Autoptimizeプラグインを活用

Autoptimizeプラグインを使えば、JavaScriptコードをかんたんに最小化できます。

当ブログでは毎度おなじみとなってきましたね。

JavaScriptオプション欄でJavaScriptコードを最適化設定します。
そのほかも、下図のような形でチェックしておくとよいでしょう。

このプラグインを使えば、JavaScriptの最小化の改善だけでなく、

• CSSの最小化
• オフスクリーン画像の遅延読み込み
• レンダリングを妨げるリソースの除外

などなど、PageSpeedInsightsで出てくるそのほかの項目も改善できますよ。

▼そのほかAutoptimizeプラグインの設定方法はこちらの記事が参考になります。

Autoptimizeプラグインの設定方法【注意点あり】

2020年7月30日

フリーツールを使って最小化

こちらはフリーツールを使って最小化する方法。

「JavaScript minify」と検索すれば、いくつか縮小できるツールが見つかるので、それを利用しましょう。

やり方はCSSの最小化の改善方法に記載しておりますので、気になる方はチャレンジしてみてください。

CSSの最小化の改善方法【PageSpeedInsights】

2020年6月16日

JavaScriptの最小化の改善方法【PageSpeedInsights】まとめ

JavaScriptの最小化の改善効果はCSS同様にそこまで見込めないかも知れません。

警告が出た際には試してみて頂ければと思います。

最後に、ブログのデザインがおかしくなっていないか表示の確認を必ず行ってくださいね！

以上、JavaScriptの最小化の改善方法についてでした。

この記事が参考になりますと幸いです。

そんな悩みが解決できる記事を書きました。

こちらの項目のことですね。

さっそく解説していきます。

CSSの最小化とは？

CSSの最小化とは、「CSSファイル内のコードを可能な限リ縮小して、ページの読み込み速度を向上させましょう」と言っています。

縮小ってなにするの？

コード内にある無駄な空白やコメントを、コードの内容が変わらない範囲で削除します。

縮小するとなぜ速度改善につながるの？

縮小によってファイルサイズが小さくなり、読み込み時間の短縮につながります。

CSSの最小化 2つの改善方法を紹介

CSSの最小化を行う2つの改善方法を紹介します。

1. Autoptimizeプラグインを活用 ※おすすめ！
2. フリーツールを使って最小化

順にみていきます。

Autoptimizeプラグインを活用

Autoptimizeプラグインを使えば、CSSコードをかんたんに最小化できます。

当ブログでは毎度おなじみとなってきましたね。

CSSオプション欄でCSSコードを最適化設定します。
そのほかも、下図のような形でチェックしておくとよいでしょう。

このプラグインを使えば、CSSの最小化の改善だけでなく、

• JavaScriptの最小化
• オフスクリーン画像の遅延読み込み
• レンダリングを妨げるリソースの除外

などなど、PageSpeedInsightsで出てくるそのほかの項目も改善できますよ。

そのほかAutoptimizeプラグインの設定方法はこちらが参考になります。

Autoptimizeプラグインの設定方法【注意点あり】

2020年7月30日

フリーツールを使って最小化

こちらはフリーツールを使って最小化する方法。

「CSS minify」と検索すれば、いくつか縮小できるツールが見つかるので、それを利用しましょう。

試しに、Minify – JavaScript and CSS minifierというサイトのツールを使って、style.cssをminify化してみましょう。

使い方はかんたんで、minify化したいCSSコードを貼り付けてminifyボタンをクリックするだけ。

僕のテーマ「スワロー」なら、「外観」→「カスタマイズ」→「追加CSS」にstyle.cssがあります。

▼これを先ほどのツールに貼り付けてminifyすると、余計な余白やコメントが取り除かれました！

このあとは、minifyしたコードを追加CSSにコピペすれば出来上がり。

かんたんですが、面倒ですよね。

僕は、Autoptimizeでやってもらうことにします。

CSSの最小化の改善方法【PageSpeedInsights】まとめ

CSSの最小化の改善効果はそこまで見込めないかも知れませんが、わりとかんたんなので警告が出ていない方も試してみて頂ければと思います。

最後に、ブログのデザインがおかしくなっていないか表示の確認を必ず行ってくださいね！

以上、CSSの最小化の改善方法についてでした。

この記事が参考になりますと幸いです。

そんな悩みが解決できる記事を書きました。

こちらの警告のことですね。

さっそく解説していきます。

キーリクエストのプリロードとは？

キーリクエストのプリロードとは、「ページを表示させるために必要な内容は先に読み込みましょう」というアドバイスになります。

このとき、最後に呼び出されて実行されるファイルは、ページを表示させるために必要な内容が含まれているのにも関わらず、呼び出されるのが遅いと速度遅延の要因となるというわけです。

【方針】pleload属性を使用しよう

PageSpeedInsightsのアドバイスを再度確認してみましょう。

「pre、load」。

つまり「先に、読み込め」と言うことですね。

警告の出ているファイルに対して、preload属性を付加して優先的に処理をしてあげることで、速度改善につながります。

キーリクエストのプリロードの改善方法2ステップ

キーリクエストのプリロードの改善方法は2ステップでできます。

1. キーリクエストのプリロードの警告が出ているURLをコピー
2. preload属性を追加したlinkタグをheadタグに追加

順に解説していきます。

ステップ１：キーリクエストのプリロードの警告が出ているURLをコピー

PageSpeedInsightsの改善できる項目にて、キーリクエストのプリロード警告の詳細を確認してください。

▼すると、下図のようにURLが現れますので、右クリックしてリンクのアドレスをコピーを選択します。

FontAwesomeとicomoon。
今回はフォント関連の読み込み順が遅くて警告が出ていたようです。

ステップ２：preload属性を追加したlinkタグをheadタグに追加

preload属性を追加したコードのテンプレはこちら。
#の部分に先ほどコピーしたURLを貼り付けます。

<link rel="preload" href="#" as="font" type="font/〇" crossorigin>

• href=”#”
  #の部分に先ほどコピーしたURLを貼り付けます。
• type=”font/〇”
  〇の部分にはリソースの拡張子を記述します。
• crossorigin
  別のサイトからフォント情報を読み込んだりする際に必要ですので、必ず記述します。

参考までに、今回の警告から完成したコードはこちら。

<link rel="preload" href="https://koaramarch.com/wp-content/themes/yswallow/library/icon/fontawesome-webfont.woff2?v=4.7.0" as="font" type="font/woff2" crossorigin>
 <link rel="preload" href="https://koaramarch.com/wp-content/themes/yswallow/library/icon/icomoon.ttf?ffmnq8" as="font" type="font/ttf" crossorigin>

このコードをheadタグ内に追加します。

これで完成です。

キーリクエストのプリロードの改善方法をていねいに解説 まとめ

改善できているか一緒に確認してみましょう。

見事合格！

Chromeの検証ツールを利用すると、改善されたのがよく分かります。

▼改善前

読み込まれる順にリソースを表示すると、あとのほうで読み込まれていた今回対象のリソースが・・・

▼改善後

優先的に呼ばれるようになりましたね！
（この上にあるリソースも優先的に呼ばれるように設定されています）

ページの表示もおかしくなっていないか確認してみてくださいね。

以上、キーリクエストのプリロードの改善方法についてでした。

この記事が参考になりますと幸いです。

そんな悩みが解決できる記事を書きました。

オフスクリーン画像の遅延読み込みは、プラグインでかんたんに解決してしまうのがよいでしょう。

さっそく解説していきます。

オフスクリーン画像の遅延読み込みとは？

オフスクリーン画像の遅延読み込みとは、「スクロールしないと見えない領域の画像は後で読み込みましょう」というアドバイスになります。

ファーストビューを速く表示させよう

Webページは1ページのうち、画面スクロールしなくても見える領域とスクロールしないと見えない領域がありますよね。

Webページにアクセスしたときに、スクロールしないと見えない画像なんて、べつに後で読み込んでもいいわけです。

ところが、今回の警告であるオフスクリーン画像、つまりスクロールしないと見えない領域の画像を読み込んでいるせいで、肝心のファーストビューの範囲内にある表示が遅くなってしまっています。

オフスクリーン画像を遅延させることで、Webページをぱっと見で速く感じさせることもできるでしょう。

オフスクリーン画像の遅延読み込み 改善方法

オフスクリーン画像の遅延読み込みの改善は、画像遅延読み込み系プラグインでかんたんに解決してしまうのがよいでしょう。

よく紹介されている画像遅延読み込み系プラグイン

よく紹介されている画像遅延読み込み系プラグインはこちら。

• A3 Lazy Load
• BJ Lazy Load

確かに上記が鉄板かと。

ただ、タイトルに書いちゃってますが、当ブログでもよく紹介している「Autoptimizeプラグイン」でも実現できますよ。

Autoptimizeプラグインでできること

• CSSやJavaScriptコードを圧縮してくれる
• 画像を遅延読み込みしてくれる

やり方はAutoptimizeの設定で、下図赤枠のチェックを入れるだけ。

簡単ですね。

Autoptimizeプラグインの難点

Autoptimizeの難点をあげるなら、画像遅延読み込みに関する細かい設定ができないということ。

例えば、400px手前で読み込み開始！

などの設定は、A3 lazy loadではできますが、Autoptimizeではできないです。

このあたりは実際に表示を必ず確認してみて、

• レイアウトが崩れていないか（プラグインとの相性の確認）
• 体感的な表示速度に問題ないか
• スクロールしたときに違和感はないか

などを考慮してお好きなほうを導入してみてください。

ユーザーにとってストレスを感じるほど遅延読み込みしていたら本末転倒ですからね。

あと、両方採用する場合は、Autoptimizeの画像遅延読み込み設定は解除しておいてくださいね。

▼そのほかAutoptimizeプラグインの設定に関してはこちらが参考になります。

Autoptimizeプラグインの設定方法【注意点あり】

2020年7月30日

オフスクリーン画像の遅延読み込み まとめ

導入後に、PageSpeedInsightsにて警告が消えているか確認してみましょう。

無事合格していますね。

以上、オフスクリーン画像の遅延読み込みの改善方法でした。

WordPressテーマ「スワロー」の紹介

僕の愛用中のテーマ「スワロー」は、駆け出しブロガーの方におすすめのテーマ。

初期設定がほとんど不要で、書くことに集中できます。

僕のブログでもカスタマイズ方法を紹介していますので、参考にしてもらえたら嬉しいですね。

＼当ブログで使用中のテーマ／

WordPressテーマ「スワロー」公式サイトはこちら

レンダリングを妨げるリソースの除外の改善方法をていねいに解説

2020年8月30日

サイト速度改善に役立つプラグインならこの3つ【まるっと解決】

2020年6月27日

そんな要望に応える記事を書きました。

Autoptimizeは、お手軽にサイトの速度改善を行いたいときに使える便利なプラグインで当サイトでも使用しています。

本記事では、Autoptimizeの設定方法を画像付きで解説します。

設定後の注意点についても触れていますので、参考にしてみてください。

さっそく解説していきます。

Autoptimizeプラグイン｜インストール手順

WordPressの管理画面より「プラグイン」→「新規追加」をクリックします。

「Autoptimize」と入力して検索すると、下図のように出てきます。

上図左側のほうですね。

僕はすでにインストール済みなので表示されませんが、「今すぐインストール」をクリックします。

Autoptimzeプラグイン｜設定方法

「設定」→「Autoptimize」をクリックします。

設定画面が現れますので順にみていきます。

JSの設定

上図のとおりにチェックします。

補足説明が必要そうな箇所だけ解説しておきます。

AutoptimizeからJSを除外

最適化から除外するJavaScriptファイルを記載します。

デフォルトの設定どおりで構いません。

CSSオプション

上図のとおりにチェックします。

インライン化とは？

すべてのCSSをインライン化にチェックを入れていますが、あとで必ず表示が崩れたり、CSSが反映されずに文字がチラついたりしていないか確認してください。

表示が崩れる場合はチェックを外してください。

AutoptimizeからCSSを除外

最適化から除外したいCSSファイルを記載します。

admin-bar.min.css, dashicons.min.cssは、WordPressの管理画面で使用されるものです。

削除してもデザインが崩れたりしなかったので、そのまま削除しておきました。

HTMLオプション、CDNオプション

上図のとおりでOK。

その他オプション

上図のとおりでOK。

ひとつチェックが外れている箇所も、チェックしておいても大丈夫かと。

画像

上図のとおりでOK。

Lazy-load images?

チェックを入れておくと、画像の遅延読み込みに対応できます。

遅延させるのに速度改善するの？

と思うかもしれませんが、ページを表示したい際にスクロールしないと見えない領域がありますよね。

ページを表示した際に画像をすべて読み込むのではなく、見えない領域に関してはあとで読み込むことで、ユーザー体験を損ねることなく速度改善が期待できます。

追加

上図のとおりでOK。

Googleフォント

フォントの読み込みが制御できるライブラリ。

何も理由がなければこれを選んでおくと良いです。

ほかのチェック項目については現在調査中です。

絵文字を削除

絵文字が不要なら削除で。

最後に表示の確認を！

変更を保存をクリックしたら、自サイトを何度か更新してレイアウトが崩れていないか表示を確認してください。

PageSpeedInsightsでスコアを確認してみてもよいでしょう。

僕はこのAutoptimizeだけでスコアが20以上上がりました。

【注意】Autoptimizeのキャッシュの警告が来たら、削除してください

Autoptimizeのキャッシュのサイズが増えすぎると、削除してくださいという警告メールが届くそうです。

対処法としては、定期的に削除するか、警告メールが届いたり、上図が真っ赤に表示されているときは、「キャッシュを削除」よりキャッシュを削除してください。

以上、Autoptimizeの設定方法についてでした。

WordPressテーマ「スワロー」の紹介

僕の愛用中のテーマ「スワロー」は、駆け出しブロガーの方におすすめのテーマ。

初期設定がほとんど不要で、書くことに集中できます。

僕のブログでもカスタマイズ方法を紹介していますので、参考にしてもらえたら嬉しいですね。

＼当ブログで使用中のテーマ／

WordPressテーマ「スワロー」公式サイトはこちら

サイト速度改善に役立つプラグインならこの3つ【まるっと解決】

2020年6月27日

レンダリングを妨げるリソースの除外の改善方法をていねいに解説

2020年8月30日