RSSはこちら

ブログテンプレートならHKD

ブログタイトルを3時間悩んでやっと思いつきました。変にこだわるデザインです。すでに変にこだわって時間をロスしています。

更新休止のお知らせ

現在HKDは更新を休止しており、緊急を要する修正以外は手をつけれない状態です。 ご利用していただいてる方々には申し訳ございませんが、よろしくお願いいたします。
  • --⁄--⁄--(--)
  • --:--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
category
スポンサー広告
  • 2009⁄09⁄23(Wed)
  • 09:27

できるかぎり高速に表示するためのHTML作り

現在、今まで作った5つのテンプレートの機能(サイトマップやアンカーリンク等)がバラバラなので、それを統一するための編集を行っています。

そこでテンプレートを触るついでにHTMLを見直して、HTMLをできるかぎり高速に表示できないかいろいろ調べてみました。

プログラムやWEBデザインについては検索でちょくちょく調べたりしていたんですけど、今回のようにHTMLの高速表示・最適化みたいな分野はあまり知らなかったので、大変勉強になりました。
お世辞にも私が今まで作ったテンプレートは構造的に綺麗とは言えません。
もちろん文章構造を保ったHTMLにCSSでデザイニングしていますが、javascriptやFC2独自の変数を多く使っているため、ソースコードを再編集しにくく、また見えないところでブラウザに余計な負担をかけているようです。


そこで、いろいろ調べて次のように調整してみました。(調整中もあり)

1、HTTPリクエストを減らす
2、スタイルシートを先頭に配置する
3、スクリプトを末尾に配置する
4、JavaScriptとCSSを外部ファイルに記述する
5、JavaScriptでグローバル変数よりローカル変数を使う
6、JavaScriptのサイズを小さくする


1のHTTPリクエストを減らすについては
CSSやjavascriptの外部ファイルをできるかぎり1つにまとめたり、背景画像を一つ一つバラバラに読み込むのではなく、1つの画像を読み込んでそこでCSSのbackground-positionで表示する画像の位置を決めるなどがあります。
1つの画像を読み込んでCSSで位置指定って方法を「CSS SPRITE」っていうみたいです。方法は知っていたけど名前は知らなかった・・・。
ただ、この方法は画像をリピートして使ったり透過pngを使う場合はうまくできない感じ。
ケースバイケースでうまく使っていこう。

2と3のスタイルシートは先頭に・スクリプトは末尾については
これも知らなかった。というかhead内の書き方がよく分からない。とりあえずエンコード指定だけは先にもってきてましたが・・・。

4のJavaScriptとCSSを外部ファイルに記述するについて
これはよく聞きますね。jQueryの使い方が少し分かってきたのでもう少しjavascriptを外部ファイル化できないか検討します。

5のJavaScriptでグローバル変数よりローカル変数を使うについて
これもjQueryの勉強中に見つけました。

6のJavaScriptのサイズを小さくするについて
今回この知識が一番やくにたったかもしれません。
外部ファイルはもちろん小さいにこしたことがないのは分かっていましたが、その対策についてはまったく知りませんでした。
主に次の対策があります。
・複数のjsファイルを1つにまとめる
・jsファイル内の無駄な改行やセミコロン等を除去する
・jsファイル事態をgzipという方法で圧縮
残念ながら三つ目のgzipで圧縮というのはサーバーの設定も必要(?)そうなので断念しましたが、5つぐらいあったjsファイル約40kbが1つにまとめて約25kbになりました。
まとめるのは自分でコピペでやりましたが、無駄な文字を除去するのはYUI Compressor Onlineを使いました。



いろいろ書いて長くなりましたが、これらを全てのテンプレートに施して近いうちに再アップしたいと思います。
体感的にはそう変わらないかもしれません。1秒でも変われば大満足です。
昔に聞いたWEBマーケティングの話になりますが、WEBページが表示されるまでの待たされる時間が3秒を超えると、ユーザーの大半は2度と訪問しないそうです。
いつでもどこでも好きな情報を見れるネットにとっての1秒は、とても価値のあるものだと思います。


【参考URL】
あなたのウェブサイトを高速化する方法 - builder by ZDNet Japan
http://builder.japan.zdnet.com/news/story/0,3800079086,20388227,00.htm

第30回 JavaScriptの動作を軽くするための工夫 - 技術者視点のユーザビリティ考:ITpro
http://itpro.nikkeibp.co.jp/article/COLUMN/20080109/290747/

ASCII.jp:jQueryのダウンロードとインストールのチュートリアル|Web制作の現場で使えるjQuery UIデザイン入門
http://ascii.jp/elem/000/000/437/437785/index-3.html

JavaScript読み込みブロック回避でページ表示を高速化する方法 | エンタープライズ | マイコミジャーナル
http://journal.mycom.co.jp/news/2008/07/25/006/index.html

CSS Spriteを活用しよう | DesignWalker
http://www.designwalker.com/2008/02/css-sprite.html

YUI Compressor Online
http://yui.2clics.net/
スポンサーサイト
category
WEB技術 > HTML
tag
HTML高速化カスタマイズレスポンスjavascript
genre
ブログ
theme
FC2ブログ共有テンプレート

TrackBack Url

http://hkdesign.blog91.fc2.com/tb.php/26-af9d00cc

検索フォーム

プロフィール

HKD TEMPLATE


Author:
 Hellow
mail:
 hkdesign.mail☆gmail.com
 ☆を半角@に変えてください。

Henni
Kodawaru
Design
略してHKD

ブログテンプレートならHKDにようこそ!
このサイトではFC2で使える共有テンプレートを配布しています。
サイトについての説明はこちらをどうぞ。

カテゴリ

アクセスランキング

[ジャンルランキング]
ブログ
2467位
アクセスランキングを見る>>

[サブジャンルランキング]
共有テンプレート
13位
アクセスランキングを見る>>

FC2カウンター

メールフォーム

名前:
メール:
件名:
本文:

アプリ紹介

google chrome拡張機能「high! like!」を作りました。
機能1:はてなハイクをサイト上に投稿できる
機能2:はてなハイク投稿時に同時にtwitterにも投稿する
詳しくは次のURLへお越しください
hk-factory
Googleウェブストア

プラグインギャラリー

ブログ管理画面の共有プラググイン追加から、作者:hkdesignと検索してダウンロードしてください。

CastomCategory
CustomRssReader
ImageClock

テンプレートギャラリー

ブログ管理画面の共有テンプレート追加から、作者:hkdesignと検索してダウンロードしてください。

動作環境について

テンプレートは以下の環境・方法で動作確認を行ってからFC2に申請しています。もし、記載の環境でも表示が崩れて見えない場合は連絡してくれるとありがたいです。

【Win】FireFox 3 / IE8 / IE7(*) / IE6(*) / Google Chrome
【Mac】FireFox 3.0(*) / Safari 3.0(*)
*マークがあるブラウザは手元に環境がないので、Adobe BrowserLabを使ってチェックしています。

Adobe BrowserLab
https://browserlab.adobe.com/

ライセンスについて

ライセンス形態はGPLライセンスをとります。
簡単に言うと次の4つです。
  • カスタマイズ・再配布など連絡なしに使用OK。
  • ただし、著作権表示は消したらダメです。
  • なんらかの損害が出た場合は自己責任です。
  • 再配布する場合、GPLライセンスが適用されます。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。