
WEBサイトの表示、高速化はここまでやればOK。
2018.05.01
カテゴリ:WEB制作
タグ:

サイトの表示や容量の最適化を行う場合、Google PageSpeed Insightsでテストされることが多いかと思います。
全然警告が消えないということがあるかもしれませんが、アニメーションや画像のサイズなどをクリアするまで行なっていると制約が多すぎて自由にデザインづくりが行えません。
無視するところは無視して、できる範囲内で行いましょう。
5つの指摘ごとに対応策をまとめました。
全然警告が消えないということがあるかもしれませんが、アニメーションや画像のサイズなどをクリアするまで行なっていると制約が多すぎて自由にデザインづくりが行えません。
無視するところは無視して、できる範囲内で行いましょう。
5つの指摘ごとに対応策をまとめました。
サーバーの応答時間を短縮する
対処法は3つです。
PHP5からPHP7へ変更する。
こちらについてはサーバーに依存してきます。
WordPressは特にPHPプログラムなのでサーバーによって、応答時間は異なります。
PHP7は、従来のPHP5と比べて2倍以上の速度になります。またメモリ使用量を大幅に軽減されております。
PageSpeed Insightsで「サーバーの応答時間を短縮する」の項目が出ていたら大幅に改善できるかもしれません。
ただ、Wordpressでは動かないプラグインが出ているとの報告もあるので注意が必要です。
WordPressは特にPHPプログラムなのでサーバーによって、応答時間は異なります。
PHP7は、従来のPHP5と比べて2倍以上の速度になります。またメモリ使用量を大幅に軽減されております。
PageSpeed Insightsで「サーバーの応答時間を短縮する」の項目が出ていたら大幅に改善できるかもしれません。
ただ、Wordpressでは動かないプラグインが出ているとの報告もあるので注意が必要です。
使用していないプラグインの停止・削除。
あまり変わらないとは思いますが、使用していないプラグインは停止・削除を行いましょう。
Chorme Developer Toolで原因の特定
Wordpressはプラグインにより遅くなる場合があります。
どのプラグイン、ファイルが原因になっているかをChorme Developer Toolを使用して確認し、プラグインの停止や代替えもしくは削除を行います。
下記の記事で紹介しています。
どのプラグイン、ファイルが原因になっているかをChorme Developer Toolを使用して確認し、プラグインの停止や代替えもしくは削除を行います。
下記の記事で紹介しています。
サーバーを乗り換える。
やはりサーバーに依存しますので、安すぎるところは評判などを見て他者に乗り換えましょう。
上記をできる範囲内で行えばOKです。
ブラウザのキャッシュを活用する
ブラウザキャッシュとはサイトのアクセス時にデータ(画像やcssなど)をブラウザに一時的に保管し、再度アクセスした際にキャッシュが残っているデータはWEB上からダウンロードせずにブラウザに保存しているデータを使用するので読み込みを発生させずに表示を高速化するシステムです。
下記を.htaccessに記載するだけでブラウザに保存期間の指示ができます。
下記を.htaccessに記載するだけでブラウザに保存期間の指示ができます。
.htaccessに追記
1 2 3 4 5 6 7 8 9 |
ExpiresActive On ExpiresByType text/css "access plus 10 days" ExpiresByType image/gif "access plus 10 days" ExpiresByType image/jpg "access plus 10 days" ExpiresByType image/jpeg "access plus 10 days" ExpiresByType image/png "access plus 10 days" ExpiresByType text/javascript "access plus 10 days" ExpiresByType application/javascript "access plus 10 days" ExpiresByType application/x-javascript "access plus 10 days" |
注意点としては、頻繁にcss、画像などを変更する方は一度アクセスしたユーザーへの変更が反映されない場合があるので要注意です。
さらに詳しく下記で解説しています。
さらに詳しく下記で解説しています。
画像を最適化する
画像は容量が大きいのでサイトの表示スピードをアップさせる上ではかなり重要な項目です。
ただ、対応するにも限度があり、PageSpeed Insightsからの指摘が出ないまで対応していたら画像が荒くなります。
デザインを損なわない範囲で行いましょう。
ただ、対応するにも限度があり、PageSpeed Insightsからの指摘が出ないまで対応していたら画像が荒くなります。
デザインを損なわない範囲で行いましょう。
テキストで代用できないか検討する。
テキストで代用できないかを考えましょう。
現在はGoogleフォントなどのWEBフォントも多く使用できますので文字はできる限り画像を使用せずにテキストデータをしようしましょう。
現在はGoogleフォントなどのWEBフォントも多く使用できますので文字はできる限り画像を使用せずにテキストデータをしようしましょう。
画像を圧縮
ウェブサービス、フリーソフトを使用して行います。
Windowsの方
windowsの方は「TinyPng」を使用しましょう。
ウェブ上でドラッグ&ドロップだけで画像を圧縮できます。
ウェブ上でドラッグ&ドロップだけで画像を圧縮できます。
Macの方
macは便利なImageOptimというフリーソフトがあります。
インストール後はソフトを開いてファイルをドラッグして入れれば圧縮して上書きしてくれます。
上記を使用して可能な限り画像サイズを軽くしましょう。
適正なサイズを使用する。
Wordpressを使用したサイトに多いですがサムネイルの画像サイズが大きすぎたり、サイドバーによく入っている人気の記事ランキングなどの画像が本文のところと同じ画像を使っていたりします。
画像サイズは入れる場所によって適正サイズを用意しましょう。
方法は下記からご覧ください。
画像サイズは入れる場所によって適正サイズを用意しましょう。
方法は下記からご覧ください。
「レンダリングに遅延が発生しています。」を解決する。
外部リソースの読み込みを遅延させる。
ブラウザが本文の読み込みをする際に例えば、Googleフォントなどの外部リソースの読み込みがされるのはダメですよ。ということで遅延させて読み込ませる必要があります。
ただ、全てに対応するのは現代のホームページ制作ではほぼ不可能だと思います。
cssを全て遅延させるとアクセスしたユーザーは一瞬、cssが適用されていないサイトを見ることになります。
フォントの外部リソースや後からでも構わないcss、JavaScriptはコンテンツの読み込みが終わった後に読み込ませます。
下記にて遅延の読み込み方法を紹介しています。
ただ、全てに対応するのは現代のホームページ制作ではほぼ不可能だと思います。
cssを全て遅延させるとアクセスしたユーザーは一瞬、cssが適用されていないサイトを見ることになります。
フォントの外部リソースや後からでも構わないcss、JavaScriptはコンテンツの読み込みが終わった後に読み込ませます。
下記にて遅延の読み込み方法を紹介しています。
JavaScriptを縮小する、CSSを縮小する、HTMLを縮小する
JavaScript、CSS、HTMLの改行や無駄なスペースなどを削除してファイルサイズを小さくします。
下記サイトにて行えます。
下記サイトにて行えます。
上記を可能な範囲内で一通り行えばGoogle PageSpeed Insightsで、ある程度の点数を取れると思います。
特にブログサイトであればアニメーションなどもあまり使用していないと思いますので、適用できる項目も多いと思います。
うちのサイトも上記で90点台に乗っています。
特にブログサイトであればアニメーションなどもあまり使用していないと思いますので、適用できる項目も多いと思います。
うちのサイトも上記で90点台に乗っています。


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