Der findes mange forskellige tilgange til at implementere lazy loading på dit websted. Du er velkommen til at tage et kig på vores rangerede liste over de bedste plugins til WordPress, der understøtter langsom indlæsning.
Der findes adskillige gratis plugins i WordPress-biblioteket, der kan bruges til at indlæse billeder og videoer med lazy load. Efter at have overvejet et par dusin plugins og testet et par stykker, har vi fundet to plugins, der øger webstedets ydeevne betydeligt. Hvis du er ivrig efter at implementere lazy loading, kan du overveje mulighederne nedenfor.
Brug af WP Rocket (Premium)
WP Rocket er den mest ligefremme metode til at implementere langsom indlæsning på dit websted. Desuden tager processen med at aktivere det mindre end et minut. LazyLoad er navnet på det plugin, som WP Rocket inkluderer som sin version af lazy image loading.
Når LazyLoad er aktiveret, stopper WP Rocket øjeblikkeligt WordPress' indbyggede billedindlæsning for at forhindre eventuelle problemer.
Følg nedenstående trin for at aktivere WP Rockets LazyLoad-funktion: -
- Du kan aktivere LazyLoad ved at gå til Indstillinger > WP Rocket > Mediepanel i din WordPress-installation.
- Klik på "Aktiver for billeder" under LazyLoad-området øverst på skærmen.
- Klik på "Gem ændringer", når du har foretaget dit valg.
Det er alt andet, der skal gøres. Som følge heraf vil besøgende opleve langsom indlæsning af billeder.
LazyLoad tilbyder lazy loading til yderligere HTML-elementer, såsom iframes og videoer, i modsætning til den native tilgang, som WordPress tilbyder. Derudover vil den bruge lazy loading til baggrundsbilleder, hvis sådanne billeder anvendes inline til specifikke HTML-komponenter.
Hvis du ønsker at bruge WordPress' native lazy-loading-funktionalitet for billeder, kan du deaktivere LazyLoad-indstillingen i WP Rocket. På den anden side understøttes den nye indlæsningsfunktion ikke af alle browsere endnu. Derudover fokuserer installationen af WordPress kun på billeder. Derfor er WP Rockets LazyLoad stadig det bedste alternativ, især hvis dit websted har mange billeder, videoer og indlejringer.
Ting at være opmærksom på, når du aktiverer WP Rockets Native Lazy Loading
Selvom WP Rocket ikke inkluderer automatisk kompatibilitet med Chrome-browsere, der bruger native lazy loading, har du stadig mulighed for at vælge understøttelse af Chromes native lazy loading ved at aktivere det via et hjælpeplugin. Ligeledes er det tilfældet, selvom WP Rocket ikke inkluderer automatisk kompatibilitet med andre browsere, der bruger native lazy loading.
Du kan sikre følgende ved at bruge dette nyttige plugin:
- Hvert eneste af dine billeder vil indeholde den essentielle HTML-syntaks til at bruge native lazy loading; browsere, der er kompatible med Chrome, vil automatisk bruge native lazy loading; alle andre browsere vil automatisk bruge WP Rockets LazyLoad.
- Du har mulighed for at fortsætte med at bruge vores robuste LazyLoad-teknologi eller skifte til Chromes indbyggede funktion til lazy loading.
Det er helt op til dig! Først skal du afprøve begge metoder på din lokation, og vælge den, der fungerer bedst for dig.
Brug af a3 Lazy Load (gratis)
Hvis du leder efter en gratis løsning, anbefaler vi at bruge a3 L az y Load- pluginnet. Du kan deaktivere lazy loading for bestemte billeder og sider ved hjælp af a3-pluginnet. Derudover tillader det forsinket indlæsning af videoer på dit websted :
Derudover hjælper dette plugin med langsom indlæsning af eksterne billeder og videoer. WordPress' kerneimplementering udfører ikke en sådan handling.
Du kan installere og aktivere dette plugin fra dit WordPress-dashboard. Nu kan du tilpasse værktøjets indstillinger.
Trin 2: Juster plugin-billedeindstillingerne
Gå derefter til Indstillinger > a3 Lazy Load. Hvis du kigger under Lazy Load Activation, aktiveres plugin'et som standard efter installationen.
Åbn nu fanen LazyLoad-billeder. Du kan (1) vælge, hvilke hjemmesidebilleder der skal forsinkes, og (2) give et alternativ til webbrowsere, der nægter at acceptere JavaScript. For billeder, som du ikke vil forsinke indlæsningen af, kan du (3) indstille en CSS-klasse:
Standardindstillingerne har alle muligheder aktiveret . Vi anbefaler kraftigt, at du beholder denne indstilling. Opret en CSS-klasse, der giver dig mulighed for at springe udskudt indlæsning af bestemte billeder over.
Trin 3: Juster plugin-videoindstillingerne
Fanen Lazy Load-videoer og iframes er det næste trin. Med a3 Lazy Load kan du vælge forsinket indlæsning af bestemte klip, ligesom du kan med billeder.
Plugin'et tillader videoer i (1) indhold og widgets og tilbyder (2) en reservefunktion til browsere, der ikke understøtter JavaScript:
Du kan angive en CSS-klasse i videoindstillingerne (3) for at udelukke bestemte videoer fra udskudt indlæsning. Hvis du ønsker en mere ligetil konfiguration, skal du bruge den samme klasse, som du valgte i billedsektionen.
Flere Lazy Loading-plugins til WordPress
Udover WP rocket & a3 Lazy Load findes der flere nyttige plugins til lazy load, som du kan overveje:
- Lazy Load til videoer
- BJ Doven Indlæsning
- Indlæs flere produkter til WooCommerce
- WordPress Infinite Scroll – Ajax Indlæs mere
- Disqus betinget belastning
- Lazy Load for kommentarer
Afsluttende tanker
Det er afgørende at være opmærksom på potentielle konflikter, når du opdaterer eller ændrer dit websted. Tjek denne liste over hyppige problemer forbundet med lazy load, hvis du opdager, at lazy loading har forårsaget, at et aspekt af dit websted ikke fungerer korrekt.
Det er muligt, at der kan være inkompatibiliteter som følge af, at lazy loading-funktionen ikke anvendes på billeder, der uploades af plugins som Revolution Slider og Envira Gallery. Hele listen over kompatible plugins kan findes her.
Denne artikel, såvel som mange andre, kan findes på Seahawk Media Blog .
