Udtrykke det

Optimer billeder

Optimering betyder simpelthen holde størrelsen af ​​billedet lille holde kvaliteten af ​​billedet til det ønskede niveau. Der er masser af procedurer, der engang kan udføre for at optimere billeder, før de indlæses på serveren til levering. De værktøjer, vi bruger til oprettelsen af ​​disse billeder (Photoshop, Fireworks osv.) normalt har værktøjer, der giver brugerne mulighed for at optimere billedet til web brug.
• Tjek GIF har at se, om de bruger en palet størrelse svarende til antallet af farver i billedet. Når et billede er at bruge 4 farver og en 256 farvepalette, så billedet kunne optimeres yderligere

• Konverter GIF er til PNG 's hvor det er muligt, og se om der er en besparelse. Oftere end ikke, der er. Tøv ikke med at brug af PNG s, da de er fuldt understøttet af de fleste af de almindeligt brugte browsere. Forvent af animationen kapaciteter en PNG kan gøre, hvad en GIF gør, herunder gennemsigtighed.

• For de billeder, der anvendes i CSS sprites, arrangere billederne i Sprite vandret i modsætning til lodret normalt resulterer i en mindre filstørrelse. Også kombinere billeder med lignende farver i en sprite. Dette hjælper dig med at holde farven tæller lave, helst under 256 farver, så at passe i en PNG8.

• Hvis du bruger en favicon.ico, holde det lille, helst under 1K.

Brug korrekt skaleret / ændrede billede.

Altid forsøge at bruge størrelsesændrede billeder, altså ikke bruge et større billede end du har brug for, bare fordi du kan indstille bredden og højden i HTML. Hvis du har brug for at vise en 100px X 100px billede på siden, så skal du ikke bruge en skaleret ned 200x200px billede.

Brug Progressive billeder

En webbrowser allerede gør billeder gradvist. For at gøre det endnu bedre, skal du blot gemme GIF eller PNG-billeder med "interlaced" valgmulighed, eller dine JPEG-billeder med "progressive" valgmulighed.

Der er løbende debat blandt webbrugere om, hvorvidt brugen af ​​progressive billede er en velsignelse eller en hindring. Også et progressivt billede vejer cirka 20% mere end ikke progressivt modstykke. Så hvis du tror, ​​du layout bruger billeder, vil ikke hæmme den bruger-oplevelse ved at det er progressiv, er du velkommen til at gøre det.

Medtag JavaScripts i bunden af ​​HTML dokument

Hvis du ikke har document.write (eller nogen dynamisk generering af sideindhold ved hjælp af javascripts) for at indsætte en del af sidens indhold i dine scripts, flytte scriptet omfatter redegørelse til bunden af ​​siden, inden udgangen af ​​body-tagget.
Den HTTP/1.1 specifikationer tyder på, at browsere downloade ikke mere end to komponenter i parallel pr værtsnavn. Hvis du tjener dine billeder fra flere værtsnavne, kan du få mere end to downloads at forekomme i parallel. Mens et script der downloader, men vil browseren ikke starte andre downloads, selv på forskellige værtsnavne.
Der er også måder at dynamisk Opret script noder og indlæse eksterne scripts, efter siden er indlæst ved hjælp af AJAX.

Eksternalisere du JavaScripts

Brug af eksterne JavaScript-filer vil resultere i hurtigere indlæsning af sider, fordi de JavaScript-filer er cached af browseren. Inline JavaScripts "i HTML-dokumenter bliver hentet hver gang HTML dokument der anmodes om. Dette kan faktisk reducere antallet af HTTP-forespørgsler der foretages, men det efterfølgende øger størrelsen på HTML-dokumentet. Ekstern JavaScripts er cached af browseren, størrelsen af ​​HTML-dokumentet er reduceret uden at øge antallet af HTTP-anmodninger.
Bemærk venligst, at hvis brugerne på dit websted har flere sidevisninger per besøg, og mange af dine sider genbruge de samme scripts og stylesheets, er der et større potentiale gavn af cachede eksterne filer.

Pak dine JavaScript-filer

I tilfælde af JavaScripts, i modsætning til CSS kan filerne knasede bruge nogle standard algoritmer, der vil give en reduceret filstørrelse end blot at fjerne mellemrum eller faner. Et eksempel på javascript pakker kan findes her http://dean.edwards.name/packer/

Slip af genparten Scripts

Det er meget usædvanligt, at hele scripts kan duplikeres, men en gennemgang af de ti bedste amerikanske hjemmesider viser, at to af dem indeholder et duplikeret script. Duplicate scripts men naturligvis reducerer ydeevnen ved at skabe unødvendige HTTP-anmodninger og spildt JavaScript udførelse.
Også i mange tilfælde, selvom scripts navnene er forskellige, er der en sandsynlighed for identiske scripts inden for samme side som følge af holdet størrelse og antal af scripts.

Minimer adgang DOM elementer hvor det er muligt

Adgang til DOM elementer med JavaScript er langsom, så for at få en mere lydhør side, skal du:
• Cache henvisninger til adgang til elementer
• Opdater knuder "offline" og derefter tilføje dem til træet
• Undgå fastsættelse layout med JavaScript

Separat opførsel fra indhold og præsentation

Ligesom vi separat præsentation (CSS / XSLT) fra Indhold (XHTML / XML), bør vi også adskille Behavior (Javascript). Dette kaldes diskret Javascript. Ligesom vi linke til eksterne CSS-filer, skal vi linke til eksterne JavaScript-filer.

I stedet for hård kodning adfærd i indhold (f.eks onmouseover, onclick, etc.), bør adfærd kan dynamisk tilføjes elementer, klasser, og unikke elementer (IDS) ved hjælp af DOM. Det grundlæggende dokument, indhold, må kun indeholde gyldig XHTML / XML og ikke javascript.
Javascript bør forøge indholdet ved tilsætning adfærd. Indholdet bør forblive nyttigt og brugbart uden javascript (eller uden fuld understøttelse af JavaScript).

Jeg har gemt denne artikel aldre tilbage, så Undskyld! I dont huske kilden ... men det syntes nyttigt for os, der skal være klar over publikum, for hvem vi udvikler stedet for ... så her jeg er

Page vægt kan bruges til at bestemme download-tiden for en given side på en række internetforbindelsesindstillinger hastigheder. Som eksempel viser følgende tabel de download-tider for tre forskellige sider i en række populære opkoblingshastigheder.

Fordele ved at reducere side vægt?

De positive virkninger af at reducere side vægt til gavn for både webstedsejere og forbrugere. Potentielle fordele kan nævnes:

1. Sider indlæses hurtigere. Den mest åbenlyse konsekvenser af at reducere side vægt er, at din hjemmesides sider vil loade hurtigere for besøgende, uanset forbindelsens hastighed.
2. Lavere sideindlæsningstid skabe mere komfortable besøgende. Besøgende er mindre tilbøjelige til at blive frustreret og gå andre steder, hvis dine sider indlæses hurtigt. På den anden side er langsom-loading sider en af ​​de sikreste måder at miste besøgende og potentielle kunder.
3. Hurtigere load-tider vil bidrage til øget konvertering. Flere besøgende vil blive på dit websted længere. Flere af dem vil ende med at gøre indkøb, tilmelding til dit nyhedsbrev, eller en bog-mærkning dit websted.
4. Dit brand opfattelse vil blive styrket. Tilbagevendende kunder og første gang besøgende både vil være mere tilbøjelige til at beskrive dit websted (og virksomheder) som "professionel", hvis dine sider indlæses hurtigt.
5. Sider med ren, solid kode vil ofte blive indekseret mere effektivt af naturlige søgemaskiner.
6. Sider optimeret til vægt kan faktisk spare båndbredde afgifter på stærkt trafikerede steder. 100.000 sider hver vejer 150 Kb vil kræve dobbelt så meget båndbredde fra din internetudbyder end 100.000 sider hver vægt 75 Kb. For internetudbydere at opkræve for brugte båndbredde eller Overskud, kan denne reduktion medføre betydelige besparelser på båndbredde afgifter.

Overvej følgende data, der blev offentliggjort i en rapport

Hvis XML / XSL Transformation er din domian, så er der tidspunkter, hvor vi ønsker en peice af Dynamic kode, der skal bruges bibliotek post (som skal gøres genbrugelige). Hvad jeg mener, kunne måske gøres mere tydeligt med dette eksempel scenario.

Forestil dig du opretter en hjemmeside (og ved hjælp af XML, XSL transfroms selvfølgelig), og de ​​fleste af siderne ville have en Kommentarer modul. Nå! derefter enten du kopierer eller indsætte denne kode på hver side skabelon (som jeg ikke har at sige, men gør vedligeholdelse og omarbejde et mareridt), eller endnu bedre, kan du oprette en include file, der kunne trækkes på, hvor nogensinde du vil have det på din side ( s) ...
Så Hvordan skaber vi en XSL include file og medtage den inde i en anden XSL-fil? Her er, hvordan ...

Bare for at gøre tingene klart ... her er hurtig liste over de filer, du vil skabe ... her vil vi bl.a. information om frugt og grøntsager ind i en overordnet side kaldet mad.

1. food.xml - XML-datafil, som transformation vil blive anvendt
2. food.xsl - vigtigste XSL-fil, som vil forvandle vores food.xml
3. inc_fruits.xsl - XSL omfatter fil, der vil gøre frugter data
4. inc_vegtables.xsl - XSL omfatter fil, der vil gøre vetetables data

Jeg tror ikke jeg har forklare meget, koderne for ovenstående elementer vil være selvforklarende ...

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>

Download alle ovenstående filer her (255 downloads)