35 prestatieoptimalisaties voor je WordPress-site
Een pagina die met Canvas is gebouwd, laadt alleen de CSS en JavaScript van de blokken die hij weergeeft, en niets meer. Daarbovenop komen 35 optimalisaties, elk met een schakelaar die je zelf bedient, met conservatieve standaardinstellingen en een duidelijke uitleg van wat ze doen.
Laatst bijgewerkt
Assets per blok laden
De meeste thema's bevatten één grote stylesheet en één groot script, en elke pagina betaalt voor elke functie in het thema. Canvas koppelt elk van zijn 314 blokken aan de CSS en JavaScript die dat blok nodig heeft, en laadt daarna alleen de combinatie van wat de pagina daadwerkelijk heeft weergegeven.
- Een prijspagina laadt het slider-script nooit
- Een pagina zonder formulier laadt nooit de formulierverwerker
- De editor laadt blokstijlen op dezelfde manier
- Niets om in te stellen en geen manier om het per ongeluk uit te schakelen
Vooraf vastgelegd, niet geraden
Elk blok verklaart zelf welke assets het nodig heeft. Het overzicht zit in het blok, dus er is geen centrale lijst die iemand kan vergeten bij te werken.
Werkt met core-blokken
Core-blokken en blokken van derden behouden hun eigen laadgedrag. Canvas bemoeit zich niet met hun assets en strijdt niet met WordPress om ze.
Sjablonen tellen ook mee
Headers, footers, paginatitels en sliders zijn ook blokken, dus een pagina die een eenvoudige header gebruikt, laadt de megamenucode niet.
Niets om te kopen
Conditioneel laden is geen premiumfunctie of add-on. Zo werkt de bibliotheek op elk abonnement en bij een verlopen licentie.
35 optimalisaties, gegroepeerd op wat ze aanpassen
Er zit geen magie achter en niets wordt verborgen. Elk onderdeel past op een specifieke, controleerbare manier de pagina aan die WordPress verstuurt.
Laden 7
Zorg dat CSS en JavaScript de eerste weergave niet blokkeren en laad de volgende pagina vroeg in.
- Laad niet-kritieke stijlbladen asynchroon
- Niet-kritieke JavaScript uitstellen
- JavaScript uitstellen tot de eerste interactie
- De grootste afbeelding boven de vouw vooraf laden
- Preconnect instellen voor de origins die de pagina gebruikt
- DNS-prefetch voor hosts van derden
- Speculatief laden, zodat de volgende pagina wordt opgehaald voordat erop wordt geklikt
Lettertypen 3
Tekst blijft leesbaar terwijl een webfont nog wordt geladen, en Google Fonts hoeft helemaal geen verzoek aan een externe partij te zijn.
- Voeg font-display swap toe aan je webfonts
- Lettertypen vooraf laden die het eerste scherm nodig heeft
- Lever Google-lettertypen vanaf je eigen server
Media 6
Afbeeldingen zijn het zwaarste onderdeel van de meeste pagina's en het makkelijkst om verkeerd aan te pakken.
- Lazy loading voor afbeeldingen onder de vouw
- Lazy loading voor iframes en embeds
- Stel de JPEG-kwaliteit in die WordPress genereert
- De maximale breedte van geüploade afbeeldingen beperken
- Beheer de responsieve afbeeldingsvarianten die WordPress aanmaakt
- Bepaal welke afbeeldingsformaten er überhaupt worden gegenereerd
Opschonen 8
WordPress levert functies mee waarvoor elke site betaalt en die weinig sites gebruiken.
- Querystrings verwijderen uit statische bestanden
- Emoji-scripts en -stijlen uitschakelen
- Schakel oEmbed-detectie en het embedscript uit
- Dashicons uitschakelen op de frontend
- XML-RPC uitschakelen
- RSS-feeds uitschakelen
- jQuery Migrate verwijderen
- Pingbacks naar je eigen site uitschakelen
Database 5
De beheerkant van een trage website: revisies, automatische opslagen en een heartbeat die nooit stopt.
- Beperk het aantal revisies dat een bericht bewaart
- Stel het interval voor automatisch opslaan in
- De admin-heartbeat beperken of uitschakelen
- Revisies, transients en spam uit de database opruimen
- De REST API beperken tot ingelogde gebruikers
WooCommerce 5
Een webwinkel laadt zijn scripts op elke pagina van de site, ook op de pagina's die niets verkopen.
- WooCommerce-JavaScript verwijderen op pagina's zonder winkelweergave
- Tracking van bestelattributie uitschakelen
- Stop het pollen van het cart fragments-script op elke pagina
- Verwijder de bibliotheek voor wachtwoordsterkte buiten accountpagina's
- Laad de meegeleverde Select2-bibliotheek niet buiten de checkout
Herschrijvingen door content delivery network 1
Laat je stylesheets, scripts, afbeeldingen en lettertypen verwijzen naar een CDN waarvoor je al betaalt, door hun adressen te herschrijven terwijl de pagina wordt weergegeven. Canvas verkoopt je geen CDN en stuurt je verkeer niet via onze eigen servers.
Dat zijn in totaal 35 schakelaars, en de vijf WooCommerce-schakelaars verschijnen alleen wanneer WooCommerce actief is. Meer over de winkelintegratie.
Elk ervan is een schakelaar en de standaardwaarden zijn terughoudend
Canvas schakelt in wat veilig is voor elke website en laat de rest aan jou over, met de reden direct naast elke instelling. De ene instelling die meestal geen goed idee is, zegt dat zelf in het paneel, precies waar je staat als je beslist.
SEO- en toegankelijkheidsbasis
Een pagina die snel laadt maar niet gelezen, gecrawld of met een toetsenbord bediend kan worden, is niet af. Dit alles zit in het thema zelf, bij elk abonnement, zonder dat iets achter een upgrade zit.
Metadata uit je content
Titels, beschrijvingen, social cards, canonieke URL's, robotsregels en een sitemap, allemaal afgeleid van de pagina zoals die wordt weergegeven. Je hoeft geen tweede kopie van je eigen content bij te houden.
16 schematypen
Organization, WebSite, WebPage, Person, breadcrumbs, Product, Brand, Offer, Review en rating, adres, geocoördinaten, openingstijden en sitezoekfunctie, uitgevoerd waar ze van toepassing zijn.
Semantische landmarks
Landmarks voor header, navigatie, hoofdinhoud en footer, een skiplink naar de inhoud, koppen die hun volgorde volgen en zichtbare focus op alles wat je kunt bereiken.
Menu's met toetsenbord
Menu's, megamenu's, zijpanelen en modals openen, verplaatsen en sluiten met het toetsenbord, en bewegingseffecten respecteren de instelling voor verminderde beweging van de bezoeker.
Toegankelijkheid, beveiliging en gegevensexport zijn nooit premiumfuncties. Ze blijven beschikbaar bij een verlopen licentie, omdat een website die niet meer bruikbaar is een ondersteuningsprobleem is, nooit een licentiebeslissing.
Hoe we dit verifiëren
Beweringen over snelheid en toegankelijkheid zijn makkelijk te doen en makkelijk te controleren. Wij controleren die van ons, en hier lees je hoe.
Pagina's worden vergeleken met hun ontwerpen in een echte browser
Elke demopagina wordt in een browser weergegeven en gemeten tegen het ontwerp waarop hij is gebaseerd: documenthoogte, sectiebreedtes, berekende afstanden en alles wat door JavaScript wordt aangestuurd, gemeten nadat het is uitgevoerd, nooit bij de eerste weergave.
Deze website wordt gecontroleerd op drie breedtes
Elke pagina hier is getest met axe-core op WCAG 2.1 A en AA bij 1440, 1024 en 390 pixels, naast de controles die axe niet uitvoert: één h1, koppen die nooit een niveau overslaan, de vier landmarks, een werkende skiplink, geen horizontale overflow, geen tekst kleiner dan 12 pixels, links die als gewone tekst herkenbaar zijn en tikdoelen van minstens 24 pixels.
Wat Canvas nodig heeft
WordPress
Canvas is gebouwd op de blokkeneditor, dus het vereist WordPress met de Site-editor. Versie 7.1 of nieuwer.
PHP
PHP 7.4 of nieuwer. Een actuele PHP-versie is de goedkoopste snelheidsverbetering die de meeste sites kunnen doorvoeren.
Getest tot en met
Canvas is getest op WordPress 7.1, en na elke WordPress-release volgt een update.
Over performance
Ook de vraag die we het vaakst krijgen, en daarom staan er op deze pagina geen scores.
Heb ik nog een caching-plugin nodig?
Waarschijnlijk wel, en dat is het eerlijke antwoord. Canvas regelt wat een thema en WordPress regelen: welke assets een pagina laadt, hoe lettertypen en afbeeldingen zich gedragen, en hoeveel werk de database doet. Paginacaching, objectcaching en edge-levering horen bij je host of een cachingplugin. Het zijn verschillende taken, dus beide draaien is de gebruikelijke opzet.
Breekt mijn website als ik deze opties aanzet?
Elke schakelaar is omkeerbaar, en de schakelaars die het meest kans hebben om met een andere plugin te conflicteren staan standaard uit. Elke schakelaar legt uit wat hij doet en wanneer je hem beter met rust kunt laten, en de instelling die echt riskant is, zegt dat in het paneel. Zet ze één voor één aan en laad de frontend na elke wijziging opnieuw.
Moet ik het laden van assets per blok instellen?
Nee, er is niets om op te zoeken of in te schakelen. Zo werkt de blokbibliotheek. Elk blok geeft aan welke CSS en JavaScript het nodig heeft, en de pagina laadt de samenvoeging van wat die blokken daadwerkelijk hebben weergegeven.
Worden de demo's geoptimaliseerd geleverd?
Bij een site-brede demo-import worden de Thema-opties van de demo overgenomen. De prestatieschakelaars horen daarbij, zodat een demo start met de instellingen waarmee hij is gebouwd en gecontroleerd. Je kunt ze daarna altijd wijzigen.
Waarom publiceert deze pagina geen snelheidsscores?
Omdat een score uit een synthetische test op onze hardware niets zegt over je hostingprovider, je plugins, je afbeeldingen of je bezoekers. Wat wij publiceren is precies wat elke optimalisatie doet, zodat je die zelf inschakelt en je eigen site meet op je eigen infrastructuur.
Een snelle website die je nog steeds kunt bewerken
Elk abonnement bevat dezelfde blokkenbibliotheek, dezelfde optimalisaties en hetzelfde voorwaardelijke laden van assets. Er is geen prestatieniveau.