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. 【チェックリスト有】ホームページリニューアルの制作会社選び、大丈…

    現在ホームページのリニューアルを検討している企業の企画担当者に一つ聞きたいのが、「そのリニューアル、…

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

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

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

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

  5. ホームページリニューアル前に知って欲しい、クライアントが持つべき…

    ホームページリニューアルを検討している企業では「制作会社選びに失敗した!」と、新たな外注先を模索して…

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

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

  7. やらなきゃ損?実績は宝!Webマーケティング手法

    Webを活用したマーケティングは、単純にホームページを作成・公開するだけではありません。Webマーケ…

  8. 考えてみたらホームページリニューアルには意外とメリットが多かった…

    最近ホームページリニューアルの必要性を感じつつも、リニューアルするメリットがいまいち分からないという…

PICKUP

PAGE TOP