TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

7 måter å optimalisere bilder i WordPress for å forbedre sidelasterhastigheten

1

Bilder er uunngåelig del av ethvert nettsted. Som det populære sitatet sier – "Et bilde er verdt tusen ord". Bilder er veldig nyttige for å uttrykke tankegangen, spesielt for opplæring, fotografering og hvordan du bruker nettsteder. Med summende sosiale medier er det nødvendig for deg å ha omtalt bilde for hvert enkelt innlegg for å dele det attraktivt. Nå kan spørsmålet dukke opp av tankene dine – jeg bruker mange bilder på WordPress -nettstedet mitt, og hvilken optimalisering bør jeg gjøre?

Det enkle svaret er at hvert bilde på siden din påvirker lastehastigheten som igjen påvirker brukeropplevelsen direkte. Ingen liker nettstedene for sakte lasting, og derfor må du behandle problemer med bildeoptimalisering med høyeste prioritet.

Hvordan kjenner jeg problemer med bildeoptimalisering?

Det er veldig enkelt, og det er mange gratis verktøy for å kontrollere sidehastigheten. Google har et eget PageSpeed ​​Insights -verktøy for å måle problemene på siden som påvirker lastehastigheten. Skriv inn sidens URL på verktøyet for å se resultatene som nedenfor:

7 måter å optimalisere bilder i WordPress for å forbedre sidelasterhastigheten

Optimaliser bilder i Google PageSpeed ​​Insights

Du bør se "Optimaliser bilder" som et topp prioritet når bildene ikke er komprimert. Bildekomprimering er et av hovedproblemene du vil se på Google PageSpeed ​​Insights -verktøyet. Men det er mange andre problemer du kan finne når du bruker verktøy som pingdom og GTmetrix som nedenfor.

  • Parallelliser nedlastinger på tvers av vertsnavn
  • Server statisk innhold fra cookie -mindre domene
  • Angi bildedimensjoner
  • Serve skalerte bilder

Alle disse problemene kan løses enkelt med plugins og ved å følge enkle retningslinjer.

Hvordan optimalisere bilder i WordPress for å forbedre sidelasthastigheten?

Her er sammendraget av optimaliseringsteknikker for å forbedre sideinnlastingshastigheten:

  1. Reduser antall bilder på serveren
  2. Bruk plugin for å komprimere bilder for å spare størrelse
  3. Vis bilder fra underdomenet
  4. Bruk riktig bildestørrelse
  5. Unngå å endre størrelsen på HTML / CSS
  6. Bruk vektorikoner der det er mulig
  7. Velg passende bildeformat

1 Reduser antall bilder

Hvert enkelt bilde på en side sender separat HTTP -forespørsel til serveren din og tar tid å laste ned. Ordtaket "Et bilde er verdt tusen ord" kan se bra ut, men i virkeligheten bruker du bare bilder når det er nødvendig. Færre bilder betyr færre serverforespørsler og rask lasting av side.

På den annen side opptar bilder plass på serveren din og øker verten. Spesielt WordPress genererer et stort antall miniatyrbilder avhengig av temaet og plugins som er installert. Sjekk artikkelen om hvordan du reduserer miniatyrbilder på WordPress -nettstedet.

2 Komprimer bilder for å lagre størrelse

Nettleseren må laste ned bildene fra serveren din når siden lastes inn. Å redusere hver KB -størrelse vil stole på ytelse; Sørg derfor for å vise bildene etter passende komprimering. For eksempel har bilder metadata som plassering, kameradetaljer, etc. Med mindre du eksplisitt trenger det, må du slette disse dataene ved hjelp av plugins for å redusere bildestørrelsen.

Bilder kan komprimeres på to måter – lossy og lossless. Med enkle ord er tapskomprimering en irreversibel måte og fjerner noen pixel data fra bildet. Og tapsfri komprimering er en reversibel måte som komprimerer bildet uten å fjerne piksler. Basert på bildeformatet (PNG / JPEG / GIF), kvalitet og komprimering som kreves, må du kanskje prøve med forskjellige plugins for å se hva som fungerer for deg.

Hvis du har få websider eller få bilder å optimalisere, anbefaler vi at du gjør det gjennom bildekomprimeringsverktøy. Nedenfor er noen av bildekomprimeringsverktøyene du kan bruke:

WordPress har mange gratis og premium bildekomprimeringsplugger. To slike populære plugins er- EWWW Image Optimizer og WP-Smushit. EWWW Image Optimizer har mange innstillinger og gjør komprimering på din egen hosting -server. Selv om WP-Smushit er enkelt og greit, komprimerer det bildene på en ekstern server. Når de er installert og aktivert, hjelper disse pluginene til å komprimere bilder automatisk når de lastes opp. Her er den komplette opplæringen om hvordan du bruker WP-Smushit-plugin.

7 måter å optimalisere bilder i WordPress for å forbedre sidelasterhastigheten

WP Smush WordPress Plugin

Husk at pluginene for bildekomprimering vil bruke høye serverressurser. Ikke komprimér hundrevis av bilder samtidig, noe som vil føre til brudd på vilkårene for hostingfirmaet ditt. Komprimer færre bilder med tilstrekkelig intervall for å unngå høy belastning på serveren.

3 Vis bilder fra underdomenet

Det anbefales å lagre bilder på eget underdomen. Dette vil bidra til å laste inn bildene parallelt med innholdet fra hoveddomenet. Innholdet på siden din vil lastes inn raskere siden bildene lastes fra et annet sted.

7 måter å optimalisere bilder i WordPress for å forbedre sidelasterhastigheten

Serverer innhold fra forskjellige servere

Sjekk ut artikkelen vår om hvordan du flytter WordPress -bildemappen til underdomenet.

4 Bruk riktig bildestørrelse

Forbered bildene nøyaktig med størrelsen på hvordan det vil vises på nettstedet. Når du trenger 600 × 350 bilder, må du ikke forberede størrelsen 1200 × 700. Nettleseren trenger lang tid for å laste ned større bildefiler på grunn av størrelsen. WP-Smushit plugin har også et alternativ for å angi maksimal størrelse for opplastede bilder. Dette vil bidra til å endre størrelsen på de opplastede bildene til maksgrensen og redusere bildestørrelsen.

5 Unngå å endre størrelsen på HTML / CSS

Folk bruker HTML og CSS til å endre størrelsen på bildet etter at det er lastet ned til nettleseren. Dette vil bare legge til litt mer tid i lasting, ettersom nettleseren trenger ekstra tid for å gjengi bildet til ønsket størrelse.

For eksempel er det ikke en god praksis å laste opp et bilde på 90 × 90 piksler og prøve å redusere størrelsen med HTML -koden nedenfor.

<img src="your image URL" height=45 width=45>

6 Bruk vektorikoner

De vanlige bildene (kalt rasterbilder) kommer i et annet format og gjengis ikke riktig når du zoomer til større dimensjoner. Den beste måten er å bruke SVG -skalerbare skriftikoner som fantastiske fantastiske ikoner i stedet for bilder. For eksempel bør ikonene på navigasjonsmenyen bruke SVG -skriftikon. Bruk av bilder for slike mindre ikoner vil ikke bare forvride utseendet, men også øke sidelastetiden. Nedenfor er et eksempel på bruk av skriftikon:

Jeg er et skriftikon, bruk meg i stedet for bilde.

Sørg for å aktivere GZIP -komprimeringserverhendelen for å redusere filstørrelsen på SVG -bilder og annet innhold.

7 Velg passende bildeformat

Det er tre universelt støttede bildeformater – GIF, PNG og JPEG. Hver og en har sine fordeler og ulemper.

  • Bruk GIF når du trenger animasjon
  • PNG kan brukes til bilder med høy oppløsning og høy kvalitet, for eksempel fotobilder. Men PNG -bilder vil være større i størrelse.
  • JPEG er mer egnet for vanlige skjermdumper og webbilder med lavere bildestørrelse og lavere kvalitet (sammenlignet med PNG).

Velg ønsket bildeformat og komprimere det med plugins før du serverer det til brukere.

Konklusjon

Når du starter et nettsted anbefaler vi å prøve flere kombinasjoner og sjekke hvilken som fungerer for deg. Hvis du har et nettsted som allerede kjører med et stort antall bilder, kan du bruke plugins for å komprimere alle eksisterende bilder. Bruk Google PageSpeed ​​Insight -verktøyet for å sjekke om “Optimaliser bilder" -problemet er fjernet og hastigheten på siden din er forbedret. Ved å følge alle de ovennevnte optimaliseringsteknikkene vil det bidra til å forbedre sidelastingspoengene drastisk til den grønne sonen.

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon