Share
Performanța este unul dintre cele mai importante aspecte ale oricărui site Web, dar este ceva ce oamenii par să ia în considerare rareori când cumpără teme WordPress. În această listă vom lua cele zece cele mai vândute teme pe Themeforest, în ordinea apariției, le vom rula prin câteva teste de performanță de bază și vom vedea ce concluzii putem trage.
ThemeForest lista celor mai bine vandute teme WordPress este actualizata pe saptamana, dar veti vedea adesea jucatori cunoscuti care detin locurile de top timp de ceva timp. Am luat primele zece (văzute mai jos) și le-am împotrivit cu unele teste comune de performanță.
Cel mai bun WordPress Themes - actualizat săptămânalExistă multe instrumente disponibile pentru testarea site-urilor web, am ales câteva elemente clasice: Google Pagespeed Insights, Webpagetest.org, Pingdom și instrumentele Chrome dev. Cei mai mulți vor da feedback cu privire la cât de repede se încarcă o pagină web, la greutatea sa globală, cât de eficientă sunt activele sale, dând în cele din urmă un anumit scor. Am executat un demo al fiecărei teme prin intermediul acestor instrumente și am comparat cifrele (vezi tabelul de la sfârșitul postului).
În plus față de aceste teste am folosit pluginul Audit de accesibilitate pentru instrumentele Chrome dev. Acest lucru nu este conectat la performanța ca atare, dar rezultatele dau întotdeauna o perspectivă asupra modului în care este construită o temă.
Unele lucruri de reținut:
Avada: demo creativScoruri excelente peste bord. Testele inițiale au fost mai puțin puternice, dar ThemeFusion au reușit să îmbunătățească în mod semnificativ numărul prin optimizarea imaginilor folosite în acest demo. Scorul de afișare al afișajului pentru pagina de afișare a scurs de la 48% la 88% doar pe partea din spate a greutății imaginii, arătând cât de importantă este optimizarea imaginii! Mare pentru a vedea că Avada este, de asemenea, construit cu accesibilitate în minte.
The7: Demo de construcții
Accentsconagua
Alt atribute, contrastul de culoare ar putea fi mai bun pe o parte din text (relativ la fundal). Dar, în ansamblu, elementele sunt bine structurate și accesibilitatea este solidă.În general, acest demo se încarcă destul de repede; imaginile și activele sale nu sunt prea grele, iar pagina este utilizabilă relativ curând la încărcare. Cu toate acestea, gradul său de Pingdom nu este optim. Îmbunătățirile ar putea fi făcute prin combinarea unora dintre JavaScript, la fel și CSS-ul, în timp ce cache-ul ar putea fi facilitat prin faptul că nu se forțează numerele de versiuni ale numelor de fișiere (de exemplu: /assets/css/settings.css?ver=5.4.5.2).
BeTheme: Demo 3DAceastă temă se încarcă foarte repede. Multe dintre conținutul său vizibil sunt prioritizate prin includerea stilurilor esențiale în linie în cap, și multe dintre cele încărcate sunt minificate și concatenate. Așa cum se întâmplă adesea, imaginile reprezintă partea de leu din greutatea paginii (69,5%), deci nu ar fi dificil să obțineți pagina de pornire a demo-ului sub pragul de 1 Mb de aur.
Impreza: Demo restaurantuluiÎn timp ce viteza de încărcare a demo-ului restaurantului Impreza nu este rea, scorurile sale de performanță sunt împiedicate de peste 2 milioane de imagini. De asemenea, este de remarcat lipsa de CDN și timpul de răspuns redus al serverului; două aspecte specifice pentru găzduirea acestui demo și cele pe care le puteți îmbunătăți cu ușurință.
Enfold: Demonstrație GymDin nou, niciun CDN nu a fost folosit pentru găzduirea acestui demo, ceea ce îi pierde câteva puncte pe webpagetest.org. O lipsă de HTTPS ar fi putut, de asemenea, să fi câștigat Enfold un semn negru. Ca de obicei, acest demo se încadrează în capcana de a fi cât mai vizual posibil, sacrificând greutatea paginii pentru calitatea imaginii. La peste 5Mb aceasta este greutatea grupului, dar dimensiunea imaginii este întotdeauna ceva ușor de remediat.
X: Demonstrația bisericiiAlt atributele pe unele imagini, raportul redus de contrast pe unele zone (această temă biserică este destul de silențioasă) și absența unui titlu atribut pe un iframe. Cu toate acestea, având în vedere că iframe-ul este dintr-un embed YouTube, care nu vine cu un atribut de titlu ca standard, vom ierta această supraveghere.Acest demo este unul dintre puținele care face o imagine rezonabilă de menținere a imaginii de ansamblu până la un nivel minim; webpagetest îi acordă un solid 97/100 pentru comprimarea imaginilor. În schimb, scorurile sale scăzute vin în mare parte din găzduire; nici un CDN, nici un HTTPS, un timp de răspuns inițial redus și o lipsă de "păstra viu" - altfel cunoscut ca o conexiune HTTP persistentă, ceva ce poate fi pornit cu ușurință. Ca întotdeauna, îmbunătățiri ușoare pe care tu le-ai putea aduce în vigoare.
Podul: demo SpaUna dintre cele mai ușoare demo-uri de aici, dar glisoarele de imagine vor întotdeauna să cârdășească greutatea paginii, chiar și cu imagini bine optimizate ca acestea. Micsorarea codului HTML și a altor elemente ar fi ajutat scorul mobil al paginilor Pagespeed, deși scorul desktopului este extrem de bun. Gazduirea imbunatatita ar face din nou minuni - un timp de raspuns mai bun pentru server, un CDN si caching-ul fiind fructe cu un grad scazut de agitate.
Flatsome: explorați demo-ulNu este vazut prin ochii favorabili de Pagespeed Insights, desi celelalte metrii de notare absolut iubesc Flatsome! Bună gazduire servește pagina în mod eficient (autorii temelor iau notă), activele sunt reduse la minimum, iar imaginile leneșe de încărcare ajută la ceea ce altfel ar fi încărcarea progresivă a unei pagini cu greutate medie.
Jupiter: modelul BellonaVoi suna ca o înregistrare ruptă aici, dar cinci minute de optimizare a imaginii ar reduce foarte mult cheltuielile generale ale acestui demo. Casa-bg-08.jpg singurul cântărește la aproape un întreg megabyte; care rulează prin TinyPNG se scutură de la 87% imediat. De ce nu? După cum sugerează Pingdom și Webpagetest, cele mai multe aspecte legate de performanță sunt foarte bune.
Ziar: știri TechScorurile excelente pe scară largă se referă la îmbunătățiri standard (optimizarea imaginii, compresie / concatenare JS și CSS), dar rețineți că acest demo vine de asemenea cu o extensie extensivă care promovează alte versiuni ale temei este puțin probabil să aibă nevoie). Fără mult efort acest demo ar putea intra în clasa de greutate sub-1Mb.
Așa că se încheie scorurile noastre. După cum ați cumpărat o temă WordPress, cum ați putea optimiza site-ul pe care îl construiți împreună cu acesta?
Nu vă va surprinde: un prim port ușor de apel când vă optimizați site-ul este imaginile dvs. Eliminați imaginile nedorite, comprimați-le pe cele de care aveți nevoie, salvați JPEG-urile ca fiind "progresive" (astfel încât să fie cel puțin ceva de văzut în timp ce se încarcă) și veți fi plecați de la bun început. Poate doriți să instalați un plugin Lazy Loading pentru a face lucrurile un pas mai departe. Am văzut că foarte puține dintre aceste demo-uri prioritizează optimizarea imaginii, dar cel puțin înseamnă că veți putea îmbunătăți scorurile.
În ceea ce privește scorurile insuficiente Pagespeed Insights, ați observat că toate aceste demonstrații (cu excepția unuia) scor mai bine pentru desktop decât versiunile lor mobile. Acest lucru nu mai reflectă modul în care este folosit webul, astfel încât Google (și utilizatorii) să fie fericiți să analizeze cu atenție performanța mobilă. O primă atitudine mobilă vă va ajuta și pe SEO.
Cum ai putea face asta? Concatenarea și minimizarea CSS și JavaScript poate fi dificilă cu WordPress; folosirea pluginurilor de la terți înseamnă că fișierele pot fi multe și nu veți avea prea mult control asupra lor fără ajutor. Cu toate acestea, faceți tot ce este mai bun pentru a include stiluri vitale de "vizualizare inițială" inline în și a face site-ul dvs. să fie utilizabil cât mai repede posibil, împiedicând scrierea de script-uri de "render-blocking" de la încetinirea procesului de încărcare. Dacă glisorul din partea de sus a paginii dvs. de pornire solicită încărcarea întregii pagini înainte de a apărea, Google vă va penaliza.
Dincolo de asta, luați în considerare găzduirea dvs. Activați compresia GZIP. HTTPS nu va face nici un rău nici. Utilizați și un serviciu de caching; instalarea și configurarea W3 Total Cache este jocul copiilor. Utilizați un CDN dacă conținutul dvs. este destinat unui public larg. În sfârșit, aruncăm o privire la aceste tutoriale și cursuri pentru mai multe detalii și ajutor pe această temă:
