Webサイト高速化 - ウェブ制作テクニック - テクニック

Webサイトの速度解析

最初は測定サイトを利用してサイトの表示速度をチェックします。
点数が低い場合は表示速度が遅い事を意味するので、アドバイスを基に改善が必要です。
サイトの表示速度はSEOにも利用者にも効果的な改善策となるので、現在では非常に重要な要素となっています。
特にデザインに用いる画像が重いとメインのコンテンツの足を引っ張る事になるため、できるだけ軽量化を行うようにしてください。
Webサイトの速度測定
 Webサイトのスピード改善はUI／UX改善以上に効果ありゴルフルダイジェスト・オンライン担当者が断言
 「爆速すぎて笑う」　表示速度が“異常な”Webサイト「dev.to」　その仕組みは
 サイトを37倍に高速化した7つの手法
 最低2秒、目指すは1秒以内。ウェブサイトを高速化するためのTIPS

大抵は測定サイトの点数が上昇すれば、それに合わせて体感速度でも違いを感じる事ができます。
しかし、まれに測定サイトの点数が上昇しても、体感速度では遅くなったように感じる事があります。
この場合は体感速度を重視し、何らかの施策を行っている場合は修正した方が無難です。

WordPressなどを使用する動的サイトと静的サイトでは、処理の多い動的サイトの方が遅くなります。
また、利用しているサーバーのスペックによっても差が出るため、速度を重視する場合はサイト環境も考慮する必要があるようです。

サイト構造を複雑にすると読込速度が低下する場合があります。
基本的にあまり深い階層にはせず、辿りやすいシンプルなディレクトリ構造を構築する事が望ましいようです。

ソースは定期的に見直してできるだけ無駄が無く、円滑に処理されるように作成すると速度の向上が見込めます。
効果的なソースは処理速度の向上やデータ量の削減など、様々なメリットが得られるので研究すると良いかもしれません。

無駄な処理を作らない

.htaccessを利用する事でWebページの表示速度を高速化する事ができます。
なお、この方法はローカルファイルに変更を加える事無く高速化が可能です。
.htaccessの高速化

WordPressを高速化できるプラグインです。
大抵は問題なく利用できると思いますが、不具合が出るようなら設定を変更して調整する必要があります。
WordPress高速化プラグイン

モバイルページを高速化するJavaScriptライブラリです。
Accelerated Mobile Pages Project

HTMLやCSSを効果的に利用する事でサイト全体の高速化が可能です。
HTMLでは画像のサイズ指定、コードの省略など、CSSではCSS Effectなどがあります。
HTML高速化
 CSS高速化
 2行追加するだけでWebサイトを高速化するInstantClick.io

画像ファイルの縮小版を先に読み込ませて読み込み時間の短縮を行います。