Sådan gør du billeder indlæses hurtigere på dit WordPress-sted

04.06.2020
WordPress 'Sådan gør du billeder indlæses hurtigere på dit WordPress-sted
0 10 мин.

Så du ønsker, at dine billeder skal indlæses hurtigere?


Jeg vil ikke nøje dally. Lad os dykke lige ind i de gode ting!

Der er tre måder at få billeder til at indlæse hurtigere i WordPress:

  • Resize
  • Komprimere
  • Lat belastning

I dette indlæg forklarer jeg, hvordan hver af disse teknikker fungerer, og hvorfor de får dit websted til at indlæses hurtigere. Jeg viser dig også, hvordan du implementerer hver taktik med både manuelle løsninger og plugin-anbefalinger.

Denne første teknik er ekstremt enkel, men ofte overses af WordPress newbies.

Sådan optimeres billeder i WordPress

Ændre størrelse på dine billeder

Den absolutte enkleste måde at få dine billeder til at indlæse hurtigere er at ændre størrelsen på dem. Lad mig forklare.

Hvad er størrelsen på størrelse?

Når jeg siger “ændre størrelse”, mener jeg at ændre dimensioner på et billede, og i dette tilfælde ønsker du at reducere dimensioner på alt for store billeder.

Som et eksempel tager bloggere undertiden fotografier på deres telefoner eller digitalkamera og uploader dem til deres blogs. De ikke-redigerede kopier af fotos kunne være så store som 5.000 pixels. Tænk nu på dette …

Bredden af ​​postsektionen på dit websted er sandsynligvis ikke bredere end 800 px. Teksten, du læser lige nu, spænder kun over 700 pixels på tværs af siden, så forestil dig at tilføje et billede, der er 5.000 pixels bredt her. Det ville være måde større end det skal være og selvom det ville blive nedskaleret for at passe til siden, er den indlæste billedfil stadig massiv og ekstremt spild. Og det er fordi …

Billeder, der har større dimensioner, har også større filstørrelser.

Når det kommer til ydeevne og få dine billeder til at indlæse hurtigere, er reduktion af dine billeddimensioner en fantastisk måde at reducere filstørrelsen drastisk, og det gør billedet indlæst hurtigere.

Lad os gå tilbage til mit eksempel og antage, at billedet er 5.000 pixels bredt og højt. Hvis du reducerede det fra 5.000 px ned til kun 700 px, ville billedet faktisk bruge 99% færre pixels. Med andre ord vil filstørrelsen formindskes med ca. 99%. Hvis billedet var 5 MB, ville det ende med kun 50 KB og det indlæses 99% hurtigere på dit websted.

Ændre størrelse på billeder

Hvis du ikke mener omhyggeligt at ændre størrelsen på dine billeder, er der næsten helt sikkert nogle gevinster, der skal opnås.

Der er nogle få måder, du kan ændre størrelse på dine billeder, så de passer perfekt til webstedet.

Ændr størrelsen på dine billeder manuelt

Før du uploader et nyt billede til dit websted, skal du ændre størrelsen på det manuelt ved hjælp af det indbyggede billedredigeringsværktøj på din computer.

Hvis du har et ekstremt stort billede som i mit eksempel, vil dette straks gøre en stor forskel. Når størrelsen på billedet er ændret, kan du uploade det til dit mediebibliotek.

Selv hvis du vil bruge billedet i en lightbox eller skyderen, er der normalt ingen grund til, at det er bredere end 2.000 pixels. Hvis billedet kommer til at være i et indholdsområde med indlæg eller side, kan du sandsynligvis klare det godt, når billedet er 800px bredt.

Denne metode til ændring af størrelse fungerer fint, men det hjælper ikke med billeder, der allerede er uploadet til dit websted. En nem teknik til eksisterende billeder er blot at vælge en anden størrelse.

Brug mindre størrelser

Når du uploader et billede til dit mediebibliotek, opretter WordPress op til 3 ekstra versioner: Miniaturebillede, Medium og Stor.

Hvis du besøger siden Medieindstillinger, ser du, at du kan vælge disse størrelser her:

WordPress Media-indstillinger

Mens du kan ændre indstillingerne, er standardstørrelsen Stor 1024px, som er stor nok til at bruges til indlæg uden at være for spild. Du kan bruge denne størrelse til alle billeder, du inkluderer i dine indlæg.

For at ændre størrelsen på et billede, du har tilføjet et indlæg, skal du klikke på det i redigeringsprogrammet, og du vil se rullelisten Billedstørrelse i højre sidebjælke.

Ændr størrelse på WordPress Image

Vælg “Stor” størrelse, og opdater indlægget. Hvis du har nogle store billeder, giver denne teknik dig mulighed for hurtigt at servere en mere passende størrelse, der vil indlæses hurtigere uden at skulle genoplades og erstatte originalen.

Når det er sagt, kan dette være forfærdeligt kedeligt, hvis du har snesevis af stillinger med snesevis af billeder. Der findes en endnu hurtigere og mere effektiv metode.

Automatisk ændring af størrelse med et plugin

I stedet for at ændre størrelsen på billederne selv, kan du lade et plugin gøre det automatisk for dig. Når det kommer til automatisk ændring af billedstørrelse, slår intet den Optimole plugin.

Optimole Image Optimizer

Det fungerer ikke som du kunne forvente.

I stedet for at redigere billederne i dit mediebibliotek, opbevarer Optimole sine egne kopier af dine billeder og serverer dem fra en højtydende CDN. På denne måde ændres dine originaler aldrig på nogen måde.

Desuden behøver du ikke give Optimole en enkelt størrelse, der skal bruges til dine billeder. Snarere får den størrelsen på den besøgende ‘s skærm og genererer en optimalt størrelse version af hvert billede undervejs. Det betyder, at nogen på en mobilenhed muligvis indlæser en 400px-version af et billede, mens en anden besøgende på en bærbar computer får en 700px-version af det samme billede.

Denne metode til ændring af størrelse er meget lettere at implementere og mere effektiv for mobile enheder, hvilket er især vigtigt, fordi mobile besøgende ofte har tendens til at være på langsommere forbindelser.

Hvis du vil lære at bruge Optimole, kan du følge min fulde walkthrough-video:

Jeg anbefalede at ændre størrelsen først, fordi uanset om du gør det manuelt eller automatiserer det med et plugin, det er enkelt og kan tilbyde store gevinster.

Hvis dine billeder allerede er passende størrelse til dit websted, kan du stadig forbedre dit websteds ydelse meget mere med komprimering.

Komprimere dine billeder

Komprimering er en måde at reducere filstørrelsen på et billede uden at ændre dens dimensioner.

Der er to typer billedkomprimering tilgængelig.

Den første type billedkomprimering kaldes “tabsfri” komprimering.

Tab uden komprimering

Med en tabsfri optimering redigeres selve billedet ikke. I stedet fjerner denne teknik alle metadata, der er gemt i billedfilen. For eksempel gemmer billeder ofte navnet på den enhed, der blev brugt til at tage billedet, den dato, hvor fotografiet blev taget, og nogle gange endda GPS-koordinaterne for billedet.

Da disse data normalt er temmelig begrænset, kan tabsfri optimering muligvis kun reducere størrelsen på dit billede med 1-5%, men der er virkelig ingen grund til ikke at bruge dem, fordi der ikke er nogen indflydelse på billedkvaliteten.

De reelle gevinster kommer fra tabt optimering.

Tabskompression

Som du kunne forvente, optimerer tabt komprimering selve billedet og resulterer i kvalitetsforringelse. Men her er ting …

Kompressionsalgoritmer er så gode i disse dage, at du ofte kan reducere filstørrelsen på billedet med 50-70% uden nogen tydelig forskel. Medmindre du er en professionel fotograf og har brug for dine billeder for at være perfekt skarpe på 4k-skærme, vil du ikke engang bemærke tabet af kvalitet.

Sådan komprimeres dine billeder

Du kan manuelt komprimere dine billeder med et værktøj som TinyPNG før du uploader dem, eller bruger et plugin til at automatisere ting.

ShortPixel er et fantastisk plugin til at optimere billederne på dit websted. Det kan optimere dem med det samme, når du uploader dem og bulkoptimerer alle de billeder, der allerede findes i dit mediebibliotek.

shortpixel

Jeg anbefalede Optimole til billedstørrelse, og det komprimerer også billeder meget effektivt. Endnu en gang optimerer det ikke originaler, der er gemt i dit mediebibliotek, men komprimerer snarere de kopier, det serverer til dine besøgende.

Du kan finde et par flere billedeoptimerings plugins her.

Når dine billeder er ændret til størrelse og komprimeret, indlæses dit websted meget hurtigere, men der er en sidste optimering til billeder, du kan lave.

Implementere doven belastning

Lazy loading er en rigtig smart måde at optimere dine billeder yderligere.

Lad os sige, at du har et blogindlæg med 12 billeder i det. Når nogen besøger dit websted, vil ikke alle disse billeder være synlige med det samme på deres skærm. De bliver nødt til at rulle længere ned for at de fleste af dem kan dukke op. Så hvorfor indlæse alle 12 med det samme?

Ved doven indlæsning indlæses kun de billeder, der vises på skærmen. I stedet for at der indlæses 12 billeder, indlæses måske kun 2-3 i stedet. Når den besøgende derefter ruller ned ad siden, indlæses de resterende billeder, når de kommer ind på skærmen. Dette betyder, at den indledende belastning er meget hurtigere, og da de fleste besøgende ikke ruller helt ned på siden, indlæses der aldrig mange af billederne, hvilket sparer dig værdifulde serverressourcer.

Denne video har visualisering, der forklarer den bedre, hvis du ønsker et klarere billede af, hvordan doven indlæsning fungerer:

Nu, hvor du er solgt til konceptet, kan du her implementere doven indlæsning på dit websted.

Sådan bruges doven ladning

Endnu en gang tilføjes denne ydelsesoptimeringsteknik let til WordPress med et plugin.

Hvis du leder efter en gratis mulighed, så prøv Optimole eller a3 Lazy Load.

Med Optimole tændes doven ladning automatisk, og a3-plugin er let at konfigurere.

Hvis du ikke har noget imod at betale, skal du tjekke ud WP-raket. Det har højtydende cache og en række andre hastighedsværktøjer.

For at tænde doven indlæsning med WP Rocket er alt hvad du skal gøre at dreje denne switch:

WP Rocket Media

Det kunne ikke være lettere!

Nyd dine hurtigere indlæsning af billeder

For at opsummere det, du lige har lært …

Meget store billeder uploadet til dit websted er ekstremt langsomme. Bare et af disse billeder kan stoppe dit websted.

Den vigtigste ting du kan gøre for at fremskynde dine billeder er at ændre størrelsen på alt for store billeder, så de er en passende størrelse til dit websted. Du kan gøre dette manuelt eller automatisere det med Optimole.

Dernæst er billedkomprimeringsalgoritmer nået langt, og i disse dage kan du reducere filstørrelsen på et billede med 50-70% uden at påvirke kvaliteten på en mærkbar måde. Dette er ingen hjerne. Brug ShortPixel eller Optimole til at komprimere hvert billede på dit websted.

Endelig er doven indlæsning en fantastisk måde at selektivt indlæse billeder på. Du kan bruge Optimole, a3 Lazy Load eller WP Rocket til øjeblikkeligt at implementere doven indlæsning på dit websted.

Hvis du ikke har brugt nogen af ​​disse teknikker, vil dit websted indlæses dramatisk hurtigere, når det er implementeret. Det sprænger dig væk.

Har du spørgsmål om koncepterne og teknikkerne i dette indlæg? Har du et andet tip at dele? Post i kommentarfeltet nedenfor!

Du vil måske også syntes om,

Sådan rettes et langsomt WordPress-sted og et administratorpanel (permanent)

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

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

    Adblock
    detector