Kako ubrzati učitavanje slika na web mjestu WordPress

Tako želite da se vaše slike brže učitavaju?


Pa, neću polako dvostruko. Zaronimo pravo u dobre stvari!

Postoje tri načina za brže učitavanje slika u programu WordPress:

  • Promjena veličine
  • Oblog
  • Lijeno opterećenje

U ovom postu objasnit ću kako funkcionira svaka od ovih tehnika i zašto će se vaša web lokacija brže učitati. Također ću vam pokazati kako implementirati svaku taktiku s ručnim rješenjima i preporukama za dodatke.

Ova prva tehnika je krajnje jednostavna, ali WordPress novorođenčadi često previdi.

Kako optimizirati slike u programu WordPress

Promijenite veličinu slika

Apsolutni najjednostavniji način da se slike brže učitavaju jest njihova veličina. Dopustite mi da objasnim.

Što je mijenjanje veličine?

Kada kažem „promijenite veličinu“ mislim na promjenu dimenzija slike, a u ovom slučaju želite smanjiti dimenzije pretjerano velikih slika.

Kao primjer, blogeri ponekad fotografiraju na svojim telefonima ili digitalnom fotoaparatu i prenose ih na svoje blogove. Nerevidirane kopije fotografija mogle bi biti širine do 5000 px. Sad razmislite o ovome …

Širina odjeljka za objavu na vašoj web stranici vjerojatno nije veća od 800 px. Tekst koji trenutno čitate kreće se oko 700 px po stranici, pa zamislite da dodate sliku širine 5000 px. Bilo bi način veći nego što treba biti i premda bi bilo smanjeno podešavanje stranice da bi se stranica uklopila, učitana slikovna datoteka još uvijek je ogromna i izuzetno rasipna. I to je zato što …

Slike većih dimenzija imaju i veće datoteke.

Što se tiče performansi i bržeg učitavanja slika, smanjenje dimenzija slike izvrstan je način za drastično smanjenje veličine datoteke, a to ubrzava učitavanje slike.

Vratimo se mom primjeru i pretpostavimo da je slika široka i visoka 5.000 piksela. Ako ga smanjite s 5.000 px na samo 700px, slika bi zapravo koristila 99% manje piksela. Drugim riječima, veličina datoteke smanjila bi se za oko 99%. Ako je slika 5MB, završila bi samo 50kb i učitala bi se 99% brže na vašoj web lokaciji.

Promjena veličine slike

Ako niste htjeli pažljivo promijeniti veličinu slika, gotovo sigurno će se postići neki dobici.

Postoji nekoliko načina na koje možete promijeniti veličinu slika kako biste ih savršeno uklopili.

Ručno promijenite veličinu slika

Prije prijenosa nove slike na vaše web mjesto, ručno je promijenite veličinu pomoću ugrađenih alata za uređivanje slika na vašem računalu.

Ako imate izuzetno veliku sliku kao u mom primjeru, to će odmah napraviti veliku razliku. Nakon što veličinu slike promijenite, a zatim je možete prenijeti u svoju biblioteku medija.

Čak i ako ćete sliku upotrebljavati u okvira za svijetlost ili klizač, obično nema razloga da bude veća od 2000 px. Ako će se slika nalaziti u području posta ili stranice, vjerojatno možete dobro raditi ako je slika široka 800 px.

Ova metoda mijenjanja veličine slike djeluje u redu, ali ne pomaže slikama koje su već prenesene na vaše web mjesto. Jednostavna tehnika postojećih slika je jednostavno odabir druge veličine.

Koristite manje veličine

Kada prenesete sliku u svoju biblioteku medija, WordPress stvara do 3 dodatne verzije: sličica, srednja i velika.

Ako posjetite stranicu s postavkama medija, vidjet ćete da ovdje možete odabrati te veličine:

Postavke za WordPress medije

Iako možete mijenjati postavke, zadana velika veličina iznosi 1024px, što je dovoljno veliko da se može koristiti za objave bez previše trošenja. Ovu veličinu možete koristiti za sve slike koje uključite u svoje postove.

Da biste promijenili veličinu slike koju ste dodali u post, kliknite je u uređivaču i vidjet ćete padajući izbornik Veličina slike u desnoj bočnoj traci.

Promijenite veličinu slike WordPress-a

Odaberite veličinu “Velike” i ažurirajte post. Ako imate predimenzionirane slike, ova tehnika omogućit će vam da brzo poslužite prikladniju veličinu koja će se učitati brže, bez potrebe da se ponovo učita i zamijeni izvornik.

Rečeno je, ovo može biti užasno naporno ako imate desetke postova s ​​desecima slika. Na raspolaganju je još brža i učinkovitija metoda.

Automatsko mijenjanje veličine dodatkom

Umjesto da sami promijenite veličinu slika, dopustite da dodatak to učini automatski za vas. Kada je riječ o automatiziranom mijenjanju veličine slike, ništa se ne može nadmašiti Optimole uključiti.

Optimole Optimizer slike

Ne radi onako kako biste očekivali.

Umjesto da uređuje slike u svojoj biblioteci medija, Optimole čuva vlastite kopije slika i poslužuje ih s CD-a visokih performansi. Na taj način se originali nikada ni na koji način ne mijenjaju.

Nadalje, ne morate Optimoleu davati pojedinačnu veličinu za vaše slike. Umjesto toga, on dobiva veličinu zaslona posjetitelja i generira verziju optimalne veličine svake slike u letu. To znači da bi netko na mobilnom uređaju mogao učitati verziju slike od 400 px, dok drugi posjetitelj na prijenosnom računalu dobiva verziju iste slike od 700 px..

Ova metoda mijenjanja veličine lakše je implementirati i učinkovitija je za mobilne uređaje što je posebno važno jer mobilni posjetitelji često imaju sporije veze.

Ako želite naučiti kako koristiti Optimole, možete slijediti moj cijeli vodič kroz videozapis:

Prvo preporučujem promjenu veličine jer, radite li to ručno ili je automatizirate pomoću dodatka, to je jednostavno i može ponuditi ogromne dobitke.

Ako su vaše slike već odgovarajuće veličine za vašu web lokaciju, još uvijek možete poboljšati izvedbu vaše web lokacije sa kompresijom.

Stisnite slike

Kompresija je način za smanjenje veličine datoteke slike bez promjene njezinih dimenzija.

Dostupne su dvije vrste kompresije slike.

Prva vrsta kompresije slike naziva se kompresijom bez gubitaka.

Kompresija bez gubitaka

Uz optimizaciju bez gubitaka, slika se zapravo ne uređuje. Umjesto toga, ova tehnika uklanja sve metapodatke pohranjene u slikovnoj datoteci. Na primjer, slike često pohranjuju naziv uređaja za snimanje slike, datum snimanja fotografije, a ponekad čak i GPS koordinate snimanja..

Budući da su ti podaci obično prilično ograničeni, optimizacija bez gubitaka može samo smanjiti veličinu vaše slike za 1-5%, ali zaista nema razloga da ih ne upotrebite jer nema utjecaja na kvalitetu slike.

Pravi dobitak dolazi od optimizacije gubitaka.

Kompresija gubitaka

Kao što možete očekivati, kompresija gubitaka optimizira samu sliku i rezultira degradacijom kvalitete. Ali tu je stvar …

Algoritmi kompresije danas su toliko dobri da možete često smanjiti veličinu datoteke za 50-70% bez ikakvih razlika. Ako niste profesionalni fotograf i ne trebate da vaše slike budu savršeno jasne na 4k monitorima, nećete primijetiti ni gubitak kvalitete.

Kako komprimirati slike

Svoje slike možete ručno komprimirati pomoću alata poput TinyPNG prije nego što ih preuzmete, ili pomoću dodatka za automatiziranje stvari.

ShortPixel je izvrstan dodatak za optimizaciju slika na vašoj web lokaciji. Možete ih optimizirati odmah kad ih pošaljete i skupno optimizirati sve slike koje su već u vašoj medijskoj biblioteci.

shortpixel

Preporučio sam Optimole za promjenu veličine slike i on vrlo učinkovito komprimira slike. Još jednom ne optimizira originale pohranjene u vašoj biblioteci medija, nego komprimira kopije koje služi posjetiteljima..

Ovdje možete pronaći još nekoliko dodataka za optimizaciju slike.

Promijenite veličinu i komprimirane slike, web stranica će se učitati mnogo brže, ali postoji i zadnja optimizacija za slike koje možete napraviti.

Provesti lijeno punjenje

Lagano učitavanje je stvarno pametan način za dodatnu optimizaciju slika.

Recimo da imate blog blog s 12 slika u njemu. Kada netko posjeti vašu web stranicu, neće sve te slike biti vidljive odmah na njihovom zaslonu. Morat će se pomaknuti prema dolje da bi se većina njih pojavila. Pa zašto onda učitati svih 12?

Uz lijeno učitavanje, učitavaju se samo slike koje se pojavljuju na ekranu. Umjesto 12 slika učitavaju se možda samo 2-3 slike. Potom se posjetitelj pomiče po stranici, a preostale slike učitavaju se kad dođu na ekran. To znači da je početno učitavanje mnogo brže i budući da se većina posjetitelja neće pomicati sve dolje po stranici, puno se slika nikad ne učitava što vam štedi vrijedne resurse servera.

Ovaj videozapis ima vizualizaciju koja ga bolje objašnjava ako želite jasniju sliku kako djeluje lijeno učitavanje:

Sada kada ste prodani na konceptu, evo kako možete implementirati lijeno učitavanje na svojoj web lokaciji.

Kako se koristi lijeno učitavanje

Još jednom, ova tehnika optimizacije performansi lako se dodaje WordPressu pomoću dodatka.

Ako tražite besplatnu opciju, isprobajte Optimole ili a3 Lijeno opterećenje.

Uz Optimole, lijeno se učitavanje automatski uključuje, a dodatak a3 lako je konfigurirati.

Uz to, ako vam ne pada na pamet platiti se onda WP Raketa. Ima visoko performansno predmemoriranje i mnoštvo drugih alata za brzinu.

Da biste uključili lijeno punjenje s WP Rocketom, sve što morate učiniti je uključiti ovaj prekidač:

WP raketni mediji

Ne može biti lakše!

Uživajte u brzom učitavanju slika

Da rezimiram ono što ste upravo naučili …

Prevelike slike prenesene na vaše web mjesto izuzetno su sporo. Samo jedna od ovih slika može zaustaviti vašu web lokaciju vriskom.

Najvažnija stvar koju možete učiniti kako biste ubrzali svoje slike je promijeniti veličinu pretjerano velikih slika kako bi one bile odgovarajuće veličine za vaše web mjesto. To možete učiniti ručno ili automatizirati pomoću Optimole-a.

Zatim su algoritmi za kompresiju slike daleki put i ovih dana možete smanjiti veličinu slike za 50-70% bez utjecaja na kvalitetu. Ovo nije pametno. Upotrijebite ShortPixel ili Optimole za komprimiranje svake slike na vašoj web lokaciji.

I na kraju, lijeno učitavanje izvrstan je način za selektivno učitavanje slika. Možete koristiti Optimole, a3 Lazy Load ili WP Raketu da odmah implementirate lijeno učitavanje na svojoj web lokaciji..

Ako niste koristili nijednu od ovih tehnika, web stranica će se učitati dramatično brže kad se primijeni. Otpuhat će te.

Imate li pitanja o pojmovima i tehnikama u ovom postu? Imate li još jedan savjet za dijeljenje? Objavite u odjeljku s komentarima u nastavku!

Možda ti se također svidi,

Kako popraviti polako WordPress web mjesto i administrativnu ploču (trajno)

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map