ITを表現する

画像を最適化する

最適化は、単に必要なレベルに画像の品質を維持し、画像の小さなサイズを維持することを意味します。 一度それらが配信のためにサーバーにロードされる前に画像を最適化するために行うことができる手続きの負荷があります。 我々はこれらの画像の作成に使用するツール（PhotoshopやFireworksなど）は、通常、ユーザーはWeb用の画像を最適化するためのツールを持っています。
•彼らは、イメージ内の色数に対応したパレットサイズを使用しているかどうかを確認するためにGIFのを確認してください。 画像は4色と256色パレットを使用している場合、そのイメージをさらに最適化されたかもしれません

•GIFのは、PNGの可能な限りに変換し、セーブがあるかどうかを確認します。 多くの場合、があります。 彼らは完全に一般的に使用されるブラウザのほとんどがサポートされているように、PNGの使用をためらうことはありません。 PNGは、透明性を含めて、GIFが何を行うことができますアニメーション機能を期待しています。

•CSSスプライトに使用されている画像については、水平に小さいファイルサイズで縦方向に、通常の結果とは対照的にスプライトで画像を配置します。 また、スプライトに似た色で画像を結合します。 これは、理想的なので、PNG8に収まるように256色で、色数を低く保つことができます。

•[favicon.icoを使用している場合は、好ましくは1Kで、それを小さく保つ。

適切にスケーリング/リサイズした画像を使用しています。

常にしようとするとリサイズした画像を使用して、すなわち、あなたがHTMLの幅と高さを設定することができますという理由だけで必要以上に大きな画像を使用しないでください。 ページ上で100pxにX 100pxに画像を表示する必要がある場合は、200x200pxの画像縮小を使用しないでください。

プログレッシブ画像を使用します。

Webブラウザはすでに徐々に画像をレンダリングします。 さらに優れた操作を行うには、単に "プログレッシブ"オプションと "インターレース"オプション、またはJPEG画像を使用してGIFまたはPNGイメージを保存します。

プログレッシブ画像の使用は祝福や障害であるかどうかなどのWebユーザーの間で進行中の議論があります。 また、プログレッシブ画像は、その非プログレッシブ対応よりも約20％以上の重量を量る。 あなたはレイアウトがプログレッシブであることによってユーザー·エクスペリエンスを妨げません。イメージを使用と考えられる場合なので、これを行うには、お気軽に。

JavaScriptのHTML文書の最後にを含む

あなたのスクリプトで、ページのコンテンツの一部を挿入するdocument.writeを（もしくはJavaScriptを使用してページの内容のいずれかを動的に生成）されていない場合は、BODYタグの終わりの前にページの一番下に文を含むスクリプトを移動します。
HTTP/1.1仕様書は、ブラウザがホスト名ごとに並列に2つ以下のコンポーネントをダウンロードすることを示唆している。 あなたが複数のホストからあなたのイメージを提供する場合には、並行して発生するつ以上のダウンロードを得ることができます。 スクリプトがダウンロードされていますが、しかし、ブラウザはさらに別のホスト名には、他のダウンロードを開始しません。
動的にスクリプトノードを作成し、ページがAJAXを使用してロードされた後、リモートスクリプトをロードする方法もあります。

JavaScriptのあなたをExt​​ernalise

JavaScriptファイルがブラウザによってキャッシュされるため、外部のJavaScriptファイルを使用すると、ページのロードが高速になります。 インラインJavaScriptの 'HTML文書には、HTMLドキュメントが要求されるたびにダウンロードされる。 これは実際に行われたHTTP要求の数を減らすかもしれないが、その後、HTMLドキュメントのサイズが大きくなります。 外部JavaScriptのは、ブラウザによってキャッシュされます。HTMLドキュメントのサイズは、HTTPリクエストの数を増やすことなく削減されます。
あなたのサイト上のユーザーがセッションごとに複数のページビューを持っていて、ページを再使用するのと同じスクリプトとスタイルシートの多くの場合、キャッシュされた外部ファイルからより多くの潜在的な利点がありますのでご注意ください。

JavaScriptファイルをパックする

JavaScriptの場合には、CSSとは異なり、ファイルは単にスペースまたはタブを削除するよりも縮小ファイルサイズを与えるであろういくつかの標準的なアルゴリズムを使用してクランチ可能性があります。 JavaScriptのパッカーの例はここhttp://dean.edwards.name/packer/見つけることができます

任意のスクリプトが重複を取り除く

それは全体のスクリプトが重複する可能性があることは非常に珍しいですが、10上の米国Webサイトの見直しは、それらの2が重複するスクリプトが含まれていることを示しています。 スクリプトが重複していますが、明らかに不必要なHTTPリクエストと無駄なJavaScriptの実行を作成することにより、パフォーマンスが低下します。
スクリプト名が異なるものの、また、多くの場合、スクリプトのチームのサイズと数のため、同じページ内のスクリプトが重複する可能性があります。

可能であれば、DOM要素にアクセスして最小限に抑える

JavaScriptでDOM要素にアクセスすると、より応答ページを持つために非常に遅いですが、以下を行う必要があります。
アクセスの要素に•キャッシュ参照
• "オフライン"ノードを更新してツリーに追加
•JavaScriptを使用してレイアウトを固定しないでください

コンテンツとプレゼンテーションから独立した動作

単にコンテンツ（XHTML / XML）から我々は独立したプレゼンテーション（CSS / XSLT）として、我々はまた、動作（JavaScript）を分離する必要があります。 これは控えめなJavaScriptと呼ばれています。 我々は外部CSSファイルへのリンクと同じように、我々は外部のJavaScriptファイルにリンクする必要があります。

代わりに、コンテンツ（例えば、onmouseoverイベントは、onclickなど）にハードコーディングする動作のため、動作が動的に要素、クラス、およびDOMを使用して一意の要素（ID）を追加する必要があります。 基礎的なドキュメント、コンテンツは、唯一の有効なXHTML / XMLとしないjavascriptを含める必要があります。
Javascriptが動作を追加することにより、コンテンツを強化する必要があります。 コンテンツにはJavaScript（または完全なJavaScriptサポートを持たない）を使用せずに有用であり、使用可能なままにしてください。

私は戻って、申し訳ありませんので、この記事で年齢を保存しました！ 私はソースを覚えていない...しかし、それは我々のためのサイトを開発する誰のために、観客約注意しなければならない私たちにとって、有用だった...ので、ここでiは

ページの重さは、インターネット接続速度の様々な特定のページのダウンロード時間を決定するために使用することができます。 例によって、次の表では、人気の高い接続速度の数は少なくとも3つの異なるページのダウンロード時間を示しています。

ページの重さを減らすことのメリット？

ページの重さの利点のウェブサイトの所有者と消費者の両方を削減するのにプラスの影響。 潜在的な利点は次のとおりです。

1. ページの読み込み速度が速くなります。 ページの重さを減らすことの最も明白な影響は、あなたのウェブサイトのページに関係なく、接続速度の、訪問者のために高速にロードすることです。
2. 下のページのロード時間がより快適な訪問者を作成します。 訪問者は、欲求不満になると、ページが迅速にロードする場合は別の場所に行くことが少なくなります。 一方、遅いローディングのページは訪問者や潜在的な顧客を失う確実な方法の一つです。
3. より速くロード時間が増加した変換に貢献していきます。 より多くの訪問者は、もはやあなたのサイトに滞在します。 それらの多くは、ニュースレター、またはブックマーキングサイトにサインアップし、購入をすることになります。
4. あなたのブランド認知を向上させることになります。 戻って、顧客と初めての訪問者は同様にあなたのページにすばやく読み込む場合は、 "専門家"としてあなたのサイト（およびビジネス）を記述するより多くの傾斜になります。
5. きれいで、堅実なコードを含むページは、しばしば自然の検索エンジンでより効果的に索引付けされます。
6. 重量用に最適化ページが実際に高トラフィックのサイトで帯域幅の費用を節約することができます。 100,000ページには、各重量150 KBは、100,000ページ、各重量75 KB以上のISPからの二倍の帯域幅を必要とします。 使用される帯域幅または過量仕込みのために充電するISPのために、この削減は、帯域幅の費用を大幅に削減を作成することができます。

レポートに掲載され、次のデータを検討

XML / XSLがdomianで変換した場合、我々は（再利用可能ななされる）ライブラリ項目を使用する動的なコードのピースはしたい時があります。 私が意味するものは、おそらくこの例のシナリオをより明確にすることができます。

あなたのウェブサイト（および、XML、XSL transfroms ofcourseのを使用）を作成しており、ページのほとんどはコメントモジュールを持っているでしょう想像してみてください。 よく！ あなたはすべてのページテンプレート（私が言うが、メンテナンスや手直し悪夢作る持っていけない）、または、より良いにこのコードをコピーしたり貼り付けか、あなたがあなたのページにそれを望むどこまででプルアップすることがINCLUDEファイルを作成します（ S）...
では、どのようにXSL INCLUDEファイルを作成し、別のXSLファイルの内部に含まれていますか ？ ここでどのようには...

物事を明確にするため...ここにあなたが作成したファイルの簡単なリストは...ここで、我々は、食品と呼ばれる親ページに果物や野菜についての情報を含むでしょう。

1。 food.xml - 変換が適用される上のXMLデータファイル
2。 food.xsl - 私たちのfood.xmlを変えていく主なXSLファイル、
3。 inc_fruits.xsl - XSLは、果物のデータをレンダリングするファイルを含む
4。 inc_vegtables.xsl - XSLはv​​etetablesデータをレンダリングするファイルを含める

私は非常に説明していると思ういけない、上記の要素のコードは、自明だろう...

FOOD.XML


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>

<vegetables>
<item name="spinach" moreinfo="http://www.spinach.com">Spinach is full of iron</item>
<item name="asparagus" moreinfo="http://www.asparagus.com">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="http://www.fenugreek.com">Fenugreek is rich in vitamin C</item>
</vegetables>
</food>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<hr/>
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<hr/>
<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>

<hr/>
</ BODY>
</ HTML>
オプション</ xsl：テンプレート>
オプション</ xsl：スタイルシート>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

（251ダウンロード）ここで、上記のすべてのファイルをダウンロード