ブログテンプレートならHKDできるかぎり高速に表示するためのHTML作りRSSはこちらブログテンプレートならHKDブログタイトルを3時間悩んでやっと思いつきました。変にこだわるデザインです。変にこだわって時間をロスしています。MAP更新休止のお知らせ現在HKDは更新を休止しており、緊急を要する修正以外は手をつけれない状態です。ご利用していただいてる方々には申し訳ございませんが、よろしくお願いいたします。2009⁄09⁄23(Wed)09:27できるかぎり高速に表示するためのHTML作りcomment:0trackback:0現在、今まで作った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で表示する画像の位置を決めるなどがあります。SPRITE」っていうみたいです。方法は知っていたけど名前は知らなかった・・・。この方法は画像をリピートして使ったり透過pngを使う場合はうまくできない感じ。ケースバイケースでうまく使っていこう。2と3のスタイルシートは先頭に・スクリプトは末尾についてはこれも知らなかった。いうかhead内の書き方がよく分からない。エンコード指定だけは先にもってきてましたが・・・。4のJavaScriptとCSSを外部ファイルに記述するについてこれはよく聞きますね。jQueryの使い方が少し分かってきたのでもう少しjavascriptを外部ファイル化できないか検討します。5のJavaScriptでグローバル変数よりローカル変数を使うについてこれもjQueryの勉強中に見つけました。6のJavaScriptのサイズを小さくするについて今回この知識が一番やくにたったかもしれません。外部ファイルはもちろん小さいにこしたことがないのは分かっていましたが、その対策についてはまったく知りませんでした。残念ながら三つ目のgzipで圧縮というのはサーバーの設定も必要(?)そうなので断念しましたが、5つぐらいあったjsファイル約40kbが1つにまとめて約25kbになりました。Onlineを使いました。書いて長くなりましたが、これらを全てのテンプレートに施して近いうちに再アップしたいと思います。体感的にはそう変わらないかもしれません。1秒でも変われば大満足です。昔に聞いたWEBマーケティングの話になりますが、WEBページが表示されるまでの待たされる時間が3秒を超えると、ユーザーの大半は2度と訪問しないそうです。いつでもどこでも好きな情報を見れるネットにとっての1秒は、とても価値のあるものだと思います。Entry検索フォームプロフィールAuthor:Hellowmail:hkdesign.mail☆gmail.com☆を半角@に変えてください。HenniKodawaruDesign略してHKDブログテンプレートならHKDにようこそ!このサイトではFC2で使える共有テンプレートを配布しています。サイトについての説明はこちらをどうぞ。like!」を作りました。機能1:はてなハイクをサイト上に投稿できる機能2:はてなハイク投稿時に同時にtwitterにも投稿する詳しくは次のURLへお越しくださいhk-factoryGoogleウェブストアプラグインギャラリーブログ管理画面の共有プラググイン追加から、作者:hkdesignと検索してダウンロードしてください。日付が未来になっている記事の表示設定CustomRssReaderを2つ同時に使う方法カスタムデザインサンプルImageClock詳しくはこちらカスタマイズはこちらImageClockを二つ以上表示する方法ImageClockカスタマイズ用Flashを作成テンプレートギャラリーブログ管理画面の共有テンプレート追加から、作者:hkdesignと検索してダウンロードしてください。詳しくはこちら動作環境についてテンプレートは以下の環境・方法で動作確認を行ってからFC2に申請しています。記載の環境でも表示が崩れて見えない場合は連絡してくれるとありがたいです。BrowserLabを使ってチェックしています。BrowserLabhttps://browserlab.adobe.com/ライセンスについてライセンス形態はGPLライセンスをとります。簡単に言うと次の4つです。カスタマイズ・再配布など連絡なしに使用OK。著作権表示は消したらダメです。なんらかの損害が出た場合は自己責任です。再配布する場合、GPLライセンスが適用されます。ブログテンプレートならHKD。