Exprimarea IT

Optimizarea imaginilor

Optimizarea înseamnă pur şi simplu păstrarea dimensiunii mici a imaginii păstrând calitatea imaginii la nivelul cerut. Există o mulţime de proceduri care pot transporta o dată pentru a optimiza imaginile înainte de a fi încărcate pe server pentru livrare. Instrumentele pe care le folosim pentru crearea acestor imagini (Photoshop, focuri de artificii, etc) au, de obicei, instrumente care permit utilizatorilor pentru a optimiza imagine pentru utilizarea web.
• Verificaţi de GIF pentru a vedea dacă acestea sunt utilizaţi o dimensiune paleta corespunde cu numărul de culori din imagine. Atunci când o imagine este cu 4 culori şi o paletă 256 de culori, atunci imaginea ar putea fi optimizat

• Conversie GIF este la PNG în cazul în care este posibil şi a vedea dacă există o economie. Cele mai multe ori, nu există. Nu ezitati sa folositi al lui PNG, aşa cum acestea sunt pe deplin susţinute de cele mai multe browsere utilizate în mod obişnuit. Asteptati-va de capacităţile de animaţie un PNG pot face ceea ce o face GIF, inclusiv transparenţa.

• Pentru imaginile folosite în sprite CSS, aranja imaginile din Sprite orizontal, spre deosebire de vertical, de obicei, la o dimensiune de fişier mai mică. De asemenea, combina imagini cu culori similare într-un Sprite. Aceasta vă ajută să păstraţi numărul de culoarea scăzut, în mod ideal, în 256 de culori astfel încât să încapă într-o PNG8.

• Dacă utilizaţi un favicon.ico, păstraţi-l mic, de preferinţă sub 1K.

Folosiţi corect scalate / redimensionate imagine.

Întotdeauna încercaţi şi de a folosi imagini intermediare, de exemplu, nu utilizaţi o imagine mai mare decat ai nevoie doar pentru că aveţi posibilitatea să setaţi lăţimea şi înălţimea în HTML. Dacă aveţi nevoie pentru a afişa o imagine de 100px 100px X de pe pagina, atunci nu se folosi un reduse imagine 200x200px.

Utilizarea imaginilor progresive

Un browser web face deja Imagini progresiv. Pentru a face chiar mai bine, pur şi simplu a salva GIF sau PNG imagini cu "interlaced" opţiune, sau imagini JPEG cu "progresiva" opţiune.

Există o dezbatere în curs de desfăşurare în rândul utilizatorilor de internet pentru a stabili dacă utilizarea de imagini progresive este o binecuvântare sau un obstacol. De asemenea, o imagine progresivă cântăreşte aproximativ 20% mai mult decât omologul său progresivă nu. Deci, dacă credeţi că aspectul foloseşte imagini care nu va împiedica de utilizator, experienţa de a fi progresivă, nu ezitaţi să facă acest lucru.

Include de JavaScript la fund a documentului HTML

Dacă nu aveţi document.write (sau orice generarea dinamică a conţinutului paginilor folosind javascript) pentru a insera o parte din conţinutul paginii în script-urile tale, mutaţi script-ul conţine şi declaraţia la partea de jos a paginii, înainte de sfârşitul tag-ul BODY.
Caietul de sarcini HTTP/1.1 sugerează că browser-descărcare nu mai mult de două componente, în paralel, pe numele gazdei. Dacă vă servi imaginile din numele gazdelor mai multe, puteţi obţine mai mult de două descărcări să apară în paralel. În timp ce un script este descărcarea, cu toate acestea, browser-ul nu va porni nici alte descărcări, chiar şi pe hosturi diferite.
Există, de asemenea, moduri de a crea dinamic noduri script-ul şi script-uri de la distanţă după ce incarca pagina este încărcată cu ajutorul AJAX.

Externaliza ai lui JavaScript

Utilizarea fişierelor externe JavaScript va duce la încărcare mai rapidă a paginilor, deoarece fisierele JavaScript sunt memorate în cache de către browser. "Inline JavaScript în documentele HTML se descărcate de fiecare dată când documentul HTML este solicitat. Acest lucru ar putea reduce de fapt, numărul de cereri HTTP facute, dar creşte ulterior dimensiunea documentului HTML. Extern JavaScript sunt cache de browser-ul, dimensiunea documentului HTML este redusă, fără a creşte numărul de cereri HTTP.
Vă rugăm să reţineţi că, în cazul în care utilizatorii de pe site-ul dvs. are mai multe vizualizări de pagini pe sesiune şi multe dintre paginile dvs. de re-folosesc script-urile şi aceleaşi stil, există un beneficiu mai mare potenţial de fisiere cache externe.

Ambalaj fişierelor Javascript

În caz de JavaScripts, spre deosebire de CSS, fişierele ar putea crunched utilizarea unor algoritmi standard de care ar da o dimensiune de fişier redusă decât a scoate pur şi simplu, spaţii sau tab. Un exemplu de JavaScript ambalatorului poate fi găsit aici http://dean.edwards.name/packer/

Scapa de orice script-uri duplicat

Este foarte neobisnuit ca script-uri întregi ar putea fi duplicat, dar o revizuire a zece de top din SUA site-uri arată că două dintre ele contine un script de duplicat. Duplicate script-uri, dar reduce în mod evident performanţa prin crearea de cereri HTTP inutile şi pierdut JavaScript executare.
De asemenea, în multe cazuri, deşi numele de script-uri sunt diferite, există o probabilitate de script-uri duplicat în aceeaşi pagină, din cauza dimensiunii echipă şi numărul de script-uri.

Minimizarea accesarea elemente DOM acolo unde este posibil

Accesarea elementelor DOM cu JavaScript este atât de lent, în scopul de a avea o pagină mai receptiv, trebuie:
• referiri la elementele de cache accesate
• noduri de actualizare "offline", şi apoi adăugaţi-le în copac
• Evitaţi de stabilire aspect cu JavaScript

Comportamentul separat de conţinutul şi prezentarea

Aşa cum am separat de prezentare (CSS / XSLT) la conţinut (XHTML / XML), ar trebui să ne separe, de asemenea, Behavior (JavaScript). Aceasta se numeşte Javascript discret. Aşa cum am lega la fişiere externe CSS, ar trebui să ne legaţi la fişiere externe javascript.

În loc de comportament greu de codificare în conţinut (de exemplu, onmouseover, onclick, etc), comportamentul dinamic trebuie să fie adăugate la elemente, clase, si elemente unice (IDS), folosind DOM. Documentul fundamental, de conţinut, trebuie să conţină numai valid XHTML / XML şi nu JavaScript.
Javascript trebuie sa insoteasca conţinutul prin adăugarea de comportament. Conţinutul trebuie să rămână util şi uşor de utilizat, fara javascript (sau fără sprijinul deplin JavaScript).

Am salvat acest articol înapoi vârstele, atât de rău! I dont amintesc sursa de ..., dar se pare util, pentru noi, care trebuie să fie conştienţi cu privire la publicul pentru care vom dezvolta site-ul pentru ... Deci, aici i este

Greutate pagina pot fi folosite pentru a determina timpul de descărcare pentru o anumită pagină pe o varietate de viteze de conectare la Internet. Cu titlu de exemplu, tabelul următor prezintă timpii de download pentru cele trei pagini diferite de la un număr de viteze de conectare populare.

Beneficiile de reducere a greutăţii pagină?

Impactul pozitiv al reducerii beneficiilor greutate Principala atât proprietarii de site-ul şi pentru consumatori. Potenţialele beneficii includ:

1. Paginile se incarca mai repede. Impactul cel mai evident de reducere a greutăţii de start, este faptul că paginile site-ului dvs. se va încărca mai repede pentru vizitatori, indiferent de viteza lor de conectare.
2. De ori mai mici de încărcare Pagina de a crea mai mulţi vizitatori confortabile. Vizitatorii sunt mai puţin susceptibile de a deveni frustrat şi du-te în altă parte, dacă paginile dvs. se incarca rapid. Pe de altă parte, lent de încărcare de pagini sunt una dintre cele mai sigure moduri de a pierde vizitatori si potentiali clienti.
3. Mai repede de încărcare de ori va contribui la creşterea de conversie. Mai multi vizitatori va rămâne pe site-ul dvs. mai mult. Mai multe dintre acestea se va termina prin a face achiziţii, semnarea pentru newsletter-ul dvs., sau carte de marcare site-ul tău.
4. Perceptia brand-ului tau va fi îmbunătăţită. Clienţi care se întorc şi pentru prima dată vizitatori, cât va fi mai înclinat pentru a descrie site-ul dvs. (şi de afaceri), ca "profesionist" în cazul în care paginile dvs. se incarca rapid.
5. Pagini cu cod curat, solid va fi de multe ori mai eficient indexat de motoarele de căutare naturale.
6. Pagini optimizate pentru greutate poate salva de fapt, taxele de lăţime de bandă de mare trafic site-uri. 100.000 de pagini, fiecare cântărind 150 Kb va fi nevoie de latime de banda de doua ori ca mai mult de la ISP-ul dvs. mult de 100.000 de pagini fiecare Greutate 75 Kb. Pentru furnizorii de servicii Internet, care percep pentru lăţime de bandă utilizate sau pentru Depasire, această reducere se poate crea economii semnificative la tarifele de lăţime de bandă.

Luaţi în considerare următoarele date, publicate într-un raport

Dacă XML / XSL Transformă este domian ta, atunci există momente când ne dorim un peice de cod dinamic pentru a fi utilizate element bibliotecă (să se facă re-utilizabile). Ce vreau să spun, probabil, ar putea fi mai clar, cu acest scenariu de exemplu.

Imaginaţi-vă că sunt crearea unui site web (si folosind XML, XSL transfroms desigur), şi de cele mai multe pagini ar avea un Modul Comentarii. Ei bine! apoi, fie copiaţi sau inseraţi acest cod în fiecare şablon de pagină (pe care I dont au spus, dar face de întreţinere şi revizie un cosmar) sau chiar mai bine, vă creaţi un includ fişiere care ar putea fi tras în cazul în care doriţi vreodată în pagina dvs. ( e) ...
Deci, cum vom crea un fisier XSL include şi o includ în interiorul alt fişier XSL? Iată cum ...

Doar pentru a face lucrurile clar ... aici este lista rapidă de fişiere pe care le-ar crea ... aici, noi vom fi, inclusiv informatii despre fructe şi legume într-o pagină părinte numit alimente.

1. food.xml - XML ​​fişier de date pe care transformarea va fi aplicat
2. food.xsl - principala XSL dosar, care va transforma food.xml nostru
3. inc_fruits.xsl - XSL include fişierul de date care vor face fructe
4. inc_vegtables.xsl - XSL include fişierul de date, care va face vetetables

Nu cred ca am explica mai mult, codurile de elementele de mai sus, va fi de sine explicativ ...

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/>
</ Corp>
</ 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>

Descarcă toate fişierele de mai sus aici (252 de descărcări)