COLUMN 2019.8.26

【WebクリエイターのためのSEO】SEOのためにもぜひ実践しておきたい、Webサイト高速化テクニックとは？

Webサイトを制作するときは、デザインだけでなく他の面に気を配る必要があります。特にWebサイトの読み込み時間は遅いとユーザーの離脱率上昇など、せっかく制作したWebサイトに悪い影響を引き起こします。

また「Google」の「スピードアップデート」により、Webサイトは読み込み時間が速いほど検索エンジンに評価されるようになりました。このようにWebサイトの読み込み速度はSEOにも関係するので、高速化テクニックを覚えておくとあなたのデザインしたWebサイトがユーザーに読まれる可能性を高められます。

今回はWebサイトの高速化テクニックについてまとめてみました。「Webデザインだけきちんとしておけば大丈夫」という時代ではないので、ぜひこの記事でテクニックをマスターしてください。

Webサイトを構成しているファイルを最適化・圧縮する

Webサイトは「CSS」や「JavaScript」など、複数のファイルで構成されています。こういったファイル1つ1つのデータ容量は大したものではありませんが、Webサイトを読み込むときに無駄なデータが入っているファイルが多いと、レンダリングに時間がかかってしまいます。ですからまずはWebサイト内のファイルを「Minify化（小型化して最適にする）」しましょう。

具体的にはCSSやJavaScript内の改行コードや空白、コメントなどの処理に直接関係のないデータを削除し、最小限の構成でデータ読み込みができるように調整します。Minify化を行うには、ウェブサービスを使ったり、プログラムライブラリを使ったりとさまざまな方法があります。自分のWebサイト制作環境に合った方法でファイルをMinify化してみましょう。

また「gzip」などの形式にファイルを圧縮すれば、さらにファイルを小型化してWebサイト表示のスピードを上げられます。Webサイトを配置したサーバーで直接圧縮をかける方法もありますが、サーバーに負担をかけるためあまりおすすめしません。あらかじめサーバーへWebサイトをアップロードする前に、各ファイルへ圧縮をかけておきましょう。

ファイルを圧縮するには、「gulp.js」のようなツールキットを利用するなどいくつか方法があるので、こちらも自分のWebサイト制作環境に合った方法でファイル圧縮を行ってください。

Webサイトリソースの読み込み順番を最適化する

例えばタグ中にJavaScriptをすべて配置してしまうとWebサイト全体の読み込みが遅くなるなど、「HTML」コードの書き方によっては「レンダリングブロック」が発生してしまいます。レンダリングブロックを防ぐためには、HTMLコードの書き方を工夫してWebサイトリソースの読み込み順番を最適化する必要があります。

例えばJavaScriptファイルはWebサイトの中身がすべて読み込まれた後（の直前）に読み込む、レンダリングブロックの起こらない「メディアクエリ」CSSは別ファイルにして別途読み込むなど、Webサイトの読み込みを考慮したHTMLコーディングを心がけるだけでWebサイトの表示速度が速くなります。

プロキシサーバーを活用する

Webサイト読み込みをなるべく高速化しておきたい場合、サーバーの構築も工夫しておきましょう。Webサイト高速化に有効なのは、プロキシサーバーを活用する方法です。

「CloudFlare」などの「CDN(Content Delivery Network)」用プロキシサーバーサービスは、オリジナルのサーバーからWebサイトをキャッシュします。そしてユーザーがWebサイトにアクセスしたときに、ユーザーの現在位置に最も近いプロキシサーバーのWebサイトキャッシュを表示することでWebサイト読み込みを高速化します。

特に「グローバルにアクセスされる可能性があるWebサイトの高速化を行いたい」という場面で役に立つ方法です。

プラグインを活用する（WordPressでウェブデザインする場合）

「WordPress」でWebサイトデザインするときもあります。WordPressを利用している場合、「プラグイン」を活用すればWebサイト読み込み高速化が簡単に実現します。

WordPressでは、Webサイト読み込み高速化を実現するプラグインが無料でたくさん配布されています。例えば画像を圧縮して読み込みたいときは「Compress JPEG & PNG images」で見た目を損なわずに圧縮を行うなど、プラグイン追加だけであっという間にWebサイト高速化が完了します。他にもユーザーがスクロールして付近に近づいたときに、別途画像を読み込むことでWebサイト全体の初期読み込み時間を短くする「BJ Lazy Load」など、Webサイトを高速化できるWordpressプラグインは他にもあります。

ただしあまりにもプラグインを入れすぎるとかえってWebサイト読み込みが遅くなる可能性もあるので、必要なプラグインだけを導入しましょう。

まとめ

今回はSEOの点からも重要な、Webサイト高速化のテクニックについてご紹介してきました。

ここでご紹介しているWebサイト高速化のテクニックは、すぐに実行できる簡単なものばかりです。こういったテクニックを知っているかいないかで、自分のデザインしたWebサイトがユーザーに読まれるか読まれないかが決まってきます。ぜひこの機会にWebサイト高速化テクニックをマスターして、ライバルのWebデザイナーに差をつけましょう。