LiteSpeed Media instellingen tweaken

Lazy Load Images - OFF

Wanneer ingeschakeld, laadt deze instelling alleen de afbeeldingen die zichtbaar zijn in de viewport. De overige afbeeldingen worden alleen geladen als dat nodig is wanneer ze in beeld komen.

Hoe nuttig deze mogelijkheid ook is, het kan niet mooi zijn om de afbeeldingen zomaar plotseling te laten verschijnen. Je kunt dit verbeteren met CSS3, en de ladende afbeeldingen een fade-in (of ander) effect geven.

Je kan het onderstaande CSS proberen om een fade-in effect te creëren

/* PART 1 - Before Lazy Load */
img[data-lazyloaded]{
    opacity: 0;
}

/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
    -webkit-transition: opacity .5s linear 0.2s;
    -moz-transition: opacity .5s linear 0.2s;
    transition: opacity .5s linear 0.2s;
    opacity: 1;
}

De sleutel zit in de data-lazyloaded attribute selector, een methode om elementen te targeten op basis van hun gegeven attributen. Voordat een afbeelding 'lazy' wordt geladen, heeft deze het attribuut data="lazyloaded" dat eraan is gekoppeld, waardoor DEEL 1 van de CSS-code wordt ingeschakeld.

Zodra de afbeelding is geladen, verdwijnt dat kenmerk, is DEEL 1 niet langer relevant en wordt DEEL 2 van de CSS-code van kracht. Deze voorbeeld-CSS zorgt ervoor dat de afbeelding vervaagt, maar je kan de code vervangen door elk gewenst CSS-effect.

Basic Image Placeholder - Leeg

Wanneer Lazy Load Images is ingeschakeld, wordt een grijs vak weergegeven als tijdelijke aanduiding totdat een afbeelding kan worden geladen. Als je liever iets creatievers hebt, kun je je eigen base64-afbeelding specificeren. Je kunt de afbeelding hier weergeven, of je kunt de constante LITESPEED_PLACEHOLDER in je wp-config.php-bestand gebruiken. Als beide zijn gedefinieerd, heeft deze instelling voorrang op de constante wp-config.php.

Responsive Placeholder - OFF

Responsieve placeholders voor afbeeldingen kunnen worden gebruikt in gevallen waarin de breedte- en hoogtekenmerken voor de afbeeldingen zijn ingesteld. Deze placeholders worden gegenereerd met dezelfde afmetingen als de afbeeldingen, wat het herschikken van de lay-out helpt verminderen.

Responsive Placeholder SVG

Als je lokaal een tijdelijke aanduiding genereert, kan je een SVG opgeven die moet worden gebruikt, en deze wordt on-the-fly geconverteerd naar een tijdelijke aanduiding voor base64.

Variabelen {width} en {height} worden vervangen door de bijbehorende afbeeldingseigenschappen. Variabele {color} wordt vervangen door de geconfigureerde achtergrondkleur.

LQIP Cloud Generator - OFF

Low Quality Image Placeholder (LQIP) is een QUIC.cloud-service waarmee je een unieke tijdelijke aanduiding kan genereren, een vervaagde en verkleinde versie van de originele afbeelding van hoge kwaliteit die moet worden geladen.

LQIP Quality - 4

Specificeer de kwaliteit van jouw gegenereerde LQIP's. Grotere getallen zullen een hogere resolutie en plaatsaanduidingen van betere kwaliteit genereren, maar zullen resulteren in grotere bestanden, waardoor de paginagrootte zal toenemen. Waardebereik: 1 - 20.

LQIP Minimum Dimensions - 150 X 150

Met afbeeldingen die vrij klein zijn, zou het niet nodig moeten zijn om LQIP's te genereren. Geef de afmetingen (in pixels) op van de kleinste bestanden die je wilt verzenden voor LQIP-verzoeken. Beide zijden moeten kleiner zijn dan deze waarden om te worden uitgesloten van LQIP. Als de lengte of breedte de limiet overschrijdt, wordt de afbeelding verzonden. Geldige afmetingen kunnen groter zijn dan 10 pixels en kleiner dan 800.

Generate LQIP In Background - ON

De eerste keer dat een pagina wordt bezocht, moeten de LQIP's worden gegenereerd. Als deze instelling AAN staat, wordt het genereren op de achtergrond gedaan via een op cron gebaseerde wachtrij. De instellingen voor Responsive Placeholder blijven behouden totdat het genereren is voltooid.

Als deze instelling op UIT staat, worden de tijdelijke aanduidingen gegenereerd terwijl de bezoeker wacht. Dit kan het laden van de pagina vertragen voor die eerste bezoeker.

Als je afbeeldingen in de wachtrij hebt staan, zie je de knop LQIP Queue wissen. Je kan hierop drukken om alle bestaande items uit de wachtrij te verwijderen. Houd er rekening mee dat deze items niet door de LQIP-service worden verwerkt totdat ze weer aan de wachtrij zijn toegevoegd.

Lazy Load iframes - OFF

Deze instelling gedraagt zich precies als Lazy Load Images, alleen voor iframes in plaats van afbeeldingen.

Add Missing Sizes - OFF

Het instellen van een expliciete breedte en hoogte op jouw afbeeldingen is een goede gewoonte. Het vermindert de lay-outverschuiving, wat de gebruikerservaring en paginascore verbetert. Als deze optie is ingeschakeld, kan LSCache automatisch de breedte en hoogte toevoegen aan elke afbeelding waar de kenmerken ontbreken.

Deze optie werkt alleen wanneer de optie Lazy Load Images aan staat.