Ki ga izraža

Optimizirajte slike

Optimizacija preprosto pomeni ohranjanje velikost slike majhno vodenja kakovosti slike na zahtevano stopnjo. Obstaja na kupe postopkov, ki se lahko enkrat izvajajo za optimizacijo slik, preden se vkrca na strežniku za dostavo. Orodja, ki jih uporabljamo za ustvarjanje teh slik (Photoshop, ognjemet itd) imajo običajno orodje, ki uporabnikom omogočajo optimizacijo slike za uporabo v spletu.
• Preverite, GIF, da vidim, če uporabljate palete velikosti, ki ustreza številu barv v sliki. Ko slika je s 4 barv in 256 barvno paleto, potem bi podoba še bolj optimizirano

• Pretvarjanje GIF je, da ko PNG je mogoče, in vidim, če je prihranek. Bolj pogosto kot ne, ni. Ne odlašajte z uporabo PNG-ih, saj so v celoti podpira večino pogosto uporabljenih brskalnikov. Pričakujejo od animacijskih zmogljivosti PNG lahko naredimo tisto, kar počne GIF, vključno s preglednostjo.

• Za slike, ki se uporabljajo v sprites CSS, poskrbi da so slike v Sprite vodoravno v nasprotju z vertikalno navadno za posledico manjši velikosti datoteke. Prav tako združujejo slike s podobnimi barvami v Sprite. To vam pomaga, da barvna Število nizka, v najboljšem primeru pod 256 barvami, tako da se prilegajo v PNG8.

• Če uporabljate favicon.ico, naj bo majhen, po možnosti pod 1K.

Uporabite ustrezno zmanjšati / spremeni velikost slike.

Vedno poskusite in uporabi slik, oziroma ne uporabljajte večjo sliko, kot jo potrebujete samo zato, ker lahko nastavite širino in višino v HTML. Če želite prikazati 100 pik 100 pik X slike na strani, potem ne uporabite pomanjšane slike 200x200px.

Uporaba Progressive slike

Spletni brskalnik je že postane Slike postopoma. Da bi to naredili še boljši, preprosto shranite GIF ali PNG slike s "prepletenih" možnost, ali vaše JPEG s "postopnim" možnost.

Tam je v teku razprava med uporabniki spleta, ali uporaba progresivne slike je blagoslov ali ovira. Tudi progresivno tehta približno 20% več kot njegov kolega, ki niso postopno. Torej, če mislite, da postavitev uporablja slike, ki ne ovirajo uporabniško izkušnjo da bi bilo postopno, vas prosimo, da to storijo.

Vključi JavaScript organizacij na dnu dokumenta HTML

Če nimate document.write (ali dinamično generacija vsebino strani s pomočjo javaScript) vstaviti del vsebine strani je v tvojih skript, premaknite scenarij vključuje izjavo na dnu strani, pred koncem TELO oznako.
HTTP/1.1 specifikacija kažejo, da naložite brskalnik največ dva komponent, vzporedno na gostitelja. Če služijo slike iz več gostiteljskega imena, lahko dobite več kot dve downloads, da se pojavljajo vzporedno. Medtem ko scenarij je prenos pa brskalnik ne bo začela druge prenose, tudi na različnih gostiteljskega imena.
Obstajajo tudi načini za dinamično ustvarjanje skripta vozlišč in obremenitev oddaljenih skripte, ko je stran naložena z uporabo AJAX.

Zunanje strukture vam JavaScript'S

Uporaba zunanjih datotek JavaScript bo imelo za posledico hitrejše nalaganje strani, saj so datoteke shranjene JavaScript s strani brskalnika. "Inline JavaScript je v dokumentih HTML dobili prenesli vsakič HTML dokument se zahteva. To bi dejansko zmanjšalo število zahtev HTTP, nato se poveča velikost HTML dokumenta. Zunanji JavaScripta, so cached s strani brskalnika, velikost dokumenta HTML se zmanjša, ne da bi povečanje števila zahtev HTTP.
Prosimo, upoštevajte, da se, če uporabniki na vašo spletno stran, imajo več pogledov strani na seji in veliko vaših straneh, ponovno uporabljajo enake skripte in slogi, obstaja večja možnost koristi od zunanjih predpomnilniku datotek.

Pakiranje Tvoj JavaScript datoteke

V primeru javaScript, za razliko od CSS, datoteke lahko crunched uporabo nekaterih standardnih algoritmov, ki bi dala znižano velikost datoteke kot samo odstranite presledke ali tabulatorje. Primer javascript pakirnice lahko najdete tukaj http://dean.edwards.name/packer/

Znebite se vseh podvojene Scripts

To je zelo nenavadno, da bi se podvajajo celotne skripte, vendar pregled desetih najboljših ameriških spletnih strani je pokazala, da dve od njih vsebuje podvojeno scenarij. Dveh izvodih skripte vendar očitno zmanjšuje učinkovitost z ustvarjanjem nepotrebne zahteve HTTP in zapravlja JavaScript izvedba.
Poleg tega v mnogih primerih, čeprav so skripte imena so drugačna, obstaja verjetnost podvojene skripte znotraj iste strani zaradi velikosti skupine in števila scenarijev.

Zmanjšajo dostop DOM elemente, kjer je mogoče

Dostop DOM elemente z JavaScriptom je počasen, tako da bi imeli bolj odzivno strani, morate:
• Začasni sklicevanje na dostopni elementi
• Posodobitev vozlišča "offline" in jih nato dodajte v drevo
• Izogibajte določitvi postavitev z JavaScriptom

Ločeno obnašanje vsebini in navedbi

Tako kot smo ločeni Predstavitev (CSS / XSLT) iz vsebine (XHTML / XML), moramo ločiti tudi vedenje (JavaScript). To se imenuje nevsiljiv Javascript. Tako kot smo povezave do zunanjih datotekah CSS, moramo povezati z zunanjimi datotekami javascript.

Namesto trdega kodiranja vedenja v vsebino (npr. onmouseover, onclick, itd), je treba dinamično obnašanje se dodajo elementi, razrede in unikatnih elementov (IDS) z uporabo DOM. Temeljni dokument, vsebina, bi moral vsebovati le veljavna XHTML / XML in ni Javascript.
Javascript mora bogatenje vsebin z dodajanjem vedenje. Vsebina mora ostati koristne in uporabne brez JavaScript (ali brez polno podporo javascript).

Imam shranjene tem členom starosti nazaj, je žal! I dont spominjati vir ... vendar se je zdelo koristno za nas, ki se morajo zavedati, o občinstvu, za katerega smo razvili spletno stran za ... tako da tukaj je i

Stran teža se lahko uporablja za določitev čas prenosa za določeno stran na različnih hitrosti internetne povezave. Kot primer, Spodnja tabela prikazuje čas prenosa za tri različne strani, na številnih priljubljenih hitrosti povezave.

Prednosti zaradi manjše teže strani?

Pozitiven učinek zmanjšanje prejemkov teže strani tako lastnike spletnih strani in potrošnike. Potencialne prednosti vključujejo:

1. Strani nalaganje hitrejše. Najbolj očiten vpliv zmanjševanja teže strani je, da bo obremenitev vaše spletne strani hitreje, za obiskovalce, ne glede na hitrost povezave.
2. Nižje krat obremenitve strani ustvariti bolj udobno obiskovalcev. Obiskovalci manj verjetno, da postane razočaran in gredo drugam, če vaše strani naložite hitro. Po drugi strani pa počasno polnjenje straneh so eden od načinov, da izgubijo najzanesljivejši obiskovalce in potencialne stranke.
3. Hitrejše obremenitev-krat bo prispevala k povečanju konverzijo. Več obiskovalci bo ostal na vaši strani več. Več od njih bo na koncu nakupovanje, se prijavite za vašega glasila ali knjig označevanje vaše spletne strani.
4. Vaše blagovne znamke zaznava se bo krepila. Vračajo kupci ter za prvič obiskovalci bodo podobne bolj nagnjeni k opisali vašo spletno stran (in poslovni), kot "strokovni", če vaše strani naložite hitro.
5. Strani z čisto, trdno kode se pogosto indeksirajo bolj učinkovito z naravnimi iskalnikov.
6. Strani optimizirane za težo lahko dejansko prihranite stroške pasovne širine na zelo prometnih mestih. 100.000 strani vsak z maso 150 Kb bo potrebno dvakrat več pasovne širine, od ponudnika internetnih storitev kot 100.000 strani, vsaka teže 75 Kb. Za ponudnike internetnih storitev, ki zaračunavajo za pasovno širino, ki se uporablja ali za overages, lahko to zmanjšanje ustvariti znatne prihranke na pasovno širino stroškov.

Upošteva naslednje podatke, objavljene v poročilu

Če XML / XSL preoblikuje je vaš domian, nato pa so časi, ko želimo peice dinamične kode, ki se uporabljajo knjižnice element (ki se je ponovno uporabiti). Mislim, bi verjetno bolj jasno, na primer s tem scenarijem.

Predstavljajte si, da ustvarjate spletno stran (in z uporabo XML, XSL transfroms gredo zraven) in večina strani bi imela Komentarji modula. No! potem kopirate ali prilepite to kodo v vsako stran (predlogo, ki dont sem rekel, vendar se za vzdrževanje in predelava nočno moro) ali še bolje, ustvarite Vključi datoteko, ki bi ga lahko potegnil v povsod, kjer želite, da na svojo stran ( i) ...
Torej, kako bomo POVZROČIJO XSL Vključi datoteko in jo vključujejo v notranjosti druge datoteke XSL? Tukaj je, kako ...

Samo, da bi stvari jasno ... tukaj je hiter seznam datotek, ki bi si ustvarili ... tukaj bomo tudi informacije o sadju in zelenjavi v matično stran, imenovano hrane.

1. food.xml - xml datoteko podatkov, na katerih bo treba uporabiti preoblikovanje
2. food.xsl - Glavni XSL datoteko, ki preoblikujejo naše food.xml
3. inc_fruits.xsl - XSL vsebuje datoteko, ki bo postala sadje podatkov
4. inc_vegtables.xsl - XSL vsebuje datoteko, ki bo postala vetetables podatkov

I dont mislim, da imajo veliko razložiti, bodo kode za zgornje elemente, so samoumevne ...

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>

Prenesite vse zgoraj navedene datoteke tukaj (252 prenosov)