BT ifade

Görüntüler Optimize

Optimizasyon basitçe istenen düzeyde görüntü kalitesini koruyup görüntü küçük boyutu tutmak anlamına gelir. Kez onlar teslimat için sunucuya yüklenen önce görüntüleri optimize etmek için yapabilir prosedürlerin yükler vardır. Biz (Photoshop, Fireworks vb) bu ​​görüntülerin oluşturulması için kullandığınız araçları genellikle kullanıcıların web kullanımı için görüntü optimize etmek için izin araçlar var.
• Bu görüntüdeki renk sayısına karşılık gelen bir palet boyutu kullanıp kullanmadığınızı görmek için GIF en edin. Bir görüntü 4 renk ve 256 renk paleti kullanırken, daha sonra görüntü daha da optimize edilmiş olabilir

• Convert GIF, PNG kullanarak mümkünse için var ve bir tasarruf olup olmadığını görmek. Çoğu zaman, yoktur. Onlar tam sık kullanılan tarayıcıların çoğu tarafından desteklenen olarak, PNG kullanmanız için tereddüt etmeyin. PNG saydamlık dahil, bir GIF ne yapabilirim animasyon yetenekleri bekliyoruz.

• CSS sprite kullanılan görüntüler için, sprite gibi yatay olarak daha küçük bir dosya boyutunda dikey olarak genellikle sonuç karşıt görüntüleri düzenleyebilirsiniz. Ayrıca, bir sprite benzer renge sahip görüntüler birleştirir. Bu nedenle ideal bir PNG8 sığacak şekilde 256 renk altında, renk sayısı düşük tutmanıza yardımcı olur.

• Bir favicon.ico kullanıyorsanız, tercihen 1K altında, küçük tutmak.

Düzgün ölçeklenir / resim yeniden boyutlandırılmıştır kullanın.

Her zaman denemek ve boyutlandırılmış görüntüleri kullanmak, yani size HTML genişlik ve yükseklik ayarlayabilirsiniz sırf ihtiyacınız olandan daha büyük bir resim kullanmayın. Eğer sayfada 100px X 100px görüntü görüntülemeniz gerekiyorsa, o 200x200px görüntü küçültülmüş bir kullanmayın.

Aşamalı Görüntüler kullanın

Bir web tarayıcısı zaten giderek Görüntüler vermektedir. Daha iyi yapmak için, sadece "ilerici" seçeneği ile "interlaced" seçeneği, ya da JPEG ile GIF ya da PNG görüntüleri kaydetmek.

Ilerici görüntülerinin kullanımını bir lütuf ya da bir engel olup olmadığı gibi web kullanıcıları arasında devam eden tartışmalar vardır. Ayrıca ilerici bir görüntü onun olmayan ilerleyici meslektaşı göre yaklaşık% 20 daha fazla ağırlığa sahip. Eğer düzen ilerici olmanın kullanıcı deneyimi engel olmayacak görüntüleri kullanan düşünüyorsanız Yani, bunu yapmak için çekinmeyin.

JavaScript Kullanıcı HTML belgesi Dibi ekleyin

Eğer komut sayfanın içeriği parçası eklemek için document.write (veya JavaScripts kullanarak sayfa içeriğinin herhangi bir dinamik nesil) yoksa, BODY etiketinin sonuna kadar sayfanın altına ifadeyi dahil komut dosyası taşıyın.
HTTP/1.1 belirtimi tarayıcılarda hostname başına paralel olarak en fazla iki bileşenlerini karşıdan önerir. Birden çok sunucu isimleri sizin görüntüleri hizmet varsa, paralel meydana ikiden fazla indirme alabilirsiniz. Bir komut dosyası indirirken, ancak, tarayıcı bile farklı konak üzerinde, başka herhangi bir indirme başlamaz.
Dinamik SCRIPT düğümleri oluşturmak ve sayfa AJAX kullanarak yüklendikten sonra uzaktan komut dosyalarını yüklemek için bir yol da vardır.

JavaScript çalışmasına en Externalise

JavaScript dosyaları tarayıcı tarafından önbelleğe çünkü harici JavaScript dosyalarını kullanarak sayfaları daha hızlı yükleme neden olacaktır. Inline JavaScript en 'HTML belgelerinde HTML belgesi talep her zaman indirilir. Bu aslında yapılan HTTP istekleri sayısını azaltabilir ama daha sonra HTML belgesinin boyutunu artırır. Dış JavaScript en tarayıcı tarafından önbelleğe alınır; HTML belgenin boyutunu HTTP istek sayısını artırmadan düşer.
Sitenizde kullanıcıların oturum başına birden fazla sayfa görünümü var ve sayfaları yeniden kullanmak aynı komut dosyalarını ve stil birçok varsa, önbelleğe harici dosyalardan daha büyük bir potansiyel faydası var, unutmayın.

Sizin Javascript Dosyalar Paketi

JavaScripts durumunda, CSS aksine, dosyaları sadece boşluk veya sekme kaldırarak daha düşük dosya boyutu verecek bazı standart algoritmaları kullanarak darlığı olabilir. Javascript packer bir örneği burada http://dean.edwards.name/packer/ bulunabilir

Herhangi bir Yinelenen Scripts kurtulun

Bu tüm betikleri çoğaltılmış olabileceğini çok sıradışı, ama en iyi on ABD web sitelerinin bir inceleme ikisi duplike komut içerdiğini göstermiştir. Komut çoğaltın ama açıkçası gereksiz HTTP istek ve israf JavaScript yürütme oluşturarak performansı azaltır.
Komut isimleri farklı olsa da, birçok durumda, komut ekip büyüklüğü ve sayısı nedeniyle aynı sayfa içinde yinelenen komut bir ihtimal.

Mümkünse DOM öğeleri erişim Küçült

JavaScript ile DOM öğelerini erişme, bunları asla bir daha duyarlı sayfasına sahip olmak için çok yavaş:
Erişilen elemanları • Önbellek referanslar
Ağaç ekleyebilirsiniz ardından • Güncelleme düğümleri "çevrimdışı" ve
• JavaScript ile düzeni sabitleme kaçının

İçerik ve Sunum ayrı Davranış

Biz İçerik (XHTML / XML) ayrı Sunum (CSS / XSLT), biz de Davranış ayırmak gerektiği gibi (JavaScript). Bu göze çarpmayan Javascript olarak adlandırılır. Harici CSS dosyaları bağlamak gibi, harici javascript dosyaları bağlanmalıdır.

Bunun yerine içeriği (örneğin, onmouseover, onclick, vb) Kodlama sabit davranış, davranış dinamik unsurları, sınıfları ve DOM kullanarak eşsiz elemanlar (kimlikleri) eklenmelidir. Temel belge, içeriği, sadece geçerli XHTML / XML ve hiçbir javascript içermelidir.
Javascript davranışı ekleyerek içeriğini artırmak gerekir. Içeriği faydalı ve javascript (ya da tam javascript desteği olmadan) olarak kullanılabilmelidir kalmalıdır.

Çok üzgünüm, geri bu makalede yaş kaydetmiş! Ben kaynağı hatırlamıyorum ... ama bu bizim için siteyi geliştirmek kimin için seyirci haberdar olması bizim için yararlı görünüyordu ... İşte i

Sayfa ağırlığı internet bağlantı hızları çeşitli Verilen bir sayfa için yükleme süresi belirlemek için kullanılabilir. Örnekleme yoluyla, aşağıdaki tabloda popüler bağlantı hızları bir dizi az üç farklı sayfaları için indirme kez gösterir.

Sayfa ağırlığı azaltmak Faydaları?

Sayfa ağırlık faydaları web sitesi sahipleri ve tüketiciler azaltılması olumlu etkisi. Potansiyel faydalar şunlardır:

1. Sayfalar daha hızlı yüklenir. Sayfa ağırlık azaltmanın en belirgin etkisi, web sitenizin sayfalarını bakılmaksızın bağlantı hızını, ziyaretçiler için daha hızlı yüklenmesini olacaktır.
2. Alt sayfa yükleme süreleri daha rahat ziyaretçi oluşturun. Ziyaretçiler hüsrana uğruyor ve sayfaları hızla yüklerseniz başka gitmek için daha az olasıdır. Öte yandan, yavaş yükleme sayfalarında ziyaretçi ve potansiyel müşterileri kaybetmek en emin yollarından biridir.
3. Daha hızlı yük-kat artmış dönüşüm katkıda bulunacaktır. Daha fazla ziyaretçi sitenizde daha uzun kalır. Bunlardan daha fazla, alışveriş yaparken sizin gazeteye abone olma veya sitenizin kitap-işaretleme sona erecek.
4. Sizin marka algısı artırılacaktır. Geri dönen müşteriler ve ilk kez ziyaretçilerin hem kendi sayfaları hızla yüklerseniz "profesyonel" olarak site (ve iş) tanımlamak için daha fazla eğilimli olacaktır.
5. Temiz, sağlam kod sayfaları genellikle doğal arama motorları tarafından daha etkin endeksli olacak.
6. Ağırlığı için optimize edilmiş sayfalar aslında yüksek trafik sitelerinde bant genişliği ücretleri kaydedebilirsiniz. 100.000 sayfa her birinin ağırlığı 150 Kb 100.000 sayfa Her bir kilo 75 Kb daha ISS'nizden iki kat daha fazla bant genişliği gerektirir. Kullanılan bant genişliği veya Tesellüm Fazlalıkları için ücret ISS'ler için bu azalma bant genişliği ücretleri önemli tasarruflar oluşturabilirsiniz.

Bir rapor yayınlanan aşağıdaki verileri göz önünde

XML / XSL sizin Domian ise Dönüşümleri, o zaman (tekrar kullanılabilir yapılacak) kütüphane öğesi kullanılacak Dinamik kod takıyorum istediğiniz zamanlar vardır. Ne demek istediğimi, muhtemelen bu örnek senaryo ile daha net olabilir.

Eğer bir web sitesi oluşturmak (ve XML, XSL transfroms tabii kullanarak) ve sayfaların çoğu Yorumlar Modülü olurdu hayal edin. Eh! sonra da her sayfası şablonu (ki diyorum, ancak bakım ve tamir bir kabus yapmak Ağrı) veya daha da iyisi bu kodu kopyalayıp yapıştırın veya, sen (sayfanızda istediğiniz yere kadar çekti edilebilir bir INCLUDE dosyası oluşturmak lar) ...
Yani NASIL bir XSL INCLUDE dosyası CREATE ve başka bir XSL dosyası içine dahil MUSUNUZ? Burada nasıl ...

Sadece şeyleri açıklığa kavuşturmak için ... burada yaratacağını dosyalarını hızla listesi ... Burada, gıda adlı bir ana sayfa içine meyve ve sebzeler hakkında bilgi dahil edilecektir.

1. food.xml - dönüşüm uygulanacak xml veri dosyası
2. food.xsl - Bizim food.xml dönüştürecek ana XSL dosyası,
3. inc_fruits.xsl - XSL meyveler verileri işlerler dosya dahil
4. inc_vegtables.xsl - XSL vetetables verileri işlerler dosya dahil

Ben fazla açıklama olduğunu düşünüyorum değilsin, yukarıdaki öğeleri için kodları, kendini açıklayıcı olacaktır ...

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: 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_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>

Yukarıdaki tüm dosyaları burada (251 downloads) indirin