10 stvari za ubrzanje WordPressa ili WooCommerca u 2022.

Alat

Za usporedbu rezultata prije i poslije, možete koristiti PageSpeed Insights

Backend optimizacije

Backend optimizacije odnose se na izvršavanje PHP koda, vrijeme reakcije servera i bazu. Dakle, sve ono na serveru.

1. PHP7

Ako vam se administracija vuče, a učitavanje stranica prije prikazivanja bilo čega traje dugo, ovo bi moglo riješiti problem – posebice kod lošijih tema i pluginova s ThemeForesta

PHP verzije 7 donosi značana ubrzanja. Prebacivanje je jednostavno – ako imate cPanel to možete napraviti sami kroz “Select PHP Version” ili zatražite svog hosting providera da to napravi umjesto vas.

2. Onemogućite i očistite revizije

Kod velikih baza, revizije mogu raditi problem, a isključivanje je vrlo jednostavno.

U wp-config.php dodajte:

define('AUTOSAVE_INTERVAL', 300 );
define('WP_POST_REVISIONS', false );

Stare revizije možete obrisati u bazi koristeći upit:

DELETE FROM wp_posts WHERE post_type = "revision";

Za ovo postoje i pluginovi.

3. Onemogućite i obrišite pluginove

Brisanje dodataka koji nisu potrebni može značajno doprinijeti ubrzanju vašeg weba.

Ponekad pluginovi imaju greške, primjerice Contact Form 7 Mailchimp u nekim verzijama ima bug jer na svaki refresh poziva Mailchimpov server i tako produljuje učitavanje za čak 1,5 sekundi!

Također pripazite na zahtjevnije pluginove poput WPML-a

4. Očistite bazu

Baza ponekad zna sadržavati nepotrebne tablice i zapise. Plugin WP-Optimize može vam pomoći s čišćenjem. Prije pokretanja preporučujemo backup, a nakon pokretanja WP-Optimize možete deaktivirati i obrisati.

5. Caching

WP ima super rješenja za caching. Iako ima različitih načina cachinga, u suštini to znači da ćete na prvi zahtjev neke stranice (npr. naslovnice) na disku stvoriti statičnu html verziju koja će se na svaki sljedeći zahtjev poslužiti odmah – bez upita u bazu. Statična verzija ima svoj rok pa će se nakon isteka roka, kreirati nova verzija. Svaka promjena na webu (npr. dodavanje novog proizvoda) automatski će osvježiti cache.

S ovim treba biti oprezan jer možda imate dijelove koji se trebaju stalno osvježavati. Npr. sadržaj košarice, broj posjetitelja na websiteu, itd. Dio možete riješiti JavaScriptom, dio korištenjem dinamičkog cachinga, a ponekad ćete trebati reći “isključi caching za prijavljene korisnike”

Frontend optimizacije

Frontend optimizacije odnose se na sve ono što se izvršava na računalu posjetitelja.

6. HTTP/2 protokol

Umjesto da po svaki resurs (javascript file, css file, sličica, …) idete posebno, dohvatite sve odjednom.

Kako? Zatražite od svog hosting providera da vas prebaci na HTTP/2.

Testiranje možete provesti na HTTP/2 testerima

7. Spajanje CSS-ova i JS-ova i minifikacija

Sav CSS treba se učitati u jednom requestu. Isto vrijedi i za JavaScript s time da JavaScript ne smije blokirati prikaz već se treba učitati asinkrono ili iz footera.

CSS, JS i HTML treba biti minificiran.

U svemu ovome vam može pomoći plugin Autoptimize koji će to odraditi automatski umjesto vas.

8. Lazy Load

Fotografije treba učitavati tek kada uđu u ekran ili neposredno prije toga. Nema smisla učitavati fotografije u footeru, ako korisnik nikada neće doći do njega.

Za lazy load tehniku također možete koristiti Autoptimize plugin iz točke 8.

9. Optimizirajte fotografije

Fotografije je moguće kompresirati bez gubitka kvalitete! Za to možete koristiti pluginove poput Smusha koji će prilikom uploada automatski kompresirati sve varijacije. Dodatno ćete uštedjeti prostor na disku.

Danas postoje vrlo efikasni formati slika kao što je webp. U čak nekoliko puta manje kilobajta, browseri koji podržavaju ovaj format prikazat će identične fotografije. Za ovu optimizaciju možete koristiti WebP Express plugin.

10. Uključite gzip kompresiju i definirajte istek fajlova

Ovo će značajno smanjiti veličinu teksutalnih fajlova. Jednostavno u svoj .htaccess dodajte:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>

Definiranjem isteka fajlova reći ćete: “Ako je korisnik učitao logotip već jednom u zadnjih godinu dana na svoje računalo, dohvati logotip iz računala korisnika”.

U .htaccess dodajte:

<IfModule mod_expires.c>
AddType application/font-woff2 woff2
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType application/javascript "access 1 year"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType image/svg+xml "access 1 year"
ExpiresByType application/font-woff2 "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

Ovo je bilo 10 stvari koje svatko može napraviti koristeće pluginove ili s vrlo malo ulaženja u kod.

Za one koji žele znati više – proučite Critical CSS tehniku, analizirajte kod, redirectove, sve savjete na PageSpeed insights alatu, Google AMP itd.