Uttrykke IT

Optimaliser bilder

Optimalisering betyr ganske enkelt å holde størrelsen på bildet lille holder bildekvaliteten til ønsket nivå. Det er massevis av prosedyrer som en gang kan utføre for å optimalisere bildene før de lastes på serveren for levering. De verktøyene vi bruker for etableringen av disse bildene (Photoshop, Fireworks osv.) vanligvis har verktøy som tillater brukere å optimalisere bildet for web bruk.
• Kontroller GIF-tallet for å se om de bruker en palett størrelse tilsvarende antall farger i bildet. Når et bilde er å bruke 4 farger og en 256 fargepalett, så bildet kan bli ytterligere optimalisert

• Konverter GIF er til PNG er der det er mulig og se om det er en besparelse. Oftere enn ikke, er det. Ikke nøl med å bruke av PNG-tallet, som de er fullt ut støttet av de fleste vanlige nettlesere. Forvent i animasjonen evner en PNG kan gjøre hva en GIF gjør, inkludert åpenhet.

• For de bildene som brukes i CSS sprites, ordne bildene i Sprite horisontalt, i motsetning til vertikalt vanligvis resulterer i en mindre filstørrelse. Også kombinere bilder med lignende farger i en sprite. Dette hjelper deg å holde fargen telle lav, ideell henhold 256 farger så å passe i en PNG8.

• Hvis du bruker en favicon.ico, holde den lille, helst under 1K.

Bruk riktig skalert / skalerte bildet.

Alltid prøve og bruke endrede bilder, dvs. ikke bruk et større bilde enn du trenger bare fordi du kan angi bredde og høyde i HTML. Hvis du trenger å vise en 100px X 100px bilde på siden, kan du ikke bruke en nedskalert 200x200px bilde.

Bruk Progressive bilder

En nettleser gjengir allerede Images progressivt. For å gjøre det enda bedre, ganske enkelt lagre GIF eller PNG-bilder med "interlaced" alternativet, eller dine JPEG-bilder med "progressive" alternativet.

Det er pågående debatt blant nettbrukere om hvorvidt bruk av progressiv bilde er en velsignelse eller en hindring. Også en progressiv bilde veier ca 20% mer enn sine ikke progressive motstykke. Så, hvis du tror du oppsettet bruker bilder som ikke skal hemme den brukervennlige opplevelsen av det å være progressiv, gjerne gjøre det.

Inkluder JavaScript er nederst i HTML-dokumentet

Hvis du ikke har document.write (eller noen dynamisk generering av siden innholdet med javascripts) for å sette en del av sidens innhold i skript, flytte skriptet inkludere uttalelse til bunnen av siden, før slutten av BODY taggen.
Den HTTP/1.1 spesifikasjonen antyder at nettlesere laste mer enn to komponenter i parallell per vertsnavn. Hvis du betjene dine bilder fra flere vertsnavn, kan du få mer enn to nedlastinger skje parallelt. Mens et skript nedlasting, men vil nettleseren ikke starte noen andre nedlastinger, selv på forskjellige vertsnavn.
Det finnes også måter å dynamisk opprette Script noder og laste eksterne skript etter at siden er lastet med AJAX.

Externalise du JavaScript s

Bruke eksterne JavaScript-filer vil resultere i raskere lasting av sider fordi JavaScript-filer blir lagret av nettleseren. Inline JavaScript 's' i HTML-dokumenter blir lastet ned hver gang HTML-dokument blir forespurt. Dette kan faktisk redusere antallet HTTP-forespørsler gjort, men det senere øker størrelsen på HTML-dokumentet. Ekstern JavaScript er bufres av nettleseren, størrelsen på HTML-dokumentet er redusert uten å øke antallet HTTP-forespørsler.
Vær oppmerksom på at dersom brukerne på nettstedet ditt har flere sidevisninger per sesjon og mange av sidene bruke de samme skript og stilark, er det en større potensiell nytte bufrede eksterne filer.

Pakk JavaScript-filer

Ved JavaScripts, i motsetning til CSS, kan filene knaste bruke noen standard algoritmer som vil gi en redusert filstørrelse enn bare å fjerne mellomrom eller tabulatorer. Et eksempel på javascript emballeringsbedrift finner du her http://dean.edwards.name/packer/

Bli kvitt eventuelle like Scripts

Det er svært uvanlig at hele skript kan bli duplisert, men en gjennomgang av de ti beste amerikanske nettsteder viser at to av dem inneholder en duplisert script. Dupliser scripts men tydeligvis reduserer ytelsen ved å skape unødvendige HTTP-forespørsler og bortkastet JavaScript utførelse.
Også i mange tilfeller, men de skriptene navnene er forskjellige, er det en sannsynlighet for dupliserte skript innenfor den samme siden på grunn av teamet størrelse og antall av skript.

Minimer tilgang DOM elementer der det er mulig

Tilgang DOM elementer med JavaScript er treg så for å få en mer responsiv side, bør du:
• Cache referanser til tilgang elementer
• Oppdatere noder "offline", og deretter legge dem til treet
• Unngå å feste layout med JavaScript

Separat atferd fra innhold og presentasjon

Akkurat som vi egen presentasjon (CSS / XSLT) fra Innhold (XHTML / XML), bør vi også skille Behavior (Javascript). Dette kalles påtrengende Javascript. Akkurat som vi koble til eksterne CSS-filer, bør vi koble til eksterne JavaScript-filer.

I stedet for hardt koding oppførsel i innhold (f.eks onmouseover, onclick, etc.), bør oppførsel dynamisk lagt til elementer, klasser og unike elementer (IDS) ved hjelp av DOM. Den grunnleggende dokument, innholdet, bør inneholde kun gyldig XHTML / XML og ingen javascript.
Javascript må utfylle innholdet ved å legge oppførsel. Innholdet bør forbli nyttig og brukbart uten javascript (eller uten full støtte for JavaScript).

Jeg har lagret denne artikkelen aldre tilbake, så Sorry! Jeg husker ikke kilden ... men det virket nyttig, for oss som må være klar om publikum for hvem vi utvikle området for ... så her jeg er

Side vekt kan brukes til å bestemme nedlastingstid for en gitt side på en rekke Internett tilkoblingshastigheter. Som eksempel viser følgende tabell nedlasting ganger for tre ulike sider ved en rekke populære tilkoblingshastigheter.

Fordeler med å redusere side vekt?

Den positive effekten av å redusere siden vekten fordeler både eiere og forbrukere. Potensielle fordeler inkluderer:

1. Sidene lastes raskere. Den mest åpenbare virkningen av å redusere siden vekten er at nettstedets sider vil lastes inn raskere for besøkende, uavhengig av deres tilkoblingshastighet.
2. Lavere side lasting skape mer komfortable besøkende. Besøkende er mindre sannsynlig å bli frustrert og gå andre steder hvis sidene lastes raskt. På den annen side, slow-loading sider er en av de sikreste måtene å miste besøkende og potensielle kunder.
3. Raskere last-tider vil bidra til økt konvertering. Flere besøkende skal bo på nettstedet ditt lenger. Flere av dem vil ende opp med å gjøre innkjøp, registrere seg for nyhetsbrevet, eller bok-merking ditt nettsted.
4. Din merkevare oppfatning vil bli styrket. Returnere kunder og førstegangsfødende tilreisende vil være mer tilbøyelig til å beskrive ditt nettsted (og bedrift) som "profesjonell" hvis sidene lastes raskt.
5. Sider med ren, solid kode vil ofte bli indeksert mer effektivt med naturlige søkemotorer.
6. Sider som er optimalisert for vekt kan faktisk spare båndbredde kostnader på høy trafikk nettsteder. 100.000 sider som hver veier 150 Kb vil kreve dobbelt så mye båndbredde fra din ISP enn 100.000 sider hver Vekt 75 Kb. For Internett-leverandører som tar betalt for båndbredden som brukes eller for overages, kan denne reduksjonen skape betydelige besparelser på båndbredde kostnader.

Vurder følgende data, publisert i en rapport

Dersom XML / XSL Transforms er din domian, så det er tider da vi ønsker en peice av dynamisk kode som skal brukes biblioteket element (gjøres gjenbrukbare). Hva jeg mener, kan trolig gjøres mer tydelig med dette eksempelet scenariet.

Tenk deg at du oppretter et nettsted (og bruker XML, XSL transfroms selvfølgelig), og de ​​fleste sidene vil ha en Kommentarer modul. Vel! så enten du kopiere eller lime inn denne koden på hver side mal (som jeg ikke har si, men gjør vedlikehold og bearbeide et mareritt) eller enda bedre, oppretter du en include-fil som kan trekkes i hvor enn du vil ha den på siden din ( e) ...
Så Hvordan skaper vi en XSL include-fil og inkludere den i en annen XSL-fil? Her er hvordan ...

Bare for å gjøre ting klart ... her er rask liste over filer som du ville skape ... her, vil vi bli inkludert informasjon om frukt og grønnsaker inn i en overordnet side som heter mat.

1. food.xml - XML-datafil der transformasjon vil bli anvendt
2. food.xsl - main XSL-fil, noe som vil forvandle vår food.xml
3. inc_fruits.xsl - XSL inkluderer fil som vil gi frukter data
4. inc_vegtables.xsl - XSL inkluderer fil som vil gjøre vetetables data

Jeg tror ikke jeg har forklare mye, kodene for ovennevnte 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>

Last ned alle filene over her (252 nedlastinger)