2008 Mejju 22, 2008

Aħjar Prassi: Ħidma mal Stampi

Itejb Images

Ottimizzazzjoni sempliċiment ifisser li nżommu mal-daqs tal-intrapriżi żgħar immaġini żamma tal-kwalità ta 'immaġini għal-livell meħtieġ. Hemm tagħbijiet ta 'proċeduri li ladarba jista' jwettaq biex itejb immaġini qabel ma jitgħabbew fuq l-server għall-kunsinna. L-għodod li nużaw għall-ħolqien ta 'dawn ix-xbihat (Photoshop, fireworks eċċ) normalment ikollhom għodod li jippermettu lill-utenti biex jottimizzaw l-immaġini għall-użu tal-web.
• Iċċekkja l-fuq GIF biex tara jekk huma jużaw daqs paletta jikkorrispondi għan-numru ta 'kuluri fil-immaġini. Meta l-immaġini huwa użu 4 kuluri u paletta kulur 256, allura l-immaġni jista 'jkun aktar ottimizzati

• Ikkonverti GIF huwa li fejn PNG fuq possibbli u ara jekk hemm iffrankar. Iktar iva milli le, hemm. Toqgħodx taħsibha biex użu ta 'l-PNG, peress li huma kompletament appoġġati mill-maġġoranza tal-browsers komunement użati. Jistennew tal-kapaċitajiet animazzjoni 1 PNG tista 'tagħmel dak GIF ma, inklużi t-trasparenza.

• Għall-immaġini użati fil sprites CSS, tirranġa l-immaġini fl-Sprite orizzontalment għall-kuntrarju vertikalment ġeneralment iwassal għal daqs tal-fajl iżgħar. Ukoll, jikkombinaw immaġini bil-kuluri simili fir-Sprite. Dan jgħinek iżżomm l-għadd kulur baxx, idealment taħt 256 kuluri sabiex tajbin fil-PNG8.

• Jekk qed tuża favicon.ico, jżommha żgħar, preferibbilment taħt 1K.

Uża sewwa skalat / daqs ieħor immaġini.

Dejjem ipprova u l-użu immaġini daqs ieħor, jiġifieri ma jużawx immaġni akbar milli għandek bżonn sempliċiment għaliex inti tista 'tistabbilixxi l-wisa' u għoli fl HTML. Jekk għandek bżonn biex juri immaġni X 100px 100px fuq il-paġna, allura ma jużawx a mnaqqsa immaġni 200x200px.

Uża Images Progressiva

A web browser diġà tirrendi Images progressivament. Biex nagħmlu anke aħjar, ħlief sempliċiment GIF tiegħek jew stampi PNG mal-"xulxin" għażla, jew JPEG immaġini tiegħek mal-"progressiva" għażla.

Hemm dibattitu li għaddej fost l-utenti tal-web dwar jekk użu ta 'immaġni progressiva hija barka jew tfixkil. Wkoll immaġni progressiva jiżen madwar 20% aktar minn kontroparti progressiva tagħha mhux. Allura, Jekk taħseb tqassim użi immaġini li mhux se jfixklu l-utent esperjenza minnha jkunu progressiva, tħossok liberu li jagħmel hekk.


2008 15 mej 2008

Aħjar Prassi: Ħidma mal fuq JavaScript

Inkludi l-JavaScript fil-qiegħ tad-Dokument HTML

Jekk inti ma għandekx document.write (jew kwalunkwe ġenerazzjoni dinamika ta 'werrej tuża javascripts) li daħħal parti mill-kontenut tal-paġna fil skripts tiegħek, jċaqalqu l-iskrittura jinkludu dikjarazzjoni li l-qiegħ tal-paġna, qabel it-tmiem tat-tikketta KORP.
L-ispeċifikazzjoni HTTP/1.1 tissuġġerixxi li browsers tniżżel mhux aktar minn żewġ komponenti b'mod parallel għal kull hostname. Jekk inti sservi tiegħek immaġini minn hostnames multipli, tista 'tikseb aktar minn żewġ downloads li jseħħu b'mod parallel. Filwaqt b'kitba huwa tniżżil, madankollu, il-browser ma tibdiex ebda downloads oħra, anki fuq hostnames differenti.
Hemm ukoll modi biex dinamikament joħolqu lymph Script u t-tagħbija skripts remoti wara l-paġna hija mgħobbija bl-użu Ajax.

Testernalizza inti ma JavaScript

Bl-użu fajls esterni JavaScript se tirriżulta fit-tagħbija aktar mgħaġġel ta 'paġni minħabba li l-fajls JavaScript huma Cached mill-browser. "Inline JavaScript fil HTML dokumenti tikseb jitniżżel kull darba id-dokument HTML huwa mitlub. Dan jista 'effettivament jitnaqqas in-numru ta' talbiet HTTP magħmula iżda sussegwentement iżid id-daqs tad-dokument HTML. Estern JavaScript huma Cached mill-browser; id-daqs tad-dokument HTML huwa mnaqqas mingħajr żieda fin-numru ta 'talbiet HTTP.
Jekk jogħġbok innota li, jekk l-utenti fuq is-sit tiegħek għandhom fehmiet multipli paġna għal kull sessjoni u ħafna paġni tiegħek mill-ġdid jużaw l-istess skripts u stylesheets, hemm benefiċċju potenzjali akbar mill-fajls esterni Cached.

Pakkett Fajls Javascript tiegħek

Fil-każ ta JavaScripts, b'differenza CSS, il-fajls jistgħu crunched tuża xi algoritmi standard li jagħtu daqs tal-fajl mnaqqsa minn sempliċement titneħħa t spazji jew tabs. Eżempju ta 'min jippakkja javascript jista' jinstab hawnhekk http://dean.edwards.name/packer/

Teħles minn kull skripts duplikati

Huwa ferm mhux tas-soltu li skripts kollu jista 'jkun duplikati, iżda reviżjoni tal-għaxar siti fuq web US turi li tnejn minnhom fihom iskrittura dduplikata. Duplikat skripts imma ovvjament inaqqas il-prestazzjoni permezz tal-ħolqien talbiet bla bżonn HTTP u moħlija eżekuzzjoni JavaScript.
Ukoll, f'ħafna każijiet, għalkemm l-ismijiet skripts huma differenti, hemm probabbiltà ta 'skripts duplikat fl-istess paġna minħabba d-daqs tat-tim u numru ta' skripts.

Jimminimizzaw aċċess elementi DOM fejn possibbli

Aċċess elementi DOM ma JavaScript huwa bil-mod hekk sabiex ikollhom paġna aktar reattivi, għandek:
• L-referenzi Cache għal elementi aċċessati
• Il-lymph Aġġornament "offline" u mbagħad żidhom mat-siġra
• Evita iffissar tqassim ma JavaScript

Komportament separata mill-kontenut u l-Preżentazzjoni

Just kif aħna Preżentazzjoni separat (CSS / XSLT) mill-kontenut (XHTML / XML), għandna wkoll separati Komportament (Javascript). Din tissejjaħ Javascript jagħtux fil-għajn. Hekk kif aħna noħolqu link għal fajls esterni CSS, għandna link għal fajls esterni javascript.

Minflok diffiċli imġieba kodifikazzjoni fil-kontenut (eż. onmouseover, onclick, eċċ), l-komportament għandux dinamiku miżjud għall-elementi, klassijiet, u l-elementi unika (IDS) tuża 'l-DOM. Id-dokument sisien, il-kontenut, għandu jkun fihom biss XHTML validu / XML u l-ebda javascript.
Javascript għandhom iżidu l-kontenut billi żżid l-imġieba. Il-kontenut għandu jibqa utli u li jistgħu jintużaw mingħajr javascript (jew mingħajr javascript appoġġ sħiħ).


2008 Mejju 7, 2008

Prattiċi aħjar: Kun konxju tal-piż paġna

I salvati dan etajiet artikolu lura, sabiex Jiddispjacini! I dont remember-sors ... imma deher utli, għalina li għandek tkun taf dwar l-udjenza li għalihom niżviluppaw is-sit għal ... hekk hawn i hija

Piż Page jistgħu jintużaw biex jiddeterminaw il-ħin download għal paġna partikolari fuq varjetà ta 'veloċitajiet konnessjoni Internet. Bħala eżempju, it-tabella li ġejja turi l-ħinijiet ta 'download għal tliet paġni differenti f'għadd ta' veloċitajiet konnessjoni popolari.

Page Times Download Piż

Veloċità Konnessjoni

Page 20 Kb

Page 40 Kb

100 Page Kb

14.4 kbps

12 sec

25 sek

62 sek

28.8 kbps

6 sec

12 sec

31 sek

33.3 kbps

5 sek

10 sek

26 sek

56 kbps (V.90)

2 sek

5 sek

13 sek

64 kbps (ISDN)

2 sek

4 sec

12 sec

128 Kbps (DSL / Cable)

1 sek

2 sek

6 sec

256 Kbps (DSL / Cable)

<1 sek

1 sek

3 sec

Benefiċċji ta 'tnaqqis tal-piż il-paġna?

L-impatt pożittiv tal jitnaqqsu l-benefiċċji ta 'piż paġna kemm sidien websajt u l-konsumaturi. Il-benefiċċji potenzjali jinkludu:

  1. Paġni tagħbija aktar malajr. L-aktar impatt ovvju tas tnaqqis tal-piż paġna huwa li l-paġni website tiegħek se tagħbija aktar mgħaġġel għall-viżitaturi, irrispettivament mill-veloċità konnessjoni tagħhom.
  2. Drabi aktar baxxi tat-tagħbija paġna joħolqu viżitaturi aktar komda. Viżitaturi huma anqas probabbli li jsiru frustrati u jmorru x'imkien ieħor jekk il-paġni tiegħek tagħbija malajr. Min-naħa l-oħra, bil-mod-loading paġni huma wieħed mill-modi sabiex niksbu t-jitilfu viżitaturi u l-klijenti potenzjali.
  3. Faster tagħbija darbiet se jikkontribwixxu għall-konverżjoni miżjuda. Aktar viżitaturi se jibqgħu fuq is-sit tiegħek itwal. Aktar minnhom se jispiċċaw jagħmlu xirjiet, rreġistrar għal newsletter tiegħek, jew ktieb-immarkar sit tiegħek.
  4. Perċezzjoni tiegħek marka ser tissaħħaħ. Klijenti jirritornaw u l-ewwel darba viżitaturi kif ukoll se jkunu inklinati aktar biex jiddeskrivi sit tiegħek (u n-negozju) bħala "professjonali" jekk il-paġni tiegħek tagħbija malajr.
  5. Paġni bl nadif, kodiċi solidu spiss jiġu indiċjati aktar effettiv mill-magni naturali.
  6. Paġni ottimizzati għall-piż jista 'effettivament jiffrankaw spejjeż bandwidth fuq għolja ta' traffiku siti. 100,000 paġni li kull wieħed jiżen 150 Kb se jeħtieġu bandwidth darbtejn daqs mill-ISP tiegħek minn 100,000 paġni kull piż 75 Kb. Għal ISPs li jitolbu għall-bandwidth użati jew għal eċċessi, dan it-tnaqqis jista 'joħloq iffrankar sinifikanti fuq akkużi bandwidth.

Ikkunsidra l-informazzjoni li ġejja, ippubblikat fir-rapport

Abbandun Viżitatur

Ħin tat-tagħbija Page

Perċentwali ta 'utenti
Tkompli Stenna

10 sekondi

84%

15-il sekonda

51%

20 sekonda

26%

30 sekonda

5%


2008 4 Mejju, 2008

Inkludi XSL ġewwa XSL

Jekk XML / XSL tittrasforma huwa domian tiegħek, allura hemm żminijiet meta aħna jixtiequ peice tal-kodiċi Dynamic li għandhom jintużaw partita librerija (li għandhom isiru mill-ġdid użabbli). What I medja, probabbilment tista 'ssir aktar ċara ma' dan ix-xenarju eżempju.

Immaġina li inti qed joħolqu website (u l-użu XML, XSL transfroms Naturalment) u ħafna mill-paġni jkollha Modulu Kummenti. Ukoll! mbagħad jew inti kopja jew paste dan il-kodiċi fis-kull mudell tal-paġna (li I dont jkollhom jgħidu, imma kun manutenzjoni u tinħadem mill-ġdid il-lejl) jew saħansitra aħjar, inti toħloq fajl INCLUDE li jistgħu jiġu miġbuda fit fejn qatt inti tixtieq li fil-paġna tiegħek ( i) ...
Allura kif nistgħu JINħOLOQ fajl INCLUDE XSL u jinkluduha ġewwa ieħor fajl XSL? Hawnhekk huwa kif ...

Just biex tagħmel affarijiet ċara ... hawnhekk hija lista ta 'malajr ta' fajls li inti toħloq ... hawn, se nkunu inkluż info dwar frott u ħxejjex fil-paġna ewlenija imsejħa ikel.

1. food.xml - xml fajl tad-data li fiha l-trasformazzjoni se jiġu applikati
2. food.xsl - fajl prinċipali XSL, li se jittrasforma food.xml tagħna
3. inc_fruits.xsl - XSL jinkludu fajl li se tirrendi data frott
4. inc_vegtables.xsl - XSL jinkludu fajl li se tirrendi data vetetables

I dont think I jkollhom jispjegaw ħafna, il-kodiċijiet għal elementi t'hawn fuq, se jkun awto spjegazzjoni ...

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>


FOOD.XSL


<?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/>
</ Korp>
</ Html>
</ XSL: template>
</ XSL: stylesheet>


INC_FRUITS.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>


INC_VEGETABLES.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_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>

Niżżel il-fajls kollha ta 'hawn fuq hawn (252 downloads)


NDK dar | Jesprimi IT | palat Jesprimi | Penmenship Jesprimi | Awe Jesprimi | Jesprimi Myself