Ga izražava

Optimizirajte slike

Optimizacija jednostavno znači čuvanje veličinu slike Small čuvanje kvalitetu slike na potrebnoj razini. Postoje hrpe postupaka koji se obavljaju jednom optimizirati slike prije nego što su učitani na poslužitelju za isporuku. Alati koje smo koristili za izradu tih slika (Photoshop, Fireworks itd.) obično imaju alate koji omogućuju korisnicima da optimizirati slike za web uporabu.
• Provjerite GIF-a da vidi da li su pomoću palete veličina odgovara broja boja u slici. Kad je slika pomoću 4 boje i 256 paletu boja, a zatim slika bi mogla biti dodatno optimiziran

• Pretvoriti GIF PNG je da je gdje je to moguće i vidjeti postoji li ušteda. Više nego često ne, postoji. Ne ustručavajte se koristiti u PNG-a, kao i oni u potpunosti podržava većinu najčešće korištenih preglednika. Očekivati ​​od animacijskim sposobnostima PNG može učiniti ono što ne GIF, uključujući i transparentnost.

• Za slike se koriste u CSS sprites, organizirati slike u sprite vodoravno u odnosu na vertikalno obično rezultira manjom veličinom datoteke. Također, kombinirati slike sa sličnim bojama u sprite. To vam pomaže u boji grof nisko, idealno u 256 boja, tako da stane u PNG8.

• Ako koristite favicon.ico, neka bude mala, poželjno je ispod 1K.

Koristite ispravno skalirati / promijeniti velicina slike.

Uvijek pokušajte koristiti mijenjati slike, tj. ne koristite veću sliku nego što je potrebno samo zato možete postaviti širinu i visinu u HTML-u. Ako vam je potrebna da bi se prikazao 100px X 100px sliku na stranici, onda ne koristite skraćena 200x200px slike.

Koristite progresivne slike

Web preglednik već čini Slike progresivno. Da biste to učinili čak i bolje, jednostavno spremite GIF ili PNG slike sa "interlaced" opciju, ili svojim JPEG slika s "Progressive" opciju.

Tu je u tijeku rasprava među web korisnicima da li korištenje progresivnog slika je blagoslov ili smetnja. Također progresivna slika teži oko 20% više nego njegov kolega ne progresivnog. Dakle, ako mislite da izgleda koristi slike koje neće odgoditi korisničko iskustvo je progresivan, slobodno to učinite.

Uključite JavaScript-a na dnu HTML dokumenta

Ako nemate document.write (ili bilo koji dinamičan generacija sadržaj stranice koriste JavaScript) umetnuti dio sadržaja stranice u svojim skriptama, premjestite skriptu uključiti izjavu na dnu stranice, prije kraja BODY tag.
HTTP/1.1 specifikacija sugerira da preglednici preuzimanje više od dvije komponente paralelno po hostname. Ako služiti svoje slike s više imena računala, možete dobiti više od dva preuzimanja na odvijati paralelno. Dok je skripta preuzimanja, međutim, preglednik neće pokrenuti nikakve druge preuzimanja, čak i na različitim imena računala.
Također postoje načini da dinamički stvaraju čvorovi i skripte učitati udaljenih skripti nakon što se stranica učita pomoću AJAX.

Externalise javascript-a

Korištenje vanjske JavaScript datoteke će rezultirati bržim utovara stranicama jer su JavaScript datoteke spremljeno u pregledniku. Ugrađeni JavaScript-a "u HTML dokumentima se preuzeti svaki put HTML dokument se traži. To zapravo može smanjiti broj HTTP zahtjeva napravili, ali se naknadno poveća na veličinu HTML dokumenta. Vanjski JavaScript-a su spremljeno u pregledniku, veličina HTML dokumenta je smanjen bez povećanja broja HTTP zahtjeve.
Imajte na umu da, ako korisnik na Vašoj web lokaciji imati više pregleda stranica po sjednici, a mnogi od Vaših stranica ponovno korištenje iste skripte i stilovima, postoji veći potencijal imaju koristi od spremljeni vanjskim datotekama.

Pack vaše JavaScript datoteke

U slučaju JavaScript, za razliku od CSS, datoteke mogu crunched pomoću neke standardne algoritme koji će dati smanjenu veličinu datoteke nego jednostavno ukloniti razmake ili karticama. Primjer paker javascript možete naći ovdje http://dean.edwards.name/packer/

Dobili osloboditi od svih Ponovljene Scripts

To je vrlo neobično da je cijeli skripte mogu se umnožavati, ali pregled deset najboljih web stranica u SAD pokazuje da dvije od njih sadrži dvostruki skriptu. Dvostruki skripte ali očito smanjuje performanse stvaranjem nepotrebne HTTP zahtjeve i izgubiti JavaScript izvršenje.
Također, u mnogim slučajevima, iako se skripta nazivi su različiti, postoji vjerojatnost dvostruke skripti unutar iste stranice zbog reprezentacije veličini i broju skripti.

Minimiziraj pristupa DOM elemenata gdje je to moguće

Pristup DOM elemente s JavaScriptom je sporo, tako da bi imao više osjetljiv stranicu, trebali biste:
• Predmemorija reference na pristupiti elemenata
• Obnovi čvorovi "offline", a zatim dodajte ih u stabla
• Izbjegavajte učvršćivanje izgled s JavaScriptom

Odvojeni od sadrzaj Ponašanje i prezentiranje

Kao što smo odvojeni prikaz (CSS / XSLT) od sadržaja (XHTML / XML), također treba odvojiti ponašanje (Javascript). To se zove nenametljiv Javascript. Baš kao što smo se povezati s vanjskim CSS datotekama, trebali bismo se povezati s vanjskim JavaScript datotekama.

Umjesto tvrdog kodiranja ponašanja u sadržaju (npr. onmouseover, onclick, itd.), ponašanje treba dinamički biti dodan elemenata, klasa, i jedinstvenim elementima (IDS) pomoću DOM. Temeljni dokument, sadržaj, treba sadržavati samo valjani XHTML / XML i ne JavaScript.
Javascript mora povećati sadržaj dodavanjem ponašanje. Sadržaj bi trebao ostati koristan i upotrebljiv bez JavaScript (javascript ili bez pune podrške).

Ja sam spasio ovaj članak dobi natrag, pa Žao nam je! Ja dont sjećati izvor ... ali činilo korisnim, za nas koji moraju biti svjesni o publici za koju možemo razviti site za ... pa evo ja je

Stranica težina može se koristiti za određivanje vremena za preuzimanje određenoj stranici na raznim Internet brzine spajanja. Primjerice, sljedeća tablica pokazuje vrijeme preuzimanja za tri različite stranice na nekoliko popularnih brzine spajanja.

Prednosti smanjenje težine stranicu?

Pozitivan učinak smanjenja težine posjetiteljima stranice prednosti obje vlasnike web stranica i potrošača. Potencijalne koristi obuhvaćaju:

1. Stranice brže učitavaju. Najočitiji utjecaj smanjenja stranicu težine je da vaše web stranice je stranica će se učitati brže za posjetitelje, bez obzira na brzinu veze.
2. Niže vrijeme učitavanja stranice stvoriti više udobne posjetitelja. Posjetitelji su manje vjerojatno da će postati frustriran i otići negdje drugdje, ako Vaše stranice brzo učitavanje. S druge strane, spore-loading stranice su jedan od najsigurniji način za izgubiti posjetitelja i potencijalnih kupaca.
3. Brže učitavanje-puta će doprinijeti povećanom obracenja. Više posjetitelji će ostati na vašem siteu duže. Više od njih će završiti kupe, prijave za Vaš newsletter ili knjiga obilježavanja svoje stranice.
4. Vaš brand percepcija će biti poboljšana. Vraćanje kupaca i po prvi put posjetitelji podjednako će biti skloniji opisati svoje stranice (i poslovni), kao "profesionalni" ako učitavanje Vaše stranice brzo.
5. Stranice s čistom, čvrstom koda često će biti indeksirana učinkovitije prirodnih tražilicama.
6. Stranice su optimizirane za težinu zapravo može uštedjeti propusnost optužbe na high-promet web stranice. 100.000 stranica svaki težak 150 Kb zahtijeva dvostruko propusnost puno od svog ISP-a od 100.000 stranica svaki težine 75 Kb. Za ISP-ove koji naplaćuju za prijenos podataka koristi ili overages, to smanjenje može stvoriti značajne uštede na propusnost optužbi.

Razmotrite sljedeće podatke objavljene u izvješću

Ako XML / XSL transformira je vaš Damjana, starokršćanske, onda postoji vrijeme kada želimo peice dinamičkog koda koja se koristi knjižnica stavku (da se ponovno koristiti). Ono što mislim, vjerojatno mogao biti jasniji s ovim npr. scenarij.

Zamislite da se kreiranje web stranice (i koristeći XML, XSL transfroms ofcourse) i većina stranica će imati Komentari modula. Dobro! zatim ćete kopirati ili zalijepite ovaj kod na svakoj stranici predloška (koji ja dont imati reći, ali bi održavanje i prerađuje u noćnu moru) ili još bolje, stvorite Uključite datoteku koja bi mogla biti izvučena u gdje god vi to želite na stranici ( e) ...
Pa kako ćemo stvoriti datoteku XSL Include i uključiti ga u drugu XSL datoteku? Evo kako ...

Samo da bi stvari jasno ... ovdje je brz popis datoteka koje će stvoriti ... ovdje, mi ćemo biti, uključujući informacije o voću i povrću u matične stranici se zove hrana.

1. food.xml - xml datoteke podataka na kojima se transformacija će se primjenjivati
2. food.xsl - glavni XSL datoteku, koja će preobraziti naše food.xml
3. inc_fruits.xsl - XSL datoteku koja će sadržavati voće pružiti podatke
4. inc_vegtables.xsl - XSL uključuju datoteku koja će pružiti vetetables podatke

JA dont misliti moram objasniti mnogo, kodove za navedene elemente, bit će samo sebi ...

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>

Preuzmite sve gore navedene datoteke ovdje (256 downloads)