Optimizacija brzine web stranice: Kako to učiniti u 2020. godini # Korak po korak

Optimizacija brzine web stranice: Kako to učiniti u 2020. godini # Korak po korak

Optimizacija brzine web stranice: Kako to učiniti u 2020. godini # Korak po korak
СОДЕРЖАНИЕ
02 июня 2020

Prije desetak godina, Google je objavio da će brzina web stranice utjecati na rangiranje web pretraživanja. Iako post nije pojasnio utjecaj brzine na ljestvici, webmasteri koji su čitali najavu shvatili su da bi optimizacija brzine web stranica trebala biti na vrhu njihovih razvojnih planova..


Pored toga SEO prednosti optimizacije brzine, vremena učitavanja stranice važna su za određivanje koliko korisnika ostaje na vašoj web stranici. HubSpot to izvještava pad pretvorbe povezan je s povećanjem vremena učitavanja stranica – kašnjenje u vremenu punjenja od jedne sekunde može dovesti do ~ 20-30% smanjenja pretvorbe!

Vodič za optimizaciju brzine web stranice

U posljednjih nekoliko godina, došlo je do povećanja prosječne veličine stranice. Zapravo, u 2018. godini, u prosjeku je veličina stranice bila veća od 2 MB! Značajan dio učitavanja ove stranice čine slike, statičke datoteke i videozapisi.

U najmanju ruku, veličina vaše web stranice i ukupna brzina web stranice su važni, puno! Čak i uz sve veće učitavanje stranica, postoje stvari koje možete učiniti kako biste poboljšali način na koji vaše web mjesto rukuje. U ovom postu se raspravlja o svemu.

Optimizacija brzine web stranice: što vam treba prije nego što započnemo

Ovaj post pretpostavlja da ste se pobrinuli za dvije ključne stvari:

  • Koristite optimiziranu temu koja ne unosi mnogo efekta na samu WordPress.
  • Vi ste dovoljno brz domaćin.

Ako označite ova dva okvira, nastavite prema sljedećim odjeljcima kako biste istražili opsežan popis zadataka koje možete poduzeti kako biste bili sigurni da su vremena učitavanja vaše web stranice minimalna..

Početak optimizacije brzine web stranice

Anatomija web stranice

anatomija

Trik za optimizaciju web stranica radi brzine je razumjeti što pretvara u web stranicu. Krenimo kroz najpopularnije komponente:

  • HTML kôd koji daje strukturu i sadržaj web stranici – čak i ako WordPress vodi zabavu na vašoj web lokaciji, sve što treba učiniti je uzeti ono što se nalazi u bazi podataka – sav sadržaj – i pretvoriti je u statički HTML izlaz
  • Statičke datoteke koje pomažu u dizajnu, funkcionalnosti i interaktivnosti (CSS, JavaScript)
  • Slike za pozadine, logotipe i sadržaj

Da bi prikazao stranicu, preglednik traži svaki element web stranice – samu stranicu u obliku HTML-a, statičkih datoteka, slika, vanjskog sadržaja. Dakle, broj HTTP zahtjeve također igra presudnu ulogu u optimizaciji brzine web stranice.

Otkrivanje na kojem se mjestu nalazite: alati za optimizaciju brzine web mjesta

Prije nego što prijeđemo na specifične tehnike koje vam pomažu u optimizaciji vaše web stranice, na trenutak ćemo pregledati alate koji pomažu u analizi brzine web stranica.

Ako ste početnik u potrazi za alatom za povremeni test, možete razmisliti o korištenju alate Pingdom paket za brzu ocjenu vašeg web mjesta. Za cjelovitije rješenje možete krenuti prema Googleova uvida u brzinu stranice.

Pingdom test brzinePingdom alati za brzinska ispitivanja

Osim onih, ako tražite brzu opciju u obliku dodatka za preglednik, možete pokušati YSlow, koji testira web stranice i daje prijedloge iz preglednika. Nadalje GTmetrix alat koristi YSlow rezultate ispitivanja za izvješća.

�� Ako želite više opcija za testiranje brzine vaše web stranice, ovaj je post popis 5 najboljih alata za provjeru brzine vani.

Prije nego što prođete kroz tehnike navedene u ovom postu, provjerite jeste li pokrenuli web mjesto na jednom od ovdje navedenih alata koji će poslužiti kao mjerilo. Čim izvršite bilo koju optimizaciju brzine web mjesta, obavezno se vratite na alat kako biste provjerili postoje li poboljšanja brzine.

Korak 1: Optimizirajte statičke datoteke

Prvi korak ovog vodiča fokusiran je na optimizaciju statičkih datoteka – najčešće u obliku tablice stilova (CSS datoteke) i skripte (JS datoteke).

(a) Pomaknite CSS prema glavi, JS prema dnu

Prva optimizacija za izvedbu jest osigurati da se tablice stilova nalaze u dijelu strukture stranice, dok su sve skripte premještene malo iznad završne oznake vaše stranice. Logika iza ovoga je jednostavna:

  • Općenito, tablice stilova su manje veličine od skripti
  • Nakon što se tablice stilova učitaju u oznaku prije nego što preglednik prikaže tijelo stranice, svi elementi koji se prikazuju na stranici imat će odgovarajući stil
  • Funkcionalnost skripti općenito dolazi u igru ​​nakon što se učita sadržaj stranice, tako da se skripte obično mogu postaviti na dno

Ovakva praksa osigurava da posjetitelji vaše web stranice ne ostave stranicu frustrirano dok čekaju da se učita.

Za brzo rješavanje dijela skripti možete instalirati dodatak Scripts to Footer za WordPress. Radi na autopilotu i posao obavlja dobro.


Skripte u podnožje Skripte u podnožje

Autor (i): Joshua David Nelson

Trenutna verzija: 0.6.4.1

Ažurirano: 15. travnja 2020

scripts-to-footerphp.0.6.4.1.zip


94% Ocjene


20,000 + instaliranja


3.1.0Requires

(b) postaviti minifikaciju

Minifikacija je postupak uklanjanja dijelova datoteke koji nisu potrebni za njegovo izvršavanje. Na primjer, u tablicama stilova ili skripti sljedeće nisu potrebne za izvršenje:

  • razmaci za ublažavanje
  • komentari
  • dugačke funkcije i imena varijabli
  • neiskorišteni kod

Minifikacija uvelike pomaže smanjenjem veličine vaših statičkih datoteka. Možete umanjiti datoteke pomoću usluge poput Umanjiti, ili instaliranje jednog od ovih dodaci za minifikaciju u WordPressu.

(c) Koristite asinkrono punjenje

Web preglednik prikazuje i zahtijeva resurse uzastopno kako se pojavljuju na web stranici. To se naziva sinhronim punjenjem. Međutim, možete promijeniti ovu zadanu funkcionalnost preglednika pomoću atribut async učitati resurse čim budu dostupni. Na primjer, skriptu možete učitati asinkrono na sljedeći način:

Ovdje je popis dodataka koji vam pomažu pri asinhronom učitavanju u WordPressu.

(d) Koristite GZIP kompresiju

GZip kompresija je tehnika komprimiranja resursa putem HTTP zahtjeva. Sa kompresijom GZip-a, poslužitelj šalje zip-datoteke s resursima koje preglednik raspakuje dok prikazuje web stranicu.

Vrijeme i resursi potrebni za komprimiranje i dekomprimiranje resursa nadmašuju vrijeme i širina pojasa spremljena u prijenosu manje datoteke s poslužitelja na klijenta. Ova tehnika ne samo da učitava stranice brže, već i štedi na troškovima poslužitelja.

GZip kompresija je dio nekoliko WordPress predmemorirajućih dodataka poput WP najbržeg predmemorije.

(e) Koristite Google CDN za popularne knjižnice

Posljednja tehnika optimizacije u ovom koraku je da biste koristili bilo Google ili Microsoft CDN prilikom dohvaćanja bilo koje zajedničke biblioteke koje se koriste na vašoj web lokaciji. Razlog je jednostavan – zbog popularnosti ovih CDN-ova vjerovatno je da je posjetitelj već spremio verziju resursa u svojem pregledniku..

2. korak: optimizirajte slike

Kao što je gore spomenuto, osnovni izvor povećanja veličine web stranica tijekom godina su slike.

Pogledajte čak i vlastite brojeve CodeinWP-a:

učitavanje slike

Stoga, rješavanje slika trebalo bi dovesti do najznačajnijih poboljšanja u brzini vaše web stranice, i čini se.

Slike su ključne za web mjesto, no upotreba slika pune kvalitete za web ne preporučuje se zaista. Slike biste trebali stisnuti u mjeri koja drastično smanjuje veličinu i istodobno daje popriličnu vizualnu kvalitetu.

Možete to učiniti nekoliko stvari i imati na umu optimizaciju brzine web stranice:

(a) Prenesite slike prave veličine

Vaša trenutna tema vjerojatno ima maksimalnu veličinu slike koju može prikazati – dimenzionalno. Otkrijte što je to i zatim prenesite samo slike koje su maksimalno dvostruko veće.

Zašto dvaput? Ovo će također omogućiti temi da prikaže verzije slika kvalitete mrežnice.

(b) Koristite ispravnu vrstu slike

Dvije najčešće korištene vrste slika na webu su JPG i PNG.

Nisu slični.

  • JPG slike namijenjene su fotografijama i drugim složenim slikama s puno boja u njima
  • PNG slike savršene su za grafiku koja ima malo informacija u boji, kao što su snimke zaslona sučelja.

Primjer PNG sliketeme

(c) Optimizirajte slike lokalno prije prijenosa

Postoje različiti alati koje možete koristiti prije prijenosa bilo kakvih slika na vaše web mjesto.

tinypng
imageoptim

(d) Lijeni učitajte svoje slike

Još jedna tehnika za optimizaciju slika je lijeno učitavanje, praksa u kojoj se slika ne preuzima dok se posjetitelj ne pomakne dolje da bi je vidio.

lazyload demoDemonstracija lijenog učitavanja na CodeinWP

Evo potpunog vodiča za lijeno učitavanje slika na vašoj web lokaciji.

(e) Nabavite dodatak za optimizaciju slike

Posljednje, ali ne najmanje bitno, trebali biste nabaviti kvalitetan dodatak za optimizaciju slike za svoju WordPress stranicu. Ovisno o tome koji ćete kraj koristiti, najveći dio potreba za optimizacijom slike možete obaviti na autopilotu.

Ovdje su 6 najboljih dodataka za optimizaciju slike u usporedbi.

Ako vam treba kratka preporuka, pogledajte našu vlastitu Optimole. Omogućuje visoko učinkovitu kompresiju slike, uz CDN u besplatnom planu! Optimole također daje neke zvjezdane rezultate kada se uspoređuje sa svojim glavnim konkurentima:

Rezultati optimizacije PNG-a

PluginOriginalni PNG Veličina nakon optimizacijeOptimizacija% kompresije
Optimole301 KB34 KB88,7%Gubitna i bez gubitka
Imagify301 KB67 KB77,7%gubljenje
TinyPNG301 KB79,7 KB73,5%gubljenje
ShortPixel301 KB90,4 KB69,96%gubljenje
Smush301 KB247 KB17,9%bez gubitaka
EWWW301 KB257,4 KB14,6%bez gubitaka

Rezultati optimizacije JPG-a

PluginOriginalni JPG Veličina nakon optimizacijeOptimizacija% kompresije
ShortPixel518 KB169 KB67,36%gubljenje
TinyPNG518 KB248,6 KB52%gubljenje
Optimole518 KB274 KB47%Gubitna i bez gubitka
Imagify518 KB338,7 KB34.64%gubljenje
EWWW518 KB488,9 KB5,7%bez gubitaka
Smush518 KB493 KB4,9%bez gubitaka


Optimizacija slike i lijeno učitavanje od Optimole Optimizacija slike & Lijeno opterećenje od Optimole

Autor (i): Optimole

Trenutna verzija: 2.3.1

Ažurirano: 21. travnja 2020

optimole-wp.zip


96% Ocjene


50.000 + instaliranja


WP 4.7 + Zahtijeva

Korak 3: Optimizirajte HTTP zahtjeve

Ranije u postu razgovarali smo o tome da kada korisnički preglednik počne učitavati web stranicu, stvarni prijenosi se vrše putem pojedinačnih HTTP zahtjeva. Jedan zahtjev dohvaća svaki resurs. Stoga, povećanje broja takvih zahtjeva povećava vrijeme učitavanja vaše web stranice.

zahtjeve za web mjestoHTTP zahtjevi web stranice

(a) Kombinirajte datoteke

Prvi zadatak za smanjenje opterećenja HTTP zahtjeva je kombiniranje sličnih resursa. Kad kombinirate resurse, možete kombinirati slične datoteke zajedno. Na primjer, sve tablice stilova (CSS datoteke) i sve prilagođene JavaScript datoteke mogu se kombinirati u jednu datoteku. To smanjuje broj zahtjeva koje klijent mora podnijeti da bi učitao sve resurse.

Opet ovi dodaci za minifikaciju za WordPress mogu vam pomoći da to učinite.

(b) Smanjite DNS pretraživanja

Kada se HTTP zahtjev postavi na domenu kao što je www.codeinwp.com, provodi se DNS (sustav naziva domena) radi pronalaženja IP adrese poslužitelja. Slijedom toga, vaš cilj bi trebao biti i minimiziranje broja DNS pretraživanja u svim zahtjevima, kako bi se ubrzalo učitavanje web mjesta.

Evo cool vodič Kinsta o tome kako to učiniti.

(c) Omogućite zadržavanje života

Bez ikakve optimizacije, preglednik šalje pojedinačni HTTP zahtjev za svaki resurs. Ova se veza prekida nakon završetka preuzimanja. Tada preglednik postavlja poslužitelju novi zahtjev za novim resursom. Zadržati živ je tehnika koja ne prekida zahtjev kada se završi preuzimanje resursa.

Omogućiti zadržavanje u životu na sljedeće načine:

(d) Smanjite preusmjeravanja

Preusmjeravanje je upute za automatsko premještanje klijenta s jedne lokacije na drugo mjesto resursa. Svako preusmjeravanje povećava vrijeme učitavanja vaše web stranice i ako nije apsolutno potrebno, trebali biste izbjeći preusmjeravanja u vašem kodu.

(e) Koristite CDN

CDN (mreža za isporuku sadržaja) je zbirka web poslužitelja prisutnih na ogromnim geografskim lokacijama koje brzo i učinkovito isporučuju sadržaj klijentima.

Klijentu koji traži resurs poslužit će se izvor s poslužitelja koji je geografski najbliži lokaciji klijenta. Ovo osigurava da zatraženi sadržaj stigne do klijenta u najkraćem mogućem roku!

Imamo zaseban resurs koji uspoređuje vrhunska CDN rješenja za WordPress web mjesta, zajedno s informacijama o tome kako se pogledati.

4. korak: Predmemoriranje

Nijedan vodič za optimizaciju brzine na web stranici ne može postojati bez odjeljka o predmemoriranju. Neke tehnike o kojima smo razgovarali ranije, poput GZip kompresije i minificaitona, dio su mnogih rješenja za predmemoriranje danas.

Predmemoriranje se odnosi na fenomen pohrane resursa u privremenu pohranu kako biste ga brzo pronašli kad je to potrebno. Postoje različiti oblici predmemoriranja:

  • Predmemoriranje stranice: statična HTML verzija stranice pohranjene na poslužitelju
  • Predmemoriranje baze podataka: rezultati uobičajenih upita baze podataka (poput prvih 10 postova na vašoj web lokaciji) pohranjeni na poslužitelju
  • Predmemoriranje preglednika: Spremanje dijelova stranice u preglednik

Usporedili smo najpopularnije dodatke za predmemoriranje WordPress-a u ovom postu. TL; DR: Idi WP Raketa ako tražite cjelovito rješenje. Ako želite nešto više besplatno, evo vodiča dalje kako konfigurirati W3 Total Cache.

5. korak: optimizirajte za mobilne uređaje

U ranijim dijelovima ovog članka razgovarali smo o tehnikama optimizacije koje su relevantne i za radne površine i za mobilne uređaje. Međutim, potrošnja sadržaja na mobilnim uređajima raste, a pojavljuju se i novi izazovi koje donosi manji ekran. Stoga ovaj odjeljak govori o metodama optimizacije brzine web stranica za mobilne uređaje.

Optimizacija za mobilne uređaje odnosi se na praksu osiguravanja da mobilni posjetitelji vaše web stranice dožive jednaku funkcionalnost i učinkovitost kao njihovi kolege sa stolnim računalima. Sljedeći popis sadrži određene higijenske čimbenike za uljepšavanje web sadržaja za mobilne uređaje:

  • Upotrijebite brzi web dizajn kako biste osigurali da različiti uređaji dobivaju različite verzije web stranice
  • Izbjegavajte upotrebu bljeskalica i skočnih prozora jer mobilni uređaji ga možda ne podržavaju
  • Ne postavljajte interakcije poput veza preblizu jedna drugoj

Uz ove čimbenike, AMP (Accelerated Mobile Pages) projekt je koji ima za cilj stvaranje brzog i konzistentnog sadržaja na svim uređajima.

Evo vodiča za početak rada s AMP-om u WordPressu.


AMP

Autor (i): Sudionici projekta u AMP-u


74% ocjene


500.000 + Instalira


WP 4.9 + Zahtijeva

Više informacija

amp.1.5.3.zip

Trenutačna verzija: 1.5.3

Ažurirano: 15. travnja 2020


74% ocjene


500.000 + Instalira


WP 4.9 + Zahtijeva

Stranica dodataka WordPress.org


AMP

Zaključak

Nadam se da vam je ovaj vodič dao nekoliko savjeta što biste trebali učiniti kako biste poboljšali opću razinu optimizacije brzine web stranice.

Samo da osvijestim; prvo smo pogledali anatomiju web stranice kako bismo se bavili određenim područjima koja treba poboljšati. Zatim smo prešli na određene korake za optimizaciju:

  • Prvi korak obuhvatio je optimizaciju statičkih datoteka u obliku tablica i skripti
  • Korak 2 bavio se slikama i njihovom optimizacijom
  • U 3. koraku radilo se o tehnikama za optimizaciju HTTP zahtjeva
  • U 4. koraku raspravljalo se o nekoliko popularnih tehnika predmemoriranja
  • Korak 5 obuhvatio je optimizaciju za mobilne uređaje

Postoji li nešto s čime se mučite kada je u pitanju optimizacija brzine web stranice? Javite nam se u komentarima u nastavku.

Ne zaboravite se pridružiti našem tečaju o ubrzanju ubrzanja stranice WordPress. Pomoću nekih jednostavnih ispravki možete smanjiti vrijeme učitavanja za čak 50-80%:

Izgled, prezentacija i montaža od strane Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector