Slike, PHP i druge dobitke u brzini

Modul 6: Brzina · Vrijeme čitanja: 9 minuta

Cilj učenja: Nakon ove lekcije moći ćete primijeniti najveće preostale dobitke u brzini i izmjeriti njihov učinak.

Ključni pojmovi: optimizacija slika, WebP i AVIF, lijeno učitavanje (lazy loading), LCP slika, fetchpriority, inačica PHP-a, čišćenje baze podataka (revizije, transienti, autoload), WP-Cron, pravi cron, DISABLE_WP_CRON, vanjski fontovi, Heartbeat

Radite pravilnim redoslijedom

Nakon predmemorije stranica (page cache, lekcija 6.2), ovo su dobici koji najviše donose, otprilike poredani prema omjeru truda i učinka:

1. slike u redu;
2. aktualna inačica PHP-a;
3. manje vanjskih komponenti i zahtjevnih dodataka;
4. počišćena baza podataka;
5. planirani zadaci na pravom cronu.

Izmjerite prije i poslije svakog koraka (lekcija 6.1), inače nećete znati što je pomoglo. I radite jednu stvar odjednom.

Slike: najveći dobitak u pregledniku

Na većini stranica slike čine najveći dio onoga što posjetitelj preuzima. Ono što ste naučili u lekciji 4.4 ovdje se isplati:

• Ispravna veličina: nemojte učitavati veće slike nego što je potrebno i neka WordPress putem srcset ponudi manje formate.
• Kompresija i format: WebP je obično znatno manji od JPEG-a uz jednaku kvalitetu; AVIF je često još manji. Dodatak (plugin) može pretvoriti postojeće slike i poslužiti manju verziju preglednicima koji je podržavaju. Provjerite odvija li se pretvorba na Vašem vlastitom poslužitelju ili kod vanjske usluge.
• Lijeno učitavanje (lazy loading), ali ne za sve. WordPress slikama automatski dodjeljuje loading="lazy", osim prvoj velikoj slici pri vrhu. Ta je slika često LCP element (lekcija 6.1): najveći dio sadržaja koji posjetitelj prvi vidi. Ako se ta slika lijeno učitava, preglednik baš s njom čeka, pa Vaš LCP postaje lošiji. Zato WordPress LCP kandidatu često dodjeljuje fetchpriority="high", kako bi je preglednik dohvatio prvu.

<img src="hero-1536x864.webp" width="1536" height="864"
     fetchpriority="high" alt="Radionica s biciklima poredanim u red">
<img src="team-768x512.webp" width="768" height="512"
     loading="lazy" alt="Tim ispred trgovine">

Zamka: neke teme, alati za izradu stranica i dodaci za optimizaciju postavljaju lijeno učitavanje i na prvu sliku, ili učitavaju veliku sliku kao pozadinu putem CSS-a (koja se otkriva kasnije). U PageSpeed Insights, kod dijela LCP, vidjet ćete koji je to element i učitava li se lijeno.

PHP: besplatna brzina

Svaka nova velika inačica PHP-a brža je od prethodne, a web-stranice na WordPressu od toga odmah imaju korist, bez ikakve promjene na Vašoj web-stranici. Osim toga, stare inačice više ne dobivaju sigurnosne nadogradnje (lekcija 8.4). Ako prelazite na noviju inačicu, provjerite podržavaju li je Vaši dodaci i tema, i najprije to učinite u testnom okruženju (staging).

Kod postavki za PHP pogledajte i sljedeće:

• OPcache: kod većine hostinga je standardno uključen. Posljedica: izmijenjenoj PHP datoteci može trebati malo vremena prije nego što PHP počne koristiti novu verziju.
• memory_limit: prenizak uzrokuje greške kod zahtjevnih stranica; vrlo visok ne čini Vašu web-stranicu bržom.

Vanjske komponente i zahtjevni dodaci

Svaka komponenta druge strane dodatna je veza i dodatno vrijeme čekanja: fontovi s vanjske usluge, ugrađeni video, widget za razgovor (chat), kodovi za praćenje, gumbi za društvene mreže, karta. Pitanja za svaku komponentu:

• Je li potrebna? Video koji gotovo nitko ne pušta može se zamijeniti slikom s poveznicom.
• Može li lokalno? Fontove obično možete postaviti na vlastiti poslužitelj (uz dodatak ili putem theme.json kod blok teme). To uštedi jednu vezu i bolje je za Vašu privatnost (lekcija 9.3).
• Može li kasnije? Widget za razgovor ili video može se učitati tek nakon klika.

Kod dodataka pomaže mjerenje alatom X-Ray (kod hostinga s CloudLinuxom) ili dodatkom poput Query Monitor (privremeno uključite, vidljivo samo administratorima). Oni pokazuju koji dodatak zahtijeva najviše upita u bazu podataka ili vremena.

Čišćenje baze podataka

Baza podataka raste s stvarima koje ne vidite:

• Revizije (lekcija 4.1): svaka spremljena verzija svake stranice. Ograničite ih pomoću WP_POST_REVISIONS i počistite stare.
• Neželjeni komentari i komentari u košu, te objave u košu za smeće.
• Transienti: privremeni podaci dodataka u wp_options, koji se ponekad ne čiste.
• Autoload: opcije u wp_options s uključenim autoload učitavaju se u cijelosti kod svakog zahtjeva. Dodaci koje ste odavno uklonili ponekad ondje ostave velike količine podataka. Zdravlje web-stranice (lekcija 5.4) upozorava ako su autoload podaci jako veliki.
• Tablice zapisnika (log) dodataka (statistike, sigurnosni zapisnici, zapisnici e-pošte) koje se nikada ne prazne.

Čišćenje je moguće dodatkom za čišćenje, putem WP-CLI-ja (wp transient delete --expired, wp post delete $(wp post list --post_type=revision --format=ids) --force), ili funkcijom optimizacije u phpMyAdminu za same tablice. Uvijek najprije napravite sigurnosnu kopiju. Ne uklanjajte ništa za što ne znate što je.

Planirani zadaci: WP-Cron

WordPress ima zadatke koji se trebaju pokrenuti u određenom trenutku: objava planirane objave, provjera nadogradnji, rad dodatka za sigurnosne kopije. To se zove WP-Cron. Prema zadanim postavkama WP-Cron se ne pokreće po satu, nego kod posjeta: kod svakog zahtjeva za stranicom WordPress provjerava čeka li neki zadatak. Dva nedostatka:

• Kod malog broja posjetitelja zadaci se izvršavaju prekasno (planirana objava pojavljuje se tek kod prvog sljedećeg posjeta).
• Kod velikog broja posjetitelja provjera se odvija vrlo često, a zahtjevan zadatak može baš usporiti stranicu nekom posjetitelju.

Bolje je: isključiti WP-Cron kod posjeta i prepustiti pravom cronjobu poslužitelja da ga pokreće svakih pet ili deset minuta. U wp-config.php (iznad "to je sve, prestanite uređivati"):

define( 'DISABLE_WP_CRON', true );

I u cron zaslonu Vaše hosting administracije postavite zadatak, svakih 10 minuta:

*/10 * * * *  /usr/local/bin/php /home/gebruiker/domains/example.com/public_html/wp-cron.php >/dev/null 2>&1

Putanja do PHP-a i do Vaše web-stranice razlikuje se po hosting pružatelju; pogledajte upute svoje administracije. Ili koristite WP-CLI: wp cron event run --due-now. Naknadno u Zdravlju web-stranice provjerite da nijedan planirani zadatak ne kasni.

Heartbeat i administracija

Dok je otvorena, Nadzorna ploča WordPressa svakih 15 do 60 sekundi komunicira s poslužiteljem (Heartbeat): radi automatskog spremanja, obavještavanja da netko drugi uređuje istu objavu, i radi obavijesti. Ako Vam deset kartica s administracijom cijeli dan ostane otvoreno, to su tisuće zahtjeva. Zatvorite kartice koje ne koristite. Neki dodaci za predmemoriju mogu usporiti Heartbeat; potpuno isključivanje nije potrebno i time se gubi automatsko spremanje.

Sažetak

• Nakon predmemorije stranica: slike, inačica PHP-a, vanjske komponente i dodaci, baza podataka, cron. Izmjerite prije i poslije, jedan korak odjednom.
• Lijeno učitavanje za sve osim velike slike pri vrhu; ona radije dobiva fetchpriority="high".
• Novija inačica PHP-a besplatna je brzina, pod uvjetom da je Vaši dodaci podržavaju.
• Počistite revizije, transiente, neželjene komentare i velike autoload podatke, uvijek uz sigurnosnu kopiju.
• Postavite WP-Cron na pravi cronjob pomoću DISABLE_WP_CRON i zadatka u Vašoj administraciji.

Kviz

Zadatak

Zadatak A6.3: Lijeno učitavanje (lazy loading) i formati na Vašoj početnoj stranici. Unesite adresu svoje web-stranice. Program čita naslovnu stranicu i pregledava slike: je li prva velika slika bez loading="lazy" (i po mogućnosti s fetchpriority="high"), imaju li slike niže na stranici lijeno učitavanje, i koji je udio slika u WebP ili AVIF formatu?

Zadatak D6.3: Prije i poslije. Izmjerite jednu stranicu svoje web-stranice tri puta u PageSpeed Insightsu (mobilno) i zabilježite srednju vrijednost LCP-a, INP-a (ili vrijednost iz laboratorija Total Blocking Time ako nema podataka s terena), CLS-a i TTFB-a iz zadatka A6.1. Zatim provedite jedno poboljšanje iz ove lekcije (slike, inačica PHP-a, uklanjanje vanjske komponente, čišćenje baze podataka ili pravi cron). Izmjerite ponovno tri puta i zabilježite nove vrijednosti. Opišite što ste učinili i je li razlika veća od uobičajenog odstupanja između mjerenja.

Dodatno čitanje

Ovi članci opisuju korake u administracijama WebOké; u drugim administracijama rade na sličan način.

• DirectAdmin priručnik 14.1: Odabir PHP verzije (Select PHP version)
• DirectAdmin priručnik 12.7: Provjera, popravak i optimizacija baze podataka
• DirectAdmin priručnik 15.1: Cron Jobs: automatsko pokretanje zadataka
• Izrada cronjoba ili zadatka (i što učiniti ako se ne izvršava)
• DirectAdmin priručnik 17.4: X-Ray: otkrivanje sporih stranica
• Povezivanje WP-Crona sa sustavskim cronom (developer.wordpress.org, na engleskom): https://developer.wordpress.org/plugins/cron/hooking-wp-cron-into-the-system-task-scheduler/
• Lijeno učitavanje i LCP (web.dev, na engleskom): https://web.dev/articles/lcp-lazy-loading