WEB制作、マーケティングに関する情報をお届けします。

サイトの表示や容量の最適化を行う場合、Google PageSpeed Insightsでテストされることが多いかと思います。
全然警告が消えないということがあるかもしれませんが、アニメーションや画像のサイズなどをクリアするまで行なっていると制約が多すぎて自由にデザインづくりが行えません。
無視するところは無視して、できる範囲内で行いましょう。
5つの指摘ごとに対応策をまとめました。

対処法は3つです。

こちらについてはサーバーに依存してきます。
WordPressは特にPHPプログラムなのでサーバーによって、応答時間は異なります。
PHP7は、従来のPHP5と比べて2倍以上の速度になります。またメモリ使用量を大幅に軽減されております。
PageSpeed Insightsで「サーバーの応答時間を短縮する」の項目が出ていたら大幅に改善できるかもしれません。
ただ、Wordpressでは動かないプラグインが出ているとの報告もあるので注意が必要です。

あまり変わらないとは思いますが、使用していないプラグインは停止・削除を行いましょう。

Wordpressはプラグインにより遅くなる場合があります。
どのプラグイン、ファイルが原因になっているかをChorme Developer Toolを使用して確認し、プラグインの停止や代替えもしくは削除を行います。
下記の記事で紹介しています。

やはりサーバーに依存しますので、安すぎるところは評判などを見て他者に乗り換えましょう。

上記をできる範囲内で行えばOKです。

ブラウザキャッシュとはサイトのアクセス時にデータ(画像やcssなど)をブラウザに一時的に保管し、再度アクセスした際にキャッシュが残っているデータはWEB上からダウンロードせずにブラウザに保存しているデータを使用するので読み込みを発生させずに表示を高速化するシステムです。
下記を.htaccessに記載するだけでブラウザに保存期間の指示ができます。

注意点としては、頻繁にcss、画像などを変更する方は一度アクセスしたユーザーへの変更が反映されない場合があるので要注意です。
さらに詳しく下記で解説しています。

画像は容量が大きいのでサイトの表示スピードをアップさせる上ではかなり重要な項目です。
ただ、対応するにも限度があり、PageSpeed Insightsからの指摘が出ないまで対応していたら画像が荒くなります。
デザインを損なわない範囲で行いましょう。

テキストで代用できないかを考えましょう。
現在はGoogleフォントなどのWEBフォントも多く使用できますので文字はできる限り画像を使用せずにテキストデータをしようしましょう。

ウェブサービス、フリーソフトを使用して行います。

Windowsの方

windowsの方は「TinyPng」を使用しましょう。
ウェブ上でドラッグ&ドロップだけで画像を圧縮できます。

macは便利なImageOptimというフリーソフトがあります。
インストール後はソフトを開いてファイルをドラッグして入れれば圧縮して上書きしてくれます。

上記を使用して可能な限り画像サイズを軽くしましょう。

Wordpressを使用したサイトに多いですがサムネイルの画像サイズが大きすぎたり、サイドバーによく入っている人気の記事ランキングなどの画像が本文のところと同じ画像を使っていたりします。
画像サイズは入れる場所によって適正サイズを用意しましょう。
方法は下記からご覧ください。

ブラウザが本文の読み込みをする際に例えば、Googleフォントなどの外部リソースの読み込みがされるのはダメですよ。ということで遅延させて読み込ませる必要があります。
ただ、全てに対応するのは現代のホームページ制作ではほぼ不可能だと思います。
cssを全て遅延させるとアクセスしたユーザーは一瞬、cssが適用されていないサイトを見ることになります。
フォントの外部リソースや後からでも構わないcss、JavaScriptはコンテンツの読み込みが終わった後に読み込ませます。
下記にて遅延の読み込み方法を紹介しています。

JavaScript、CSS、HTMLの改行や無駄なスペースなどを削除してファイルサイズを小さくします。
下記サイトにて行えます。

上記を可能な範囲内で一通り行えばGoogle PageSpeed Insightsで、ある程度の点数を取れると思います。
特にブログサイトであればアニメーションなどもあまり使用していないと思いますので、適用できる項目も多いと思います。
うちのサイトも上記で90点台に乗っています。

リッチなサイトになればなるほど、画像、css、JavaScriptを多用します。
警告が出てもあまり気にしすぎないようにしましょう。