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.

punerea

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:

”MySpecialTable”>
Text

CSS poate fi, de asemenea, utilizat cu tabele pentru a atribui culori de fundal, imagini, completare celulară, spațierea celulelor, alinierea și multe altele. W3C are câteva tutoriale și referințe CSS grozave. De exemplu, începând cu HTML + CSS și adăugând o notă de stil

Învățarea acestor tehnici, chiar și cu aspectele bazate pe tabel, poate reduce considerabil dezordinea și dimensiunea codului și poate face ca aspectul dvs. să fie mai ușor de citit și înțeles. De exemplu,

Poate fi optimizat utilizând o clasă CSS și definiția ulterioară:

Declarație de tabel

Declarație de clasă

Octet pentru octet pot fi similare, dar avantajul utilizării CSS pentru tabele este de două ori. Unul, pentru fiecare tabel suplimentar care trebuie să arate în acest fel, utilizați doar șablonul class = „exemplu”. Și doi, dacă decideți să schimbați, spuneți culoarea de fundal, trebuie doar să o faceți în foaia de stil și să nu scotociți fiecare pagină și fiecare șablon găsind fiecare loc în care ați folosit acest stil.

Substanță și stil

Folosind CSS, de asemenea, este mai ușor pentru persoanele care nu conțin HTML, care ar putea lucra pe site-ul dvs., să obțină conținutul în locul potrivit, deoarece numele clasei pot îndruma calea. De exemplu,

(și, deși nu se validează în toate cazurile, am folosit-o

Acte de clasă

Odată ce ați început să utilizați CSS, există câteva metode mai avansate pentru a obține o optimizare suplimentară a dimensiunii și, de asemenea, pentru a face etichetele de stil mai ușoare. Gândirea în termeni de grupuri de clasă vă ajută să vă mențineți sănătatea, ceea ce are ca rezultat mai puține etichete generale, deci mai puține descărcări. De exemplu, este posibil să aveți câteva stiluri precum:

Dacă ați creat stiluri de genul acesta:

Apoi, veți putea să recreați cele trei stiluri originale cu mai puțin cod general de gestionat. Regula class2 din primul set ar fi implementată ca

(De fapt, acest lucru nu economisește la fel de multă încărcare pe cât economisește sănătatea ... dar când am început să fac asta, regulile mele au scăzut cu 50% ... făcând descărcări mai rapide și actualizări mai ușoare.)

Hacking la Store Morph Technology.

Acum, aruncăm o privire la ceea ce putem face cu codarea SMT - lucrurile care fac ca șabloanele dvs. să producă de fapt HTML și să controleze conținutul, caracteristicile și aspectul.

Eliminați articolele SMT care nu sunt utilizate

Șabloanele originale din MM presupuneau că toată lumea avea să folosească un set specific de caracteristici pe fiecare pagină a site-ului. În viața reală acest lucru nu este cazul. Îndepărtarea articolelor care nu sunt folosite poate fi cea mai mare creștere a vitezei. Testele pe care le-am făcut la PHOSPHOR Media arată viteza de creștere de la 20% la 40% pur și simplu parcurgând fiecare pagină și determinând exact ce este necesar pentru fiecare pagină. Unele articole consumă, de asemenea, mai multe resurse decât altele ... deci luați în considerare impactul lor înainte de a le utiliza. De exemplu, Inventar. Deși este o caracteristică excelentă pe care o aveți dacă încercați să controlați inventarul și să oferiți clienților o idee despre ceea ce este disponibil, dezactivați-l dacă nu îl utilizați. De asemenea, rezistați nevoii de inventariere pentru a face unele produse indisponibile pentru comandă, dacă aceasta nu este o problemă de inventar. Există metode mai eficiente disponibile.

Unele articole pot fi eliminate la nivel global dacă nu sunt utilizate, cum ar fi articolele de inventar și afiliate ... altele ar trebui să fie făcute de la o pagină la alta, deoarece unele pagini vor folosi o caracteristică, în timp ce altele ar putea să nu.

Pentru a elimina global un element:

  1. În administratorul comerciantului, deschideți orice pagină.
  2. Faceți clic pe fila Elemente.
  3. Găsiți articolul în cauză și faceți clic pe butonul Editare.
  4. În pagina Editare articol faceți clic pe fila Pagini.
  5. În coloana Atribuit, faceți clic pe pictograma/- pentru a selecta toate paginile.
  6. Faceți clic pe Actualizare.

(De asemenea, puteți utiliza această pagină pentru a elimina selectiv elementele care sunt utilizate pe unele pagini, dar nu pe altele. Dar fiți atent.

Pentru a elimina individual un articol:

  1. În administratorul comerciantului, deschideți orice pagină.
  2. Faceți clic pe fila Elemente.
  3. Localizați articolul în cauză și debifați caseta Atribuit.
  4. Faceți clic pe Actualizare.

Notă: Când eliminați elemente, este posibil să vedeți acest avertisment: „Neatribuirea articolelor elimină definitiv sursa șablonului de pe această pagină”. Acest mesaj apare indiferent dacă aveți efectiv elementul listat pe pagina în cauză. Verificați de două ori pentru a vedea dacă elementul este listat. Nu va conta, dar la fel de bine ai putea face șablonul mai curat.

Optimizați-vă codul SMT

Există de obicei zeci de moduri de a scrie cod care creează un anumit efect. Unele sunt mai eficiente - ceea ce înseamnă că motorul Miva Merchant trebuie să funcționeze mai puțin pentru a obține același rezultat - decât altele, iar altele sunt pur și simplu greșite. Dacă aveți dubii, întrebați întotdeauna prietenii de pe forumurile Miva Merchant pentru confirmare și sfaturi.


Un anumit text condițional era aici!

Acesta este codul pe care l-am văzut odată în șablonul cuiva. Dacă nu știți de ce îl afișez aici, atunci cu siguranță ar trebui să solicitați forumului sfaturi cu privire la încercările dvs. de codificare. De asemenea, puteți găsi un exemplu despre utilizarea SMT într-un blog de Tiny Queen.

Notă: Răspunsul la exemplul de mai sus este: deoarece prețul produsului este o valoare numerică, „0,00”, „0,0”, „000,0” etc.

Exemple de cod non-optim mai frecvente:

Nu se utilizează cea mai mică excludere posibilă. De exemplu:

când doriți doar să nu apară ceva în paginile de produse și categorii, ceea ce ar fi mai simplu și mai rapid de scris ca:

Notă: dacă aveți o adevărată optimizare, probabil că veți inversa CTGY și PROD deoarece, la testarea „IN”, testul se termină atunci când se găsește prima potrivire. Întrucât majoritatea vizitatorilor accesează mai întâi paginile de categorii, listarea acestora ar fi în general ușor mai rapidă ... dar până atunci, probabil că veți dezbate meritele codării în toate literele minuscule și veți participa la convențiile StarTrek. Oh, vorbind despre care - minuscule, nu StarTrek - utilizați IN versuri CIN ori de câte ori este posibil. IN înseamnă potrivire „acest” ÎN „acest șir” în timp ce CIN înseamnă potrivire „acesta” în „tHIS sTring” indiferent de caz.

Nu creați variabile care există deja

Introducerea de module precum Tool Kit și Tool Belt permite proprietarilor magazinelor să își creeze propriile variabile pentru utilizare în declarații condiționate și afișare. Înainte de a crea una, asigurați-vă că variabila nu există deja. Puteți utiliza instrumente precum modulul nostru Merchant Detective sau Latu’s Store Helper pentru a vedea aceste variabile.

Nu utilizați câmpuri și condiționări personalizate pentru formatarea statică

Funcția Câmpuri personalizate Merchant 5, împreună cu declarațiile condiționale, sunt instrumente excelente pentru extinderea funcționalității fontului magazinului dvs. În mod frecvent, aceste funcții sunt folosite greșit pentru a crea ceea ce numim „formatare statică”. Formatarea statică este orice lucru care apare la fel pentru utilizatori diferiți. Un exemplu obișnuit este crearea unui afișaj de produs care utilizează câmpuri personalizate pentru a afișa informații descriptive suplimentare, cum ar fi dimensiuni, numere de piese suplimentare, informații despre aplicație etc. Deși înțelegem și aplaudăm dorința de a asigura coerența informațiilor, aceasta creează o povară inutilă pentru serverul dvs. În schimb, luați în considerare alte mijloace de formatare a câmpului de descriere real pentru a fi consecvente de la produs la produs.

Nirvana: Unde se întâlnesc SMT și CSS

Comparați aceste două mostre de cod:

Lista produselor pe categorii bazate pe tabel

Lista produselor bazate pe CSS

Care dintre dvs. ați crede că este mai rapid și mai ușor de întreținut? Această metodă se bazează pe o caracteristică CSS puternică numită „float”. Practic, se afișează primul articol (DIV), apoi se afișează următorul articol atâta timp cât se potrivește, de-a lungul primului element. Linia,

Scoateți codul din codul dvs.

Dacă utilizați funcții javascript sau etichete de stil inline, faceți referire la fișiere externe (link), mai degrabă decât să apelați funcțiile direct în șablonul dvs. (inline). Fișierele legate, cum ar fi imaginile, sunt salvate local pe computerul utilizatorului, astfel încât conținutul lor să fie descărcat o singură dată.

Există un ușor dezavantaj în apelarea scripturilor și fișierelor CSS externe. De fiecare dată când un astfel de fișier este apelat, trebuie să se facă un HTTP suplimentar (cerere de server), care necesită timp. Cu toate acestea, acest lucru este compensat de faptul că odată ce fișierul este numit, este salvat local. Deci, pe a doua pagină, nu numai că solicitarea HTTP este ocolită, dar conținutul scriptului sau fișierului CSS nu trebuie să fie transmis.

De asemenea, dacă un script este utilizat numai pe una sau mai multe pagini, este posibil să obțineți un anumit avantaj de viteză (și o ieșire mai curată) prin împachetarea codului sau referinței într-un condițional. De exemplu, dacă un script rulează DOAR pe ecranul facturii, puteți utiliza:

Dacă există mai multe ecrane care au nevoie de script, puteți utiliza:

Grupați-vă scripturile

Ai nevoie doar de un „grup de scripturi”. Adunați toate scripturile care pot fi în zona capului și plasați-le într-un singur grup.
Dacă codul dvs. sursă arată astfel:

Faceți-o să arate astfel:

Reduceți apelurile de script în afara site-ului

Conectarea la un fișier JavaScript sau un script similar în afara domeniului dvs. nu numai că încetinește încărcarea paginii, ci și poate bloca complet încărcarea paginii. De exemplu, dacă serverul la distanță nu este disponibil, nu numai că aceste caracteristici vor fi indisponibile, dar întreaga pagină poate refuza încărcarea. Deci, ori de câte ori este posibil, copiați scripturile pe site-ul dvs. web și conectați-le acolo. Dacă nu puteți descărca scriptul, de exemplu, etichetele pentru rețelele sociale, scripturile analitice Google etc., așezați cel puțin linkul în partea de jos a paginii (imediat după