2007/04/26

HTMLの最適化を最大にするTips


Optimize HTML size to the MAX

上記サイトで、HTMLの最適化を最大にする8つのTipsが紹介されています。

なんちゃってまとめですので、正確なことは元記事をご参照ください。

基本的に、以下の2つのスタンスで最適化をするようです。

  • ユーザへのレスポンス回数を減らす
  • データ転送量を少なくする

1. Rename your images

イメージファイルの名前を短くしましょう。

  • ファイル名の変更
    • "myarticlerating.png" → "r.png"
  • フォルダ名の変更も忘れずに
    • "images/" → "i/"

2. Use short CSS selectors

CSSのセレクタの名称を短くしましょう。

  • “.aredparagraph” →“.arp”
  • “.thisclassisblue” → “.tcb”

3. Use a CSS compressor

CSS圧縮ツールを使いましょう。

例えば、CLEANCSS があります。

4. PNG is not always the format to choose

 PNGはいつでも最適な選択ではありません。

容量を抑えたいときは、GIFを使うことも考慮しましょう。

5. Rename your JavaScript functions and compact your .js files

JavaScriptの関数名を短くしましょう。

  • “ratearticle” → "r"

JavaScriptファイルを圧縮しましょう。

JavaScript圧縮ツールには、minifyがあります。

6. Include only what is needed

JavaScriptは必要な分だけ読み込みましょう。

ログイン後の機能を、ログイン前に読み込む必要はありません。

7. Use PHP or HTML Tidy

Tidyを使って、ブラウザのレンダリングに不要なデータを削除しましょう。

PHPからTidyを使用することもできる?(←今いち不明)

8. Use GZIP compression

GZIP圧縮を使いましょう。

IISはこちら、Apacheはこちらを参照してください。

 

この対応により、10万ページビューのサイトで、通信量が1日当たり1.4GBも圧縮でき、月間では43GBも圧縮できたそうです。

力技な部分もありますが、パフォーマンス向上のヒントにしたいですね。

 

◇関連エントリー

 


スポンサーリンク


このエントリーをはてなブックマークに追加




Twitter ではブログにはない、いろんな情報を発信しています。


コメント

なんというか原始的な方法ですね…。
原始的といえば、ホワイトスペースの削除が挙がっていないようですがどうでしょうか。
複数のホワイトスペースを1つにまとめる、意味のないホワイトスペースを削除する、改行を削除するなど…。

ファイル名称を短縮するより手軽に、確実に効果が出そうです。

市井賢児さん、コメントありがとうございます!

確かにこの記事に載っている方法の多くは原始的で、保守効率を考えたら採用しにくい内容ですよね。その一方で、パフォーマンスを落としている原因の一端が理解できれば、パフォーマンス改善の際のヒントになりそうだとも思います。

市井さんのホワイトスペースの削除などは、効果がありそうですね。情報ありがとうございます。

コメントを書く



プロフィール

  • 名前:fnya
    経歴:
    SE としての経験は15年以上。様々な言語と環境で業務系システム開発を行い、セキュリティ対策などもしていました。現在は趣味SE。

    Twitter では、ブログでは取り上げない情報も公開しています。


    ブログについて

    このブログは、IT、スマートフォン、タブレット、システム開発などに関するさまざまな話題を取り上げたり、雑感などをつづっています。

    現在、Enty で支援を受け付けています。もしよければご支援ください。



    >>ブログ詳細
    >>自作ツール
    >>運営サイト
    >>Windows 10 まとめ

    Twitter のフォローはこちらから Facebook ページはこちら Google+ページはこちら RSSフィードのご登録はこちらから