menu

WEB高速化(導入しやすい順)

TIPS

WEBサイトを閲覧するとき「もたつき」があると、がっかりしませんか?なにか情報を探しているときは、すぐに結果が知りたいものです。サイト訪問者はページ表示が2秒を超えるとイライラするというデータもあります。そこで今回は、あなたのサイトを高速化する方法を「導入しやすい順」(筆者主観)に紹介いたします。

<script>タグの位置を変更する
以前は、<head>~</head>の中に記述することが一般的だったスクリプトタグ。現在の主流は</body>の直前に置く方法。こうすることで、時間のかかるスクリプト処理が後回しにされ、高速化できる場合があります。タグの位置を移動するだけだから、簡単でしょう?

不要なスクリプト、CSSを削除する
以前に作った「ひな形」を再利用してWEBサイトを作ることも多いでしょう。このとき、今回のプロジェクトに必要ないスクリプトやCSSを読み込んでいないか、再確認することをお勧めします。「ひな形」とすべきなのは、必要最低限のサイズであるべきです。

画像サイズの最適化
ブラウザで表示できる画像には種類があります(GIF/JPEG/PNGなど)。それぞれの特性を活かした使い分けが必要ですが、ここで問題としたいのは「不必要に大きなサイズの画像をサイズを指定して縮小表示させていないか?」ということです。確かに、解像度が高く、サイズが大きい画像を使うと、印刷したときなどにくっきりきれいに印刷されます。しかし、画像表示に時間がかかって訪問者をイライラさせてしまっては本末転倒でしょう。画面表示に必要な最小のサイズの画像を使うようにします。プリントアウトのためには、印刷専用のスタイルシートを用意すればいいのです。

CSSやアイコンフォントで画像を置き換える
「そもそもそれは画像である必要はあるのか?」を考えます。テキストファイルであるCSSでも工夫次第で多彩な表現が可能ですし、小さなアイコンであれば、アイコンフォントという手もあります。

コンテンツを圧縮する
もしあなたがApacheの設定を変更できる立場にあり、まだやっていなかったら、Apacheのmod_deflateを試してみましょう。これは、ファイルをgzipで圧縮して転送するモジュールです。処理はサーバー側で行われるので、HTMLの中でファイル名を”.html.gz”などにする必要はありません(もちろんサーバー側では圧縮ファイルを用意しておく必要があります。圧縮ファイルがあれば自動的にそれを優先して読み込むという仕組みです)。CPUパワーが要求されるので、サーバー・パワーがあまり期待できない場合は逆効果となる可能性もあるので、ご注意ください。

システムをAJAX化する
フォーム送信、CGI起動、レスポンスを返す、という流れは古くから使われている簡単かつ確実な方法ですが、WEBサーバーにアクセスするたびにHTTPリクエストヘッダーが返され、決して効率的とはいえません。もし可能であればAJAX(非同期通信)を使って、データだけのやりとりに変えてしまいましょう。このとき、JQueryなど人気のライブラリを使うものもいいですが、世界最小サイズ(0バイト)のVanilla JSを使ってもいいんですよ。(注:Vanilla JSとはプレーンなJavaScriptの別名です)

CDNを過信しない
AJAXや各種フレームワークなどを使う場合、CDN(コンテンツデリバリーネットワーク)を使うと、サーバーにライブラリファイルを転送する必要もなく簡単です。元来、巨大サイトが自社のトラフィックを分散させるためにはじめたCDNですが、国外のCDNに接続する場合、むしろ表示速度が遅くなってしまうことも。
いかがでしょうか?WEBサイトで発信するメッセージは見られないことには意味がありません。「表示速度が遅い」という技術的弱点でせっかくのコンテンツが届いていないとしたらもったいないですよね。簡単に対策できるところから一度あなたのサイトを見直してみませんか?

WEBサイトを閲覧するとき「もたつき」があると、がっかりしませんか?なにか情報を探しているときは、すぐに結果が知りたいものです。サイト訪問者はページ表示が2秒を超えるとイライラするというデータもあります。そこで今回は、あなたのサイトを高速化する方法を「導入しやすい順」(筆者主観)に紹介いたします。

<script>タグの位置を変更する
以前は、<head>~</head>の中に記述することが一般的だったスクリプトタグ。現在の主流は</body>の直前に置く方法。こうすることで、時間のかかるスクリプト処理が後回しにされ、高速化できる場合があります。タグの位置を移動するだけだから、簡単でしょう?

不要なスクリプト、CSSを削除する
以前に作った「ひな形」を再利用してWEBサイトを作ることも多いでしょう。このとき、今回のプロジェクトに必要ないスクリプトやCSSを読み込んでいないか、再確認することをお勧めします。「ひな形」とすべきなのは、必要最低限のサイズであるべきです。

画像サイズの最適化
ブラウザで表示できる画像には種類があります(GIF/JPEG/PNGなど)。それぞれの特性を活かした使い分けが必要ですが、ここで問題としたいのは「不必要に大きなサイズの画像をサイズを指定して縮小表示させていないか?」ということです。確かに、解像度が高く、サイズが大きい画像を使うと、印刷したときなどにくっきりきれいに印刷されます。しかし、画像表示に時間がかかって訪問者をイライラさせてしまっては本末転倒でしょう。画面表示に必要な最小のサイズの画像を使うようにします。プリントアウトのためには、印刷専用のスタイルシートを用意すればいいのです。

CSSやアイコンフォントで画像を置き換える
「そもそもそれは画像である必要はあるのか?」を考えます。テキストファイルであるCSSでも工夫次第で多彩な表現が可能ですし、小さなアイコンであれば、アイコンフォントという手もあります。

コンテンツを圧縮する
もしあなたがApacheの設定を変更できる立場にあり、まだやっていなかったら、Apacheのmod_deflateを試してみましょう。これは、ファイルをgzipで圧縮して転送するモジュールです。処理はサーバー側で行われるので、HTMLの中でファイル名を”.html.gz”などにする必要はありません(もちろんサーバー側では圧縮ファイルを用意しておく必要があります。圧縮ファイルがあれば自動的にそれを優先して読み込むという仕組みです)。CPUパワーが要求されるので、サーバー・パワーがあまり期待できない場合は逆効果となる可能性もあるので、ご注意ください。

システムをAJAX化する
フォーム送信、CGI起動、レスポンスを返す、という流れは古くから使われている簡単かつ確実な方法ですが、WEBサーバーにアクセスするたびにHTTPリクエストヘッダーが返され、決して効率的とはいえません。もし可能であればAJAX(非同期通信)を使って、データだけのやりとりに変えてしまいましょう。このとき、JQueryなど人気のライブラリを使うものもいいですが、世界最小サイズ(0バイト)のVanilla JSを使ってもいいんですよ。(注:Vanilla JSとはプレーンなJavaScriptの別名です)

CDNを過信しない
AJAXや各種フレームワークなどを使う場合、CDN(コンテンツデリバリーネットワーク)を使うと、サーバーにライブラリファイルを転送する必要もなく簡単です。元来、巨大サイトが自社のトラフィックを分散させるためにはじめたCDNですが、国外のCDNに接続する場合、むしろ表示速度が遅くなってしまうことも。
いかがでしょうか?WEBサイトで発信するメッセージは見られないことには意味がありません。「表示速度が遅い」という技術的弱点でせっかくのコンテンツが届いていないとしたらもったいないですよね。簡単に対策できるところから一度あなたのサイトを見直してみませんか?

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

いま改めてパーソナルコンピューティングの歴史を振り返る

よこはまITフェア 2016

関連記事

  1. そのホームページ制作はなぜ失敗したのか?6つの理由から原因を探る…

    「ホームページを作ったはいいけど、まったく効果が出ない…」制作会社にホームページ制作を外注し…

  2. パスワードは8文字以上

    インターネットにおいて、サービスを利用するときに使うIDとパスワードは個人を識別するたいせつな情報で…

  3. 【Webサイトリニューアル】クライアントへのヒアリング項目まとめ…

    Web制作において、新規制作であろうがリニューアルであろうが制作初期に行う最も重要なプロセスといえば…

  4. 検索エンジンをロボットと思ってはいけません

    SEOに「やっぱり」欠かせない被リンクの構築は、「やっぱり」メリットがあります。あちこちの記事に書か…

  5. 販促支援の大きな柱!?コンテンツマーケティングのはじめ方

    現代では、パソコンを中心に考えるマーケティングに加えて、スマートフォンやタブレットといったモバイル利…

  6. そんなプライドいります?

    SEO対策というと、なんだか難しそうに感じるかもしれませんが、シンプルに考えると難しいものではなく「…

  7. SQLiteをつかってみよう

    自分でWebアプリケーションを作ってみたい…。そう思ったことはありませんか?いろいろなサービスがAP…

  8. 6つの注意点で成功させる、中小企業のホームページリニューアル

    ホームページリニューアルで成約率やお問い合わせ数向上に繋がれば、企業にとってこれほど嬉しいことはあり…

PICKUP

PAGE TOP