Ce este Minificarea și ce Înseamnă
Minificarea este poate cea mai greșit înțeleasă și defăimată funcție a optimizării site-ului web. De ce?
În timp ce conceptul este de fapt foarte simplu, în realitate, adesea strică lucruri, lăsând proprietarii de site-uri web non-tehnici să-și smulgă părul. Minificarea este aproape întotdeauna menționată ca cea mai bună practică de performanță web, așa că mulți oameni doresc să o folosească. Pentru dezvoltatori există o mulțime de instrumente disponibile pentru a-l implementa în fluxul de lucru de dezvoltare, cum ar fi Gulp și Grunt, de exemplu.
Pentru proprietarul obișnuit de site-uri web, există soluții de minimizare bazate pe pluginuri, dar acestea pot fi dificil de implementat, deoarece comportamentul lor poate varia de la un site la altul, în funcție de tema și pluginurile pe care le rulează site-ul tău.
În timp ce unele dintre celelalte aspecte ale optimizării performanței funcționează aproape în același mod pe fiecare site, minimizarea tinde să varieze cel mai mult. Natura sa imprevizibilă este unul dintre motivele pentru care provoacă dureri de cap.
Ce este Minificarea?
Cei de la WP Rocket o numesc optimizare de fișiere și poate fi selectată pentru fișiere CSS, fișiere JS și HTML. Alte plugin-uri o pot numi pur și simplu minificare.
Este de obicei compus din două procese complementare:
- Minificare
- Concatenare
Minificare
Minimizarea înseamnă literalmente eliminarea părților ne-necesare ale fișierelor CSS și JS (JavaScript) pentru a le face mai compacte. Atunci când dezvoltatorii scriu cod, acestea vor include întreruperi de linie, spațiu alb și comentarii care fac codul mai ușor de citit, dar nu sunt necesare de browserul dvs. pentru a procesa codul. Deci minificarea elimină aceste elemente. Acest lucru va face codul destul de mult ilizibil pentru oameni, dar computerelor nu le pasă de acest lucru, totuși îl pot procesa. Spațiul alb este pentru noi, oamenii. Acele părți care nu sunt necesare adaugă câțiva octeți suplimentari la dimensiunea fișierului, făcându-le puțin mai groase decât este necesar.
Deci, scopul minimizării este să reduceți dimensiunea fișierului activelor dvs. CSS/JS, astfel încât acestea să se descarce mai repede.
Rezultatul seamănă mult cu acele pungi speciale de compresie pe care le poți pune în valiză. Îți pui hainele în pungă și apoi aerul este aspirat, făcând pachetul mult mai compact.
Înainte de minificare, un fișier CSS va arăta cam așa:
După minificare, va arăta astfel:
Concatenare
Concatenarea înseamnă unirea împreună. Deci, de exemplu, dacă aveți 10 fișiere CSS pe site-ul dvs., procesul de concatenare le va combina în câteva fișiere.
Cum Ajută Minimizarea?
Mă voi referi la o analogie pe care am folosit-o într-o postare anterioară – Cum să alegi o temă rapidă – unde vorbim despre solicitările HTTP. Imaginează-ți că ești afară cu niște prieteni. Te duci la bar să comanzi o rundă de băuturi, pentru tine și cei 7 prieteni ai tăi. În acest exemplu, sunteți ca browserul web (adică Chrome, Safari etc.), iar barmanul dvs. este serverul web. Barmanul tău are maximum 2 mâini, așa că poate să aducă câteva beri de la frigider simultan. Asta înseamnă că trebuie să facă un total de 4 drumuri la frigider pentru a-ți aduce cele 8 beri. Asta consumă timp.
Dar, ce se întâmplă dacă în schimb comandați un ulcior de bere? Astfel, toate cele 8 băuturi sunt într-un singur recipient, așa că într-o singură călătorie, barmanul vă poate aduce comanda. Este mult mai eficient.
La fel ca și barmanul dvs., browserele pot gestiona doar un anumit număr de fișiere simultan. Deci, cu cât aveți mai multe fișiere pe site-ul dvs., cu atât mai multe călătorii la serverul de unde le solicită. Și site-urile web moderne comandă adesea zeci de fișiere simultan. Concatenarea unește mai multe fișiere împreună, astfel încât serverul dvs. să poată trimite mai puține fișiere către browser și va fi un proces mai rapid.
Sună Destul de Ușor, Deci Care Este Problema?
În unele cazuri, minificarea și concatenarea pot rupe lucrurile. Aspectul tău ajunge să arate ciudat sau o anumită funcție nu funcționează corect pe site-ul tău. Motivele pentru aceasta pot fi variate și misterioase. Fiecare site se va comporta diferit în funcție de setul specific de teme și pluginuri care rulează și de modul în care sunt codificate. Mediile server pot face, de asemenea o diferență. În multe cazuri, în special cu JavaScript, este adesea legat de ordinea în care fișierele sunt încărcate pe pagină, deoarece JS este mai pretențios.
Acest lucru poate fi problematic pentru persoanele care încearcă să treacă de infamul test Google PageSpeed. Google dorește să mutați toate fișierele JavaScript în partea de jos a site-ului, dar asta poate distruge anumite funcționalități, așa că acolo merge scorul perfect.
Ori de câte ori există o problemă cu minificarea înseamnă că trebuie să căutați fișierele problematice și să le excludeți din proces.
Merită Minificarea Efortul?
Minificarea nu este locul în care vei obține cel mai mare câștig pe site-ul tău, este mai mult un pas de reglare fină. S-ar putea să vedeți o mică îmbunătățire a vitezei, dar nu va fi consistentă. Deci, dacă nu ați făcut altceva, nu de aici ar trebui să începeți.
Minificarea CSS funcționează de obicei destul de bine, iar depanarea este puțin mai ușoară.
Minificarea JS poate fi o adevărată durere de cap pentru depanat, deoarece fișierele care trebuie excluse nu sunt întotdeauna intuitive, așa că poate dura mult timp pentru a încerca și a le înțelege. Și asta poate să nu merite, mai ales dacă nu ești dezvoltator și încerci să-ți dai seama singur.
Implementarea stocării în cache a paginii și optimizarea imaginilor sunt activitățile care sunt destul de ușor de implementat și în care veți observa o îmbunătățire vizibilă a timpului de încărcare.
Consultați celelalte articole din seria noastră de optimizare a performanței:
- Memorarea în cache a paginii pentru WordPress
- LazyLoad imaginile dvs. pe WordPress
- Memorarea în cache a browserului
