Punerea codului pe o dietă - Blog Miva

Acesta este un post de invitat de Bruce Golub de la Phosphor Media. Opiniile autorului sunt în întregime ale sale și pot să nu reflecte opiniile lui Miva Merchant.

Accesul la internet în bandă largă este acum aproape universal în SUA, iar adoptarea acestuia ajunge la 70% în medie. Europa se apropie de 50%, unele zone fiind aproape de 100%. Deci, de ce ar trebui să ne pese de salvarea unui cuplu de K-octeți aici, de câteva zeci de secundă acolo?

Pentru că nu va exista niciodată un loc pe internet pentru cod umflat și ineficient. În timp ce viteza medie de acces la Internet a trecut de la 54 Kbs la 4,2 Mb în 10 ani, așteptările utilizatorului mediu de Internet au crescut și mai mult. Când 56 Kbs era norma, vizitatorul mediu al web-ului nu se gândea să aștepte până la 20 până la 30 de secunde pentru încărcarea unei pagini. Acum, această așteptare este mai mică de 2 secunde. Chiar și atunci când un site furnizează conținut la viteze de sub 1 secundă, studiile au arătat că reducerea timpilor de încărcare a paginii cu 10-20 la sută are un impact pozitiv semnificativ asupra duratei și profunzimii vizitelor pe site. (Timpul pe care un vizitator îl petrece pe site și numărul de pagini vizualizate de vizitator.) Pe un site de comerț electronic, durata și profunzimea paginii crescute sunt de obicei direct proporționale cu conversiile de vânzări.

Așadar, întrebarea este: cum vă faceți site-ul mai rapid, chiar dacă este deja rapid? Continuați mai departe și vom acoperi câteva dintre metodele care conduc la codificarea și implementarea eficientă a vitrinelor magazinelor Miva Merchant. (Notă, codarea la care ne referim aici este limitată la Store Morph Technology, HTML și alte scripturi bazate pe browser, cum ar fi Javascript.)

Un mic fundal

Să aruncăm o privire asupra părților și proceselor unei pagini Miva Merchant și despre modul în care acele părți consumă resurse și timp:

Când un client solicită o pagină de la comerciant:

1. Serverul procesează solicitarea inițială și o direcționează către motorul MivaMerchant Empressa (ceea ce alimentează scriptul Miva Merchant). În general, acest lucru necesită foarte puțin timp, iar mecanismele care controlează eficiența acestuia sunt, de obicei, în afara proprietarului magazinului.
2. Scriptul Miva Merchant începe să-și parcurgă logica pentru a construi o pagină HTML care este apoi transmisă înapoi la server. Această logică include procesarea logicii SMT în șabloanele dvs. comerciale Miva. Iată unul dintre locurile în care eforturile dvs. pot crește foarte mult viteza.
3. Serverul trimite o pagină HTML clientului. Pagina, desigur, trebuie să călătorească prin Internet, apoi vizitatorii ISP și înapoi prin Internet către vizitator. Nu putem face multe aici.
4. Conținutul paginii HTML ajunge la computerul vizitatorului și browserul citește (redă) codul HTML din pagină. Pe măsură ce citește pagina, se fac cereri suplimentare către serverul original pentru a prelua elemente precum imagini, foi de stil și scripturi conectate. Aici putem găsi și oportunități de creștere a vitezei.

Determinarea vitezei - obținerea unei arme radar

Deci, pe lângă lovirea reîncărcării și numărarea unui Mississippi, două Mississippi etc., de unde știi cât de repede se încarcă pagina ta? Există cronometre; dar chiar și acestea vor fi mai dependente de reflexe decât codurile de server și de performanță. O opțiune este utilizarea unui instrument de reper, cum ar fi o caracteristică gratuită în modulul nostru Merchant FAST. Alte două alternative pe care le cunosc sunt Toolkit-ul Emporiumplus.com și Toolbelt al PCINet.com. Oricare dintre aceste instrumente este excelent pentru monitorizarea progresului optimizării SMT și a șabloanelor, dar nu măsoară timpul total (încărcarea imaginilor, timpul de tranzit al serverului și analiza browserului). Pentru acestea, trebuie să ieșiți din afara site-ului și să utilizați instrumente precum: Web Wait.

Organizare, optimizare și eficiență

Există o relație directă între codul eficient și codul bine organizat; chiar dacă unele măsuri organizatorice se adaugă efectiv la baza codului. Abilitatea de a „vedea” structura codului și a conținutului face mai ușoară identificarea ineficiențelor, a erorilor și a altor probleme. Deci, să începem prin a ne organiza:

Codul documentului

Ce? Nu se adaugă asta la dimensiunea paginii rezultate? Da, da. Dar dimensiunea paginii nu este la fel de critică ca alte elemente, cum ar fi apelurile de script către funcții și funcții care nu mai sunt utilizate. De exemplu, adăugând:

// Folosit pentru a lansa caracteristica Bouncing Foo Ball

la un script în linie, cum ar fi:

Înseamnă că, dacă caracteristica Bouncing Foo Ball este eliminată mai târziu, dvs., clientul sau un alt dezvoltator puteți vedea cu ușurință că acest cod este inutil și poate fi eliminat.

Diferite zone ale codului dvs. necesită tehnici de comentare diferite

Conținutul documentului

La fel ca documentarea codului, documentarea conținutului facilitează depistarea redundanțelor, menține lucrurile în ordine și ajută la prevenirea aspectelor incorecte care pot încetini redarea paginilor. Este, de asemenea, o economie excelentă de timp când abia ați început să aflați cum Miva Merchant pune la punct o pagină. Poate preveni abuzurile de conținut, cum ar fi mai multe doctipuri, etichete pentru cap și corp, și cod de aspect umflat. Dacă abia începeți, parcurgeți cel puțin elementele globale pentru site-ul dvs. (filele marcate cu un asterisc) și adăugați un comentariu de deschidere și de închidere.

De exemplu, în antetul global, adăugați

ca prima linie și

ca ultima linie din șablonul respectiv. Deci, când vizualizați codul sursă în căutarea problemelor de aspect, puteți vedea cu ușurință ceea ce face parte din antetul global, versetează paginile alt conținut.

De exemplu, găsesc adesea lucruri precum următoarele în rezultatul unei pagini Miva Merchant:

Când ar fi suficient următoarele:

Nu numai mai puține linii și poate mai ușor de înțeles, dar mai rapid de redat de către browser. Adăugarea comentariilor HTML vă ajută să vedeți de unde provin ineficiențele și cum să le corectați.

Aspect bazat pe tabel CSS Vs

CSS (Cascading Style Sheets) sunt extrem de superioare aspectului bazat pe tabel, atât din punct de vedere organizațional, cât și al vitezei în motoarele de căutare. Cea mai recentă versiune a MivaMerchant va conține o serie de șabloane bazate în întregime pe aspectul CSS. În timp ce conversia unui site bazat pe tabel în CSS nu depășește domeniul de aplicare al acestui articol, există încă câteva tehnici bazate pe CSS pe care le puteți aplica pentru a îmbunătăți chiar și aspectul bazat pe tabel.

Setarea tabelului cu CSS

Există câteva tehnici CSS simple pe care le puteți folosi cu tabele. Aceste tehnici pot înlocui apelurile de fonturi, formatarea celulei, alinierea, fundalurile și culorile. Să aruncăm o privire la câteva pentru a începe.

Fonturi

Nimic nu spune umflare ca:

Mai ales când se repetă pentru fiecare bucată de text din fiecare celulă de tabel. În schimb, o clasă de stil simplă poate rezolva toate acestea și multe altele. De exemplu: dacă ați creat o clasă CSS numită mySpecialTable și i-ați atribuit toate stilurile de font necesare, ați folosi doar:

---