Duke shprehur IT

Jam optimist Images

Optimization thjesht do të thotë mbajtjen e madhësinë e Vogla imazhit mbajtjen e cilësisë së imazhit në nivelin e kërkuar. Ka ngarkesa e procedurave që dikur mund të kryejnë të zgjedh imazhet përpara dhe ata janë të ngarkuar për në server për shpërndarjen. Mjetet që ne përdorim për krijimin e këtyre imazheve (Photoshop, Fireworks etj) zakonisht kanë mjete që lejojnë përdoruesit të zgjedh imazhin për përdorim web.
• Kontrolloni të GIF për të parë nëse ata janë duke përdorur një madhësi paleta korrespondon me numrin e ngjyrave në imazh. Kur një imazh është përdorur 4 ngjyrat dhe një 256 paleta ngjyrë, atëherë imazhi mund të jetë më optimizuar

• Convert GIF PNG është aty ku është e mundur dhe të shohim nëse ka një kursim. Më shpesh sesa jo, nuk është. Mos hezitoni të përdorni të të PNG, pasi ato janë mbështetur plotësisht nga shumica e shfletuesve të përdorura zakonisht. Presin të aftësive animacion a PNG mund të bëni çfarë GIF bën, përfshirë transparencës.

• Për imazhet e përdorura në sprites CSS, organizoni imazhet në Sprite horizontalisht në krahasim me vertikalisht zakonisht rezulton në një madhësisë më të vogël. Gjithashtu, të kombinuar imazhe me ngjyra të ngjashme në një Sprite. Kjo ju ndihmon të mbani numërimi me ngjyra të ulët, në mënyrë ideale me 256 ngjyra në mënyrë që të përshtaten në një PNG8.

• Nëse jeni duke përdorur një favicon.ico, mbajtur atë të vogël, mundësisht nën 1k.

Përdorimi shkallëzuar siç / ridimensionuar imazhin.

Gjithmonë të përpiqemi dhe të përdorni imazhet ridimensionuar, dmth mos përdorni një imazh të madh se ju duhet vetëm për shkak se ju mund të vendosni gjerësinë dhe lartësinë në HTML. Nëse keni nevojë për të shfaqur një imazh 100px X 100px në faqe, atëherë nuk e përdorin një luspa poshtë imazhin 200x200px.

Përdorimi Images progresive

Një shfletues web tashmë bën Images progresive. Për ta bërë edhe më të mirë, thjesht të shpëtuar GIF tuaj ose imazhe PNG me opsionin "gërshetohet", ose imazhe JPEG tuaj me opsionin "progresiv".

Ka debat të vazhdueshëm në mesin e përdoruesve të internetit në se përdorimi i imazhit progresiv është një bekim apo një pengesë. Gjithashtu një imazh progresiv peshon rreth 20% më shumë se homologu i tij jo progresive. Pra, nëse ju mendoni se ju faqosja përdor imazhe që nuk do të pengojnë përdorues përvojë-nga ajo që progresive, të ndjehen të lirë për ta bërë këtë.

Përfshirja e JavaScript në fund të dokumentit HTML

Nëse ju nuk keni document.write (ose ndonjë brez dinamike e përmbajtjes faqe duke përdorur Javascripts) për të futur një pjesë të përmbajtjes së faqes në Scripts tuaj, veprim script përfshijë deklaratë në fund të faqes, e para në fund të tag trupit.
HTTP/1.1 specifikim sugjeron se browsers Shkarko jo më shumë se dy komponentët në mënyrë paralele për hostname. Nëse ju shërbejnë imazhet tuaja nga strehëemra shumta, ju mund të merrni më shumë se dy shkarkime të ndodhë në mënyrë paralele. Ndërsa një skenar i shkarkimit, megjithatë, shfletuesi nuk do të fillojë ndonjë shkarkime të tjera, edhe në strehëemra të ndryshëm.
Ka edhe mënyra për të krijuar dinamike nyjet SCRIPT dhe ngarkesës Scripts largët pas faqe është e ngarkuar duke përdorur AJAX.

Externalise ju të JavaScript

Duke përdorur fotografi të jashtme JavaScript do të rezultojë në ngarkimit të shpejtë të faqeve sepse JavaScript fotografi janë kopje e ruajtur nga të shfletuesit. "Inline JavaScript në dokumentet HTML merrni shkarkuar çdo kohë dokument HTML është kërkuar. Ky fakt mund të zvogëlojë numrin e kërkesave HTTP bëra por më pas rrit madhësinë e dokumentit HTML. Jashtme të JavaScript janë kopje e ruajtur nga të shfletuesit, madhësia e dokumentit HTML është reduktuar pa rritjen e numrit të kërkesave HTTP.
Lutemi kini parasysh se, nëse përdoruesit në faqen tuaj të ketë pikëpamjet e shumta faqe për seancë dhe shumë nga faqet tuaja të ri-përdorin Scripts njëjta dhe stili, nuk është një përfitim i madh potencial nga dosjet cached jashtme.

Pak Files JavaScript juaj

Në rast të Javascripts, ndryshe CSS, fotografi mund mungesa përdorur disa algoritme standarde që do të japin një madhësi të reduktuar fotografisë sesa thjesht largimin hapësira apo skedat. Një shembull i javascript paketues mund të gjendet këtu http://dean.edwards.name/packer/

Get shpëtoj i ndonji Scripts kopjuar

Ajo është shumë e pazakontë që Scripts tëra mund të dyfishohen, por një përmbledhje e dhjetë faqet e lartë amerikanë të internetit tregon se dy prej tyre përmbajnë një skenar të dyfishta. Duplicate Scripts por padyshim redukton performancën duke krijuar kërkesa të panevojshme HTTP dhe tretur Ekzekutimi i JavaScript.
Gjithashtu, në shumë raste, edhe pse emrat Scripts janë të ndryshme, ekziston një mundësi e Scripts kopjuar në të njëjtën faqe për shkak të madhësisë së ekipit dhe numrin e Scripts.

Minimize hyrë elemente DOM ku është e mundur

Përdorimi i elementeve DOM me JavaScript është i ngadalshëm kështu në mënyrë që të ketë një faqe më të përgjegjshëm, ju duhet të:
• Të referencat Cache të elementeve të arrihen
• Të nyjet Update "offline" dhe pastaj shtoni ato në pemë
• Shmangni fiksimin plan urbanistik me JavaScript

Sjellja ndarë nga përmbajtja dhe Paraqitjen

Ashtu si ne Prezentimi i ndarë (CSS / XSLT) prej përmbajtjes (XHTML / XML), ne duhet gjithashtu të ndajë Sjellja (Javascript). Kjo quhet Javascript modest. Ashtu si ne lidhje me fotografi të jashtëm CSS, ne duhet të lidhin me fotografi të jashtëm JavaScript.

Në vend të sjelljes së vështirë kodim në përmbajtjen (p.sh. onmouseover, onClick, etj), sjellja duhet të shtohet në mënyrë dinamike të elementeve, të klasave, dhe elemente unike (ID) duke përdorur dom. Dokument themelor, përmbajtjen, duhet të përmbajë vetëm XHTML / XML dhe asnjë JavaScript.
Javascript duhet të shtoj përmbajtjen duke shtuar sjellje. Përmbajtja duhet të mbeten të dobishme dhe përdorshme pa javascript (ose pa mbështetjen e plotë javascript).

Unë kam ruajtur këtë moshat artikull përsëri, kështu Na vjen keq! I dont kujtohet burimi ... por ajo dukej e dobishme, për ne të cilët duhet të jenë të vetëdijshëm për audiencë për të cilët ne të zhvilluar vendin për ... kështu që këtu i është

Pesha faqe mund të përdoret për të përcaktuar kohën e shkarkimit për një faqe të caktuar në një shumëllojshmëri të shpejtesi lidhje interneti. Për shembull, tabela e mëposhtme tregon herë shkarko për tri faqe të ndryshme në një numër të shpejtesi lidhje popullore.

Përfitimet e uljen e peshës faqe?

Ndikimi pozitiv i reduktimit përfitime peshe i faqes dy pronarët e internetit dhe konsumatorët. Përfitimet e mundshme përfshijnë:

1. Faqet e ngarkesës më të shpejtë. Ndikimi më i dukshëm i reduktuar peshën faqe është se faqet e internetit tuaj do të ngarkesës më të shpejtë për vizitorët, pavarësisht nga shpejtësia e tyre lidhje.
2. Ulët herë ngarkesës faqe të krijojë më shumë vizitorë të rehatshme. Vizitorët janë më pak të ngjarë të bëhen të frustruar dhe të shkojnë diku tjetër, nëse faqet tuaja të ngarkesës shpejt. Nga ana tjetër, i ngadalshëm-loading faqe janë një nga mënyrat sigurta për të humbur vizitorët dhe klientët potencial.
3. Faster load-herë do të kontribuojë në rritjen e konvertimit. Më shumë vizitorë do të qëndrojë në faqen tuaj më të gjatë. Më shumë prej tyre do të përfundojnë duke e bërë blerjet, duke nënshkruar për gazetën tuaj, ose libër-duke shënuar faqen tuaj.
4. Perceptimi juaj markë do të rritet. Klientët që kthehen dhe për herë të parë vizitorët njësoj do të jenë më të prirur për të përshkruar faqen tuaj (dhe biznesit) si "profesionale" në qoftë se faqet tuaja të ngarkesës shpejt.
5. Faqet me kod të pastër, të ngurta shpesh do të indeksuara në mënyrë më efektive nga motorët e kërkimit natyrore.
6. Faqet e optimizuar për peshë në fakt mund të kursejnë akuzat Bandwidth më të lartë të trafikut faqet. 100.000 faqe secili peshon 150 Kb do të kërkojë Bandwidth dy herë më shumë nga ISP-në tuaj se 100.000 faqet e çdo peshe 75 Kb. Për ISP-se ngarkuar për Bandwidth përdorur ose për overages, kjo ulje mund të krijojë kursime të konsiderueshme për akuza Bandwidth.

Konsideroni të dhënat e mëposhtme, të publikuara në një raport të

Nëse XML / XSL Transformon është domian tuaj, pastaj ka raste kur ne duam një peice të kodit Dynamic që do të përdoret pika bibliotekës (për të bërë ri-përdorshme). Çfarë dua të them, ndoshta mund të bëhet më e qartë me këtë skenar shembull.

Paramendoni ju jeni duke krijuar një faqe interneti (dhe duke përdorur XML, XSL transfroms ofcourse) dhe shumica e faqeve do të ketë një Module Comments. E pra! pastaj ose ju kopje ose ngjisni këtë kod në çdo template faqe e cila I dont kanë thënë, por të bëjë mirëmbajtjen dhe Rework makth a) apo edhe më të mirë, keni krijuar një skedar të cilat mund të përfshijnë nxorrën në ku ndonjëherë doni atë në faqen tuaj ( s) ...
Deri sa nuk kemi Krijo një skedar përfshijnë XSL dhe përfshijnë atë brenda një tjetër fotografi XSL? Këtu është se si ...

Vetëm për të bërë gjëra të qartë ... këtu është lista e shpejtë të dosjeve që ju do të krijojë ... këtu, ne do të jemi duke përfshirë informacion në lidhje me fruta dhe perime në një faqe mëmë e quajtur ushqim.

1. food.xml - xml dhënave fotografi në të cilën transformimi do të aplikohet
2. food.xsl - kryesor fotografi XSL, i cili do të transformojë food.xml tonë
3. inc_fruits.xsl - XSL përfshijnë skedar që do të bëjë fruta të dhënat
4. inc_vegtables.xsl - XSL përfshijnë skedar që do të bëjë të dhënat vetetables

I dont mendoj se kam shpjeguar shumë, kodet për elementet e mësipërme, do të jetë vetë shpjegues ...

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>

Shkarko të gjitha dosjet e mësipërme këtu (252 downloads)