Kuvien lataaminen nopeammin WordPress-sivustoosi

04.06.2020
WordPress 'Kuvien lataaminen nopeammin WordPress-sivustoosi
0 9 мин.

Joten haluat kuvien latautuvan nopeammin?


No, en halua hölynpölyä. Sukellaan suoraan hyviin juttuihin!

Kuvia ladataan nopeammin WordPressissä on kolme tapaa:

  • Resize
  • Puristaa
  • Laiska kuorma

Tässä viestissä selitän kuinka nämä tekniikat toimivat ja miksi ne tekevät sivustosi lataamisesta nopeamman. Esitän sinulle myös kuinka toteuttaa jokainen taktiikka sekä manuaalisilla ratkaisuilla että laajennussuosituksilla.

Tämä ensimmäinen tekniikka on erittäin yksinkertainen, mutta WordPressin aloittelijat huomaavat sen usein.

Kuvien optimointi WordPressissä

Muuta kuvien kokoa

Ehdoton yksinkertaisin tapa saada kuvat latautumaan nopeammin on muuttaa niiden kokoa. Anna minun selittää.

Mikä on koon muuttaminen?

Kun sanon ”koon muuttaminen”, tarkoitan kuvan mittojen muuttamista, ja tässä tapauksessa haluat pienentää liian suurten kuvien mittoja.

Esimerkiksi bloggaajat ottavat joskus valokuvia puhelimiinsa tai digitaalikameraan ja lähettävät ne blogeihinsa. Valokuvien muokkaamattomien kopioiden koko voi olla jopa 5000 kuvapistettä. Ajattele nyt tätä …

Sivustosi postiosuuden leveys ei todennäköisesti ole suurempi kuin 800 kuvapistettä. Nyt lukemasi teksti on sivulla vain noin 700 kuvapistettä, joten kuvitelkaa lisääväsi tähän 5 000 kuvapisteen kuva. Se olisi paljon suurempi kuin sen on oltava ja vaikka sen pienentäminen sopisi sivulle, ladattu kuvatiedosto on edelleen massiivinen ja erittäin tuhlaavainen. Ja se johtuu siitä, että …

Suuremmissa kuvissa on myös suurempi tiedostokoko.

Suorituskyvyn parantamiseksi ja kuvien lataamisen nopeuttamiseksi kuvan mittojen pienentäminen on hieno tapa vähentää tiedoston kokoa huomattavasti, ja tämä nopeuttaa kuvan lataamista.

Palataan takaisin esimerkkiini ja oletetaan, että kuva on 5000 kuvapistettä leveä ja korkea. Jos pienentaisit sen 5000 pikselistä vain 700 pikseliin, kuva käyttäisi tosiasiassa 99% vähemmän pikseliä. Toisin sanoen tiedoston koko pienenee noin 99%. Jos kuva oli 5mb, sen lopputulos olisi vain 50 kt ja se latautuisi 99% nopeammin sivustollesi.

Kuvien koon muuttaminen

Jos et ole tarkoittanut kuvasi koon muuttamista huolellisesti, saavutuksia on melkein varmasti.

Voit muuttaa kuvien kokoa muutamalla tavalla, jotta ne sopisivat sivustoon täydellisesti.

Kuvien koon muuttaminen manuaalisesti

Ennen kuin lähetät uuden kuvan sivustoosi, muuta sen koko manuaalisesti tietokoneesi sisäisillä kuvankäsittelytyökaluilla.

Jos sinulla on erittäin suuri kuva, kuten esimerkissäni, sillä on heti suuri ero. Kun kuvan koko on muutettu, voit ladata sen mediakirjastoon.

Vaikka aiot käyttää kuvaa valopöydässä tai liukusäätimessä, normaalisti ei ole mitään syytä, että se olisi suurempi kuin 2 000 kuvapistettä. Jos kuva tulee viestin tai sivun sisältöalueelle, voit todennäköisesti tehdä hyvin kuvan 800 leveyden leveyden avulla.

Tämä kuvien koon muuttamistapa toimii hyvin, mutta se ei auta sivustoosi jo ladattujen kuvien kanssa. Helppo tekniikka olemassa oleville kuville on yksinkertaisesti valita eri koko.

Käytä pienempiä kokoja

Kun lähetät kuvan mediakirjastoon, WordPress luo enintään 3 lisäversiota: pikkukuva, keskisuuri ja iso.

Jos vierailet media-asetusten sivulla, huomaat, että voit valita nämä koot täältä:

WordPress Media-asetukset

Vaikka voit muokata asetuksia, oletusarvoinen suuri koko on 1024 kuvapistettä, joka on riittävän suuri käytettäväksi viesteihin ilman liian hukkaa. Voit käyttää tätä kokoa kaikissa viesteihisi lisäämissä kuvissa.

Voit vaihtaa viestiin lisäämäsi kuvan koon napsauttamalla sitä editorissa. Näet oikeassa sivupalkissa avattavan kuvan koon..

WordPress-kuvan koon muuttaminen

Valitse suuri koko ja päivitä viesti. Jos sinulla on ylisuuria kuvia, tämä tekniikka antaa sinulle nopeasti palvella sopivamman koon, joka latautuu nopeammin joutumatta lataamaan ja korvaamaan alkuperäistä.

Se voi kuitenkin olla todella tylsiä, jos sinulla on kymmeniä viestejä, joissa on kymmeniä kuvia. Saatavilla on vieläkin nopeampi ja tehokkaampi menetelmä.

Automatisoitu koon muuttaminen laajennuksella

Kuvien koon muuttamisen sijaan voit antaa laajennuksen tehdä sen automaattisesti puolestasi. Automaattisen kuvan koon muuttamisen suhteen mikään ei ylitä Optimole kytkeä.

Optimole Image Optimizer

Se ei toimi odotetulla tavalla.

Mediakirjaston kuvien muokkaamisen sijasta Optimole pitää omat kopiot kuvista ja toimittaa ne korkean suorituskyvyn CDN-levyltä. Tällä tavalla alkuperäisiäsi ei koskaan muokata millään tavalla.

Lisäksi sinun ei tarvitse antaa Optimolelle yhden kokoista kuvaa käytettäväksi. Sen sijaan se saa vierailijan näytön koon ja tuottaa optimaalisen koon version kustakin lennossa olevasta kuvasta. Tämä tarkoittaa, että joku mobiililaitteesta saattaa ladata kuvan 400px-version, kun taas toinen kannettavan tietokoneen kävijä saa 700px-version samasta kuvasta.

Tämä koon muuttamismenetelmä on huomattavasti helpompi toteuttaa ja tehokkaampi mobiililaitteille, mikä on erityisen tärkeää, koska matkaviestinkävijät ovat yleensä hitaammissa yhteyksissä.

Jos haluat oppia käyttämään Optimolea, voit seurata koko esittelyvideoani:

Suosittelin ensin koon muuttamista, koska riippumatta siitä, teetkö sen manuaalisesti vai automatisoitko sen pluginilla, se on yksinkertainen ja voi tarjota suuria hyötyjä.

Jos kuvasi on jo sopivan kokoinen sivustollesi, voit silti parantaa sivustosi suorituskykyä paljon enemmän pakkaamalla.

Pakkaa kuviasi

Pakkaus on tapa pienentää kuvan tiedostokokoa muuttamatta sen kokoa.

Kuvien pakkaamista on saatavana kahta tyyppiä.

Ensimmäistä kuvan pakkaustapaa kutsutaan häviöttömäksi pakkaamiseksi.

Häviötön pakkaus

Häviötöntä optimointia itse kuvaa itse ei muokata. Pikemminkin tämä tekniikka poistaa kaikki kuvatiedostoon tallennetut metatiedot. Esimerkiksi kuviin tallennetaan usein kuvan ottamiseen käytetyn laitteen nimi, kuvan ottamispäivämäärä ja joskus jopa kuvan GPS-koordinaatit.

Koska nämä tiedot ovat yleensä melko rajallisia, häviötön optimointi saattaa pienentää kuvan kokoa vain 1–5%, mutta ei ole mitään syytä olla käyttämättä sitä, koska kuvan laatu ei vaikuta.

Todelliset voitot saadaan tappiollisesta optimoinnista.

Häviöllinen pakkaus

Kuten saatat odottaa, häviöllinen pakkaus optimoi kuvan itse ja johtaa laadun heikkenemiseen. Mutta tässä on asia …

Pakkausalgoritmit ovat niin hyviä nykyään, että voit usein pienentää kuvan tiedostokokoa 50–70% ilman havaittavissa olevia eroja. Ellet ole ammattivalokuvaaja ja tarvitset kuvasi olevan täydellisen teräviä 4 k: n näytöllä, et edes huomaa laadun heikkenemistä.

Kuvien pakkaaminen

Voit pakata kuvia manuaalisesti esimerkiksi työkalulla TinyPNG ennen kuin lataat ne tai käytät laajennusta asioiden automatisointiin.

ShortPixel on loistava laajennus sivustosi kuvien optimointiin. Se voi optimoida ne heti, kun lataat ne, ja joukko-optimoida kaikki kuvat, jotka ovat jo mediakirjastossa.

shortpixel

Suosittelin Optimole-kuvaa kuvan koon muuttamiseen ja se myös pakkaa kuvat erittäin tehokkaasti. Jälleen kerran, se ei optimoi mediakirjastoon tallennettuja alkuperäisiä, vaan pakkaa kopioita, joita se palvelee vierailijoillesi.

Täältä löydät muutama lisää kuvan optimointilaajennuksia.

Kuvien koon ja pakkaamisen myötä sivustosi latautuu paljon nopeammin, mutta kuville on viimeinen optimointi, jonka voit tehdä.

Suorita laiska lastaus

Laiska lataus on todella fiksu tapa optimoida kuviasi entisestään.

Oletetaan, että sinulla on blogi, jossa on 12 kuvaa. Kun joku vierailee sivustossasi, kaikki nämä kuvat eivät tule näkyviin heti näytöllä. Heidän on vieritettävä pidemmälle, jotta suurin osa heistä näkyisi. Joten miksi ladata kaikki 12 heti?

Kun laiska ladataan, vain näytölle ilmestyvät kuvat ladataan. Ladattavan 12 kuvan sijasta ehkä vain 2-3 ladataan sen sijaan. Sitten kun vierailija vierittää sivua alaspäin, jäljellä olevat kuvat ladataan, kun ne tulevat näytölle. Tämä tarkoittaa, että alkuperäinen lataus on paljon nopeampaa, ja koska suurin osa kävijöistä ei vieritä sivua alaspäin, paljon kuvia ei ladata koskaan, mikä säästää arvokkaita palvelinresursseja.

Tässä videossa on visualisointi, joka selittää sen paremmin, jos haluat selkeämmän kuvan siitä, kuinka laiska lataus toimii:

Nyt kun olet myyty konseptiin, tässä on esimerkki siitä, kuinka laiska lataaminen sivustollesi voidaan toteuttaa.

Kuinka käyttää laiskaa lastausta

Jälleen kerran tämä suorituskyvyn optimointitekniikka lisätään helposti WordPressiin laajennuksella.

Jos etsit ilmaista vaihtoehtoa, kokeile Optimole tai a3 Laiskakuormitus.

Optimolen kanssa laiska lataus kytkeytyy automaattisesti päälle, ja a3-laajennus on helppo määrittää.

Lisäksi, jos et halua maksaa, tarkista WP-raketti. Siinä on korkean suorituskyvyn välimuisti ja useita muita nopeustyökaluja.

Ota laiska lastaus käyttöön WP Rocketilla, sinun tarvitsee vain kääntää tämä kytkin:

WP Rocket Media

Se ei voisi olla helpompaa!

Nauti nopeammasta kuvien lataamisesta

Yhteenvetona juuri oppimastasi …

Sivustollesi ladatut ylisuuret kuvat ovat erittäin hitaita. Vain yksi näistä kuvista voi viedä sivustosi kriittiseen pysähtymiseen.

Tärkein asia, jonka voit nopeuttaa kuvasi, on pienentää liian suurten kuvien kokoa, jotta ne ovat sopiva koko sivustollesi. Voit tehdä tämän manuaalisesti tai automatisoida sen Optimolen avulla.

Seuraavaksi kuvanpakkausalgoritmit ovat edenneet pitkälle, ja nykyään voit pienentää kuvan tiedostokokoa 50–70% vaikuttamatta laatuun huomattavasti. Tämä ei ole brainer. Pakkaa jokainen sivustosi kuva ShortPixel- tai Optimole-sovelluksella.

Viimeiseksi laiska lataus on hieno tapa ladata valikoivasti kuvia. Voit käyttää Optimole-, a3 Lazy Load- tai WP Rocket -sovellusta heti laiskauksen lataamiseen sivustollesi.

Jos et ole käyttänyt mitään näistä tekniikoista, sivustosi latautuu dramaattisesti nopeammin käyttöönoton jälkeen. Se räjäyttää sinut.

Onko sinulla kysymyksiä tämän viestin käsitteistä ja tekniikoista? Onko sinulla toinen jaettava vinkki? Lähetä alla olevaan kommenttiosaan!

saatat pitää myös,

Kuinka korjata hidas WordPress -sivusto ja hallintapaneeli (pysyvästi)

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector