Ilmaista sitä

Optimoi kuvat

Optimointi yksinkertaisesti sitä pidetään koko kuvan pienen pitää laatua kuvan vaaditulle tasolle. On kuormien menettelyjä, kun voi tehdä optimoida kuvat ennen kuin ne ladataan palvelimelle toimitus. Työkaluja, käytämme luomista näiden kuvien (Photoshop, Fireworks jne.) on yleensä työkaluja, joiden avulla käyttäjät voivat optimoida kuva verkkosivuilla käytettäväksi.
• Tarkista GIF on nähdä, jos he käyttävät paletin koko vastaa värien määrä kuvassa. Kun kuva on käyttää 4 väriä ja 256 värin paletti, niin kuva olisi parannettava edelleen

• Muunna GIF on PNG: n aina kun mahdollista ja katso onko siellä säästöä. Useammin kuin ei, ei. Älä epäröi käyttää PNG: n, koska ne ovat täysin tuetaan useimmissa yleisesti käytetyille selaimille. Odottavat animaation ominaisuuksia PNG voi tehdä mitä GIF tekee, avoimuus mukaan luettuna.

• Jos käytetyt kuvat CSS sprite, järjestää kuvia Sprite horisontaalisesti eikä vertikaalisesti johtaa yleensä pienempi tiedostokoko. Myös yhdistää samanlaisista kuvista värit sprite. Tämä auttaa sinua pitämään värillä väliä alhainen, mielellään alle 256 väriä niin sopivat PNG8.

• Jos käytät Favicon.ico, pitää sen pieni, mielellään 1K.

Käytä oikein mitoitettu / kokoa kuvaa.

Aina kokeilla ja käyttää kokoa kuvia, eli älä käytä suurempi kuva kuin tarvitset vain koska voit asettaa leveyden ja korkeuden HTML. Jos haluat näyttää 100px x 100px kuvan sivulla, niin älä käytä pienennetty 200x200px kuva.

Käytä Progressive Images

Web-selain on jo tekee Images asteittain. Voit tehdä vielä paremmin, tallenna GIF-tai PNG-kuvien kanssa "lomitettu" vaihtoehto-tai JPEG-kuvia "progressiivinen" vaihtoehto.

On jatkuva keskustelu keskuudessa Internetin käyttäjiä siitä käyttöön progressiivinen kuva on siunaus tai haittaa. Myös progressiivinen kuva painaa noin 20% enemmän kuin ei-progressiivisen vastine. Joten, jos luulet asettelua käyttää kuvia, jotka eivät haittaa käyttäjän kokemusta, että olisi progressiivinen, vapaasti tehdä niin.

Sisällytä JavaScript n alareunassa HTML-asiakirja

Jos sinulla ei ole document.write (tai dynaaminen polven Sivujen sisällön avulla javascriptit) lisätä osa sivun sisältöä sivusi, siirrä käsikirjoitus sisältää lausuman sivun loppuun, ennen body.
HTTP/1.1 erittely osoittaa, että selaimet ladata korkeintaan kaksi komponenttia rinnakkain kohti hostname. Jos näytät kuvia useista isäntänimiä, voit saada enemmän kuin kaksi lataukset esiintyy rinnakkain. Kun käsikirjoitus ei lataamista, mutta selain ei aloita mitään muita ladattavia, jopa eri isäntänimiä.
On myös tapoja dynaamisesti luoda SCRIPT solmut ja ladata kauko-skriptien kun sivu ladataan AJAX.

Ulkoistaa te JavaScript n

Ulkoisen JavaScript tiedostot mahdollistaa nopeammat kuormitus sivut, koska JavaScript tiedostot välimuistiin selaimen. Inline JavaScript n 'HTML-asiakirjoissa saa ladata aina HTML asiakirja on pyydetty. Tämä voi todella vähentää määrää HTTP-pyyntöjen mutta sen jälkeen koko kasvaa HTML asiakirjan. Ulkoiset JavaScript n välimuistiin selaimen, koko HTML asiakirjan pienenee lisäämättä määrää HTTP-pyyntöjä.
Huomaa, että jos käyttäjät sivustossasi on useita sivun näyttökertaa istunto ja monet sivut uudelleen käyttää samaa skriptit ja stylesheets, on paremmat mahdollisuudet hyötyä välimuistiin ulkopuolisista tiedostoista.

Pakkaa Javascript tiedostot

Jos JavaScript, toisin kuin CSS-tiedostot voisi crunched käyttäen joitakin standardin algoritmeja, jotka antaisivat vähemmän tiedostokoko kuin yksinkertaisesti poistamalla välilyönneillä tai tabulaattorilla. Esimerkki javascript pakkaajan löytyvät täältä http://dean.edwards.name/packer/

Päästä eroon kaikista Duplicate Scripts

On erittäin harvinaista, että koko skriptejä voidaan monistaa, mutta uudelleen kymmenen eniten Yhdysvaltojen web-sivustojen mukaan kaksi niistä sisältävät päällekkäisiä käsikirjoituksen. Monista skriptejä mutta ilmeisesti heikentää suorituskykyä luomalla tarpeettomia HTTP-pyyntöjä ja hukkaan JavaScript-koodin suoritus.
Myös monissa tapauksissa, mutta skriptit nimet ovat erilaiset, on todennäköistä, kaksoiskappaleen skriptien saman sivun johtuen ryhmän kokoa ja määrää skriptien.

Minimoi pääsy DOM elementtien mahdollisuuksien

Pääsy DOM elementtejä JavaScript hitaasti niin, jotta entistä paremmin vastaamaan sivun, sinun pitäisi:
• Cache viittauksia näytetty elementtien
• Päivitä solmuja "offline", ja lisää ne puuhun
• Vältä vahvistamisesta ulkoasun kanssa JavaScriptin

Erillinen käyttäytymistä sisältöä ja esittämistapaa on

Aivan kuten me erillisenä Esitys (CSS / XSLT) Content (XHTML / XML), meidän pitäisi myös erottaa Behavior (Javascript). Tätä kutsutaan huomaamattomia Javascriptiä. Aivan kuten me linkittää ulkoiseen CSS-tiedostoja, meidän pitäisi linkittää ulkoisia javascript tiedostoja.

Sen sijaan kovaa koodausta käyttäytymisestä sisältöä (esim. onmouseover, onclick, jne.), toiminta olisi dynaamisesti lisätä elementtejä, luokat ja ainutlaatuinen elementit (IDS) käyttäen DOM. Perustava asiakirja, sisältöä, pitäisi olla vain voimassa XHTML / XML eikä javascriptiä.
Javascript pitäisi lisätä sisältöä lisäämällä käyttäytymistä. Sisällön tulisi pysyä hyödyllinen ja käyttökelpoinen ilman javascriptiä (tai ilman täyttä javascript-tuki).

Olen tallentanut tämän artikkelin aikojen takaisin, joten Sorry! En muista lähdettä ... mutta se tuntui hyötyä, meille, jotka on oltava tietoisia siitä yleisö, joille kehitämme sivuston ... joten tässä i on

Sivun paino voidaan käyttää määrittämään latausaika tietyn sivun erilaisia ​​Internet-yhteys nopeuksilla. Esimerkkinä voidaan mainita, seuraavat taulukossa lataus kertaa kolmen eri sivua useita suosittu yhteyden nopeuksilla.

Edut vähentää sivun painoa?

Positiivinen vaikutus vähentää sivun painoa hyödyttää sekä sivustojen omistajat ja kuluttajat. Mahdollisia etuja ovat:

1. Sivut latautuvat nopeammin. Ilmeisin vaikutus vähentää sivun painoa on, että sivustosi sivut latautuvat nopeammin vierailijoille, riippumatta yhteyden nopeudesta.
2. Alempi sivujen lataamista luoda mukava kävijöitä. Vierailijat ovat vähemmän turhautuvat ja menevät muualle, jos sivut latautuvat nopeasti. Toisaalta, hidas-lastaus sivut ovat yhtä varmimpia tapoja menettää vierailijoiden ja viittauksia.
3. Nopeampi kuorma-ajat osaltaan lisätä muuntaminen. Kauemmin kävijät viipyvät sivustossa kauemmin. Lisää ne päätyvät tekemään ostoksia, rekisteröitymisestä oman uutiskirjeen, tai arvo-merkintä sivustosi.
4. Brändin käsitys tehostetaan. Rekisteröitynyt asiakas ja ensikertalaiselle samankaltaisia ​​tulevat helpommin kuvaamaan sivuston (ja liike) niin "ammattimainen", jos sivut latautuvat nopeasti.
5. Sivut on puhdas, kiinteä koodi usein indeksoidaan tehokkaammin luonnollisen hakukoneita.
6. Sivut optimoitu paino voi todella säästää kaistanleveyttä maksut Suuren liikenteen sivustoissa. 100000 sivua paino 150 Kb vaatii kaksi kertaa niin paljon kaistanleveyttä Internet-palveluntarjoajalta yli 100.000 sivua vähintään 75 Kb. Internet-palveluntarjoajien että maksullisia kaistanleveyden käytön tai Yliannostukset Tämä alennus voi aiheuttaa merkittäviä säästöjä kaistanleveys maksuja.

Tarkastellaan seuraavat tiedot julkaistaan ​​raportti

Jos XML / XSL muunnokset on sinun domian, niin on hetkiä, jolloin haluamme peice Dynamic koodia käytetään kirjastokohdetta (tehtävä uudelleen käytettävissä). Mitä tarkoitan, ehkä voitaisiin tehdä selväksi tämän esimerkin tilanteessa.

Kuvittele luot sivuston (ja XML, XSL transfroms tietysti) ja useimmat sivuilla olisi Kommentit Module. No! sitten joko kopioit tai liitä tämä koodi jokaiselle sivulle malliin (joka minulla ei ole sanottavaa, mutta elatusapua ja työstää painajainen) tai jopa parempi, luot include-tiedostoon, joka voidaan vetää sisään minne haluat sen sivun ( s) ...
Joten Miten luoda XSL ovat tiedostojen ja sisällyttää se sisällä toista XSL? Tässä on, miten ...

Vain tehdä asiat selväksi ... tässä on nopea lista tiedostoista syntyisi ... täällä, tulemme myös tietoa hedelmien ja vihannesten pääsivun nimeltään ruoka.

1. food.xml - xml tiedosto, johon muutosta haetaan
2. food.xsl - tärkeimmät XSL-tiedoston, joka muuttaa meidän food.xml
3. inc_fruits.xsl - XSL sisältää tiedoston, joka tekevät hedelmiä tietoa
4. inc_vegtables.xsl - XSL sisältää tiedoston, joka tekevät vetetables tietoa

I dont ajatella minulla on selittää paljon, koodit edellä mainitut seikat, on itsestään selvä ...

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>

Lataa kaikki edellä tiedostot täältä (252 lataukset)