Nu este un secret: utilizatorii web de astăzi au nevoie de viteză. Odată cu conexiunile la internet și celulare care devin din ce în ce mai rapide, utilizatorii se așteaptă ca site-urile să se încarce rapid și este datoria dezvoltatorului să facă tot ce poate pentru a difuza rapid acele pagini. Așadar, cum îți faci site-ul să fie rapid? Iată ce ar trebui să faci în mod special atunci când construiești cu WordPress.

Primul lucru este primul: testați viteza site-ului dvs

Performanța poate fi împărțită în două categorii principale: front-end și back-end. Consider că back-end-ul este ceva legat de server și de modul în care datele sunt populate pe o pagină (codul tău PHP din tema ta este „back-end”). Front-end-ul constă din toate activele dvs. (CSS, JavaScript, imagini etc.) și markup. Tot ceea ce citește și interpretează un browser web este „front-end”. Motivul pentru care fac această distincție în ceea ce privește performanța este că este bine să știi ce optimizezi și, chiar mai important, unde trebuie să optimizezi cel mai mult.

Pentru a testa viteza site-ului dvs., vă recomand să utilizați o combinație de WebPagetest și Google PageSpeed ​​Insights. WebPagetest ne oferă o idee bună despre timpul real (în secunde) pe care îl are un site pentru a se încărca, oferindu-vă câteva valori bune pentru a ști dacă back-end-ul sau front-end-ul cauzează încărcarea lent a site-ului. PageSpeed ​​Insights este cel mai bun pentru a vedea cum este redat site-ul dvs. de browser și ce puteți îmbunătăți pe front-end.

Rețineți că acest articol este axat pe site-uri WordPress personalizate total. Dacă executați teste de viteză pe un site folosind o temă voluminoasă și 19 pluginuri terță parte (plugin-urile pot încetini atât partea din față, cât și cea din spate), începeți prin a ajunge la o listă goală și activați încet pluginurile unul câte unul pentru a le găsi. care încetinesc lucrurile.

Performanță front-end

Cum să îmbunătățiți accesibilitatea temei dvs. WordPress chiar acum

Nu trece o zi în care să nu folosesc web-ul, nici măcar când sunt în vacanță. Voi lua o presupunere sălbatică pe care o poți identifica. Din ce în ce mai mult, internetul joacă un...

Regula de aur a performanței, conform directorului de performanță al Fastly, Steve Souders, este că 80-90% din timpul total de încărcare a unei pagini este format din front-end (regula 80/20). 10-20% ale back-end-ului sunt de o importanță crucială, dar chiar dacă utilizați cea mai rapidă gazdă pe care banii o pot cumpăra, site-ul dvs. tot nu își va atinge potențialul maxim fără a optimiza front-end-ul pentru a vă asigura că utilizatorii percep asta. se incarca rapid. Percepția este importantă când vine vorba de optimizarea front-end. Un utilizator nu îi va păsa cât timp, în termeni de secunde, durează un site să se încarce. Tot ce le pasă cu adevărat este cât de repede pot interacționa cu el și să vadă conținutul sau să efectueze acțiuni fără întârziere. Ca să nu spun că nu ar trebui să vă faceți griji cu privire la timpul real de încărcare (ar trebui), dar urmând tehnicile de mai jos, vă puteți asigura că site-ul dvs. este într-o stare de utilizare cât mai rapid posibil, urmat rapid de o încărcare completă a paginii de toate activele.

CSS

Cel mai important lucru de făcut cu CSS înainte de a fi livrat în browser este pur și simplu să-l comprimați și să eliminați selectoarele neutilizate. Obținerea unui flux de lucru bun de dezvoltare atunci când dezvoltați teme face acest proces banal, mai ales dacă utilizați un pre-procesor precum Sass. Folosesc Grunt, care este un ruler de sarcini JavaScript care execută comenzi pentru tine în timpul dezvoltării. Există un plugin pentru Grunt numit grunt-contrib-sass care pur și simplu compilează toate fișierele tale Sass într-unul singur (dacă folosești parțiale Sass, adică), îl minimizează și îl comprimă. Introduceți pluginul grunt-contrib-watch pe deasupra și va rula sarcina Sass ori de câte ori salvați un fișier. Uşor! Nu pierdeți somnul dacă nu utilizați cea mai recentă și cea mai bună metodologie CSS, dar încercați să urmați un fel de standard în timp ce creați CSS pentru a evita duplicarea și dimensiunile uriașe ale fișierelor.

Odată ce foaia de stil este gata de funcționare, cea mai ușoară (și de departe, cea standard) modalitate de a o încărca este să o referiți în <head> ;. În acest fel, browserul îl încarcă și îl analizează înainte ca restul DOM-ului să fie încărcat. Cu toate acestea, există o nouă tehnică în care stilurile „critice” sunt aliniate în <head> și apoi foaia de stil completă este încărcată asincron folosind JavaScript. Folosesc cu adevărat această tehnică doar atunci când încerc absolut să fac ca un site să se încarce (sau să perceapă să se încarce) în mai puțin de o secundă, dar este un lucru grozav de privit și de a vedea dacă se poate integra în fluxul tău de lucru. Filament Group are un articol amplu despre utilizarea acestei tehnici.

JavaScript

Înțelegerea modului în care WordPress folosește MySQL

În linii mari, WordPress poate fi împărțit în două segmente: logica și șabloanele care generează aspectul și senzația unui site WordPress, baza de date MySQL care stochează tot conținutul și puterile...

Regula(rile) de aur pentru optimizarea JavaScript este simplă: serviți cât mai puține fișiere JavaScript și reduceți și concatenați. Pluginurile WordPress de la terțe părți pot fi dăunătoare prin umflarea documentului cu fișiere JavaScript de blocare neminificate, așa că este important să fiți atenți atunci când alegeți pluginuri. În mod ideal, ați concatena TOATE fișierele JavaScript într-unul singur și apoi ați diminua dracu. Pentru momentele în care nu este posibil să vă concatenați toate fișierele într-unul singur, există atribute HTML numite „async” și „defer” care pot fi folosite pentru a încărca fișiere JavaScript asincron sau odată ce restul paginii este încărcat.

Cel mai obișnuit loc în zilele noastre pentru a face referire la JavaScript este în partea de jos a documentului, chiar înainte de eticheta de închidere. Cu toate acestea, există tehnici mai avansate pentru a încărca JavaScript. Din nou, Filament Group a făcut o mulțime de cercetări în acest sens și are mai multe proiecte open source pe care le puteți folosi dacă doriți un timp de încărcare a paginii super rapid (apropo, nu sunt afiliat cu Filament Group; Cred că lucrurile lor sunt minunate). Cea mai bună abordare pare să fie încărcarea dinamică a scripturilor prin introducerea unei funcții mici în <head> ; care apoi adaugă etichete de script fără a bloca restul paginii. Pentru mai multe informații, consultați scriptul loadJS.

Imagini

Imaginile sunt adesea cele mai mari fișiere dintr-o pagină, responsabile pentru cea mai mare întârziere a timpului de încărcare a paginii. Lucrul bun despre imagini este însă că, spre deosebire de CSS și JavaScript, majoritatea browserelor le încarcă asincron. Asta măcar ajută la performanța percepută a unei pagini, dar totuși doriți să vă asigurați că A) difuzați cât mai puține imagini și B) acele imagini sunt comprimate cât mai mult posibil.

Instrumentele de compresie sunt necesare pentru a stoarce cât mai mult exces posibil pe imagini. ImageOptim este o aplicație excelentă pentru Mac, care face acest lucru bine, împreună cu OptiPNG și jpegtran, pentru a fi utilizate cu aplicații care rulează sarcini precum Grunt.

Fonturi

Fonturile web sunt foarte comune în zilele noastre. Folosesc Google Web Fonts pentru aproape fiecare proiect, dar până de curând nu mi-am dat seama de performanța pe care o aveam doar făcând referire la ele în <head> . Hitul de performanță este mic, dar acesta este un articol despre crearea site-urilor fulgerătoare, așa că totul contează! Pentru cea mai bună performanță folosind fonturi web, vă recomand să utilizați Web Font Loader, dezvoltat în comun de Google și Typekit. Este un script open source care gestionează atât încărcarea fonturilor dvs. de la terțe părți, cum ar fi Google Web Fonts, cât și le permite să se încarce asincron (te-ai săturat încă de acel cuvânt?).

După cum era de așteptat, este necesară o anumită configurație pentru a integra Web Font Loader în proiectul dvs., deci consultați proiectul pe GitHub pentru detalii despre cum să îl configurați.