Cloudways heeft enkele grote wijzigingen aangebracht in Breeze, dus de tutorial van vandaag gaat over het instellen van Cloudways Breeze . Deze plug-in wordt steeds beter en heeft nu JavaScript-vertraging, hartslagcontrole, vooraf geladen lettertypen en prefetch. Het heeft slechts een beoordeling van 3,8/5 sterren, maar ik hoop dat ze nieuwe functies blijven toevoegen en de app stabieler maken.
De meeste Breeze-instellingen zijn vergelijkbaar met wat je in andere cache-plug-ins vindt, zoals WP Rocket en FlyingPress, dus het instellen van Breeze en het testen van je TTFB en laadtijd zou slechts een paar minuten moeten duren. Cloudways heeft ook een Breeze-tutorial, maar die voegt niet veel toe aan wat er al in de plug-in zit. Installeer gewoon de plug-in en volg de tutorial om het beter te begrijpen.
Basis opties
Schakel het cachesysteem in, want u wilt natuurlijk dat uw cache-plug-in caching ondersteunt.
Stel Cache wissen na in op 1440. Dit is de levensduur van de cache, die is ingesteld op één dag. U kunt dit aantal wijzigen als uw CPU veel wordt gebruikt of als u niet vaak inhoud plaatst.
Maak geweldige websites
Met de beste gratis paginabuilder Elementor
Begin nuSchakel de Gzip-compressie in om de grootte van HTML, CSS en JS te verkleinen door de inhoud te comprimeren.
Houd de browsercache aan zodat de browser bepaalde bestanden kan opslaan door verlopen headers toe te voegen.
Behoud de optie Lazy Load Images. Op welke instellingen je iframes moet lui laden en de functie lui laden van de browser zelf moet gebruiken. Ik zou persoonlijk Cloudflare Enterprise gebruiken voor beeldoptimalisatie (niet Breeze), dat wordt geleverd met Mirage + Polish. Breeze heeft geen opties om te voorkomen dat afbeeldingen lui worden geladen naar afbeeldingen die lui worden geladen op de achtergrond, of om YouTube-iframes te vervangen door voorbeeldafbeeldingen. Er is ook geen manier om afbeeldingen vooraf te laden, ontbrekende afbeeldingsafmetingen toe te voegen, WebP te gebruiken of het formaat van afbeeldingen voor mobiel te wijzigen. Gebruik in plaats daarvan een Content Delivery Network (CDN) of een plug-in voor beeldoptimalisatie.
Houd Cross-origin Safe Links ingeschakeld zodat het "noopener noreferrer" kan toevoegen aan externe links. Dit verbetert de beveiliging door de toegang tot de website waar de link zich bevindt te blokkeren (noopener) of door verwijzingsinformatie te verbergen (noreferrer). Deze mogen uw SEO- of gelieerde links niet schaden.
Schakel Ingelogde gebruikers in cache uit. De meeste sites hoeven ingelogde gebruikers niet in de cache op te slaan, tenzij u een lidmaatschapssite of iets dergelijks beheert, in welk geval u de rollen zou selecteren.
Bestand optimalisatie
U moet deze instellingen testen om te zien of ze uw site kapot maken of belangrijker maken op internet. Als een verkleiningsinstelling uw site kapot maakt, is het beter om de kapotte bestanden in uw broncode te vinden en te voorkomen dat ze worden verkleind, zodat de rest van uw bestanden dat wel kunnen.
HTML-instellingen
Houd de HTML-verkleiningsoptie AAN zodat deze de HTML-bestandsgrootte kan verkleinen door witruimte en opmerkingen uit te zenden.
CSS-instellingen
De optie CSS Minify moet zijn ingeschakeld, zodat de plug-in witruimte en opmerkingen uit CSS-bestanden kan verwijderen om ze kleiner te maken.
Het lettertype moet ook zichtbaar blijven tijdens het laden. U kunt de PSI-aanbeveling corrigeren om ervoor te zorgen dat tekst zichtbaar blijft terwijl een weblettertype wordt geladen door font-display: swap toe te voegen aan de CSS van uw lettertype. Dit vertelt uw computer om een fallback-lettertype te laden terwijl uw normale lettertype wordt geladen. Dit stopt FOIT (flits van onzichtbare tekst) maar veroorzaakt FOUC (flits van onleesbare tekst) (flits van ongestijlde inhoud). Het is een keuze, dus probeer ze allebei.
Schakel de Inclusief Inline CSS-opties in, die ook de inline CSS verkleinen (CSS in uw HTML-bestanden in tegenstelling tot externe CSS). Het kan soms uw site kapot maken, dus wees voorzichtig wanneer u deze instelling test.
Schakel CSS combineren uit, want volgens WP Johnny zouden alleen sites met kleine CSS/JS-bestanden deze moeten combineren, terwijl grotere sites dat niet zouden moeten doen. Controleer de grootte van uw CSS en JS in de GTmetrix Waterfall-grafiek.
Gebruik de optie CSS uitsluiten. Er kunnen enkele bestanden zijn die problemen veroorzaken. Zoek die bestanden in uw broncode en voeg ze toe aan de lijst om te voorkomen dat ze worden verkleind of gecombineerd.
JS-instellingen
Wanneer u JS Minify inschakelt, wordt de grootte van JS-bestanden verkleind door witruimte en opmerkingen te verwijderen.
Maak een einde aan Combine JS. Het is hetzelfde idee als het samenvoegen van CSS en JavaScript. Nogmaals, controleer uw GTmetrix Waterfall-diagram en combineer alleen wanneer de grootte van uw JavaScript-bestanden erg klein is.
Schakel Inclusief Inline JS niet uit. Het is hetzelfde idee als het inline opnemen van CSS, maar dan voor JS-bestanden.
JS uitsluiten wordt op dezelfde manier gebruikt als CSS uitsluiten. Als JS-instellingen problemen veroorzaken, zoek dan de bestanden die ze veroorzaken en verwijder ze.
Bij het verplaatsen van JS-bestanden naar voettekst laden veel thema's en plug-ins al JavaScript-bestanden in de voettekst. Als u echter JS-bestanden hebt die niet in de voettekst maar in de koptekst worden geladen, kunt u ze hier toevoegen (verkleinde bestanden worden niet ondersteund). Het kan uw site gemakkelijk breken, dus wees voorzichtig.
Kies deze. JS-bestanden met uitgesteld laden alleen als het uitstellen van JavaScript het PSI-item met render-blokkerende bronnen kan repareren. Dit is een goede plek om te leren welke JavaScript-bestanden u moet uitstellen. Maar elk JavaScript-bestand dat niet nodig is om de pagina te laden, moet tot later worden uitgesteld. Probeer Autoptimize als u JavaScript-bestanden niet handmatig aan Breeze wilt toevoegen.
Houd Delay JS Inline Scripts Aan omdat het inline JavaScript vertraagt totdat de gebruiker ermee communiceert. Bekijk mijn lijst met veelgebruikte JS-bestanden om uit te stellen (u voert de trefwoorden in, niet de volledige bestanden). Veel JS van derden, zoals AdSense, Analytics, Facebook Pixel en opmerkingen, wordt onder de vouw geladen.
Voorladen
Preload Webfont - Onder "preload key requests" kan PSI u vertellen welke fonts u vooraf moet laden, maar als algemene regel geldt dat u alleen fonts moet preloaden die in het CSS-bestand staan of boven de vouw worden geladen. Het kan ook worden gebruikt om CSS-bestanden vooraf te laden, maar als u dat doet, wees dan voorzichtig en test de resultaten.
Koppelingen vooraf laden - Schakel dit niet uit. Wanneer een gebruiker met de muis over een link beweegt, wordt die pagina op de achtergrond geladen. Wanneer de gebruiker op de link klikt, ziet de pagina eruit alsof deze meteen is geladen. Maar als veel van uw bezoekers over veel links zweven, kan dit ervoor zorgen dat uw CPU harder werkt.
Prefetch van DNS-verzoek - Bekijk het PSI-rapport voor "Verminder de impact van code van derden." Kopieer de URL's van alle domeinen van derden die op uw website worden geladen en plak ze hier. U moet echter preconnect gebruiken voor Google Fonts + CDN-URL's. Dit helpt browsers om domeinen van derden iets sneller te voorspellen en te laden, maar het web zal er in het algemeen waarschijnlijk niet beter van worden.
Geavanceerde opties
Meestal wordt Never Cache URL gebruikt om URL's uit de cache te houden (voornamelijk voor WooCommerce-sites of vergelijkbaar). Als je ze hier uitsluit, zegt Cloudways dat je ze ook moet uitsluiten van Varnish door naar Application Settings > Varnish Settings > Add New Exclusion te gaan.
Cache Query Strings om string-URL's in een cache op te slaan. Breeze slaat standaard geen zoekstrings (URL's die er zo uitzien:?model=mercedes) op in de cache. Als je ze in een cache moet opslaan, voeg ze dan hier toe.
Schakel 'Emoji uitschakelen' in, waarmee een klein JS-bestand wordt verwijderd (als u emoji's wilt gebruiken, gebruikt u gewoon Unicode).
Heartbeat-API
Schakel de Control Heartbeat niet uit. Als u naar uw Cloudways-analyses kijkt (onder Application > Monitoring), ziet u mogelijk dat admin-ajax te veel verzoeken ontvangt. Als u de Heartbeat-API uitschakelt of beperkt, nemen deze verzoeken en het CPU-gebruik af. Ook al is het het beste om het volledig uit te schakelen, zorg ervoor dat je akkoord gaat met het uitschakelen van real-time plug-inmeldingen, om te zien wanneer andere gebruikers berichten bewerken en andere Heartbeat API-functies.
Schakel de Heartbeat Front-end uit, aangezien de meeste sites deze hier niet nodig zouden moeten hebben.
Wat betreft Heartbeat Post Editor, het slaat automatisch elke 5 minuten op. Als u autosaves wilt, kunt u hier een limiet instellen.
Schakel Heartbeat ook uit in de backend, aangezien u het daar niet zou moeten gebruiken.
Database-opties
Afgezien van het schoonmaken na de revisies, zou ik al het andere doen. De mogelijkheid hebben om een bepaald aantal postrevisies te bewaren (bijvoorbeeld 5, zodat je back-ups hebt) en regelmatig geplande database-opruimingen zouden erg nuttig zijn. WP-Optimize moet, net als andere cache-plug-ins, af en toe worden geïnstalleerd om uw database grondiger op te schonen. Op deze manier kunt u bepalen welke plug-ins of modules de database het meest onnodig belasten en eventuele achtergebleven tabellen verwijderen. Noch Breeze, noch enige andere cache-add-on doet dit.
CDN
Schakel CDN-activering alleen in als u geen gebruik maakt van de CDN-services van Cloudflare. Net als Gijo Varghese vertrouw ik op Cloudflare en BunnyCDN (zie zijn Facebook-bericht hieronder). Sla deze stap over als u geen gebruik maakt van een content delivery network (CDN) waarvoor een CDN-URL vereist is.
Als uw content delivery network (CDN) een aangepaste CNAME gebruikt, voert u deze hier in. U kunt het aantal aangeboden items vergroten door naast de BunnyCDN-plug-in ook de CDN-URL toe te voegen aan uw cache-plug-in.
Als het gaat om het aanbieden van materiaal van een CDN, zijn de standaardmappen wp-includes en wp-content, maar u kunt meer toevoegen door te specificeren welke mappen u moet bedienen.
Houd dit zoals het is; normaal gesproken wilt u dat alle statische bestanden worden geleverd door het CDN.
Schakel dit niet uit als u een relatieve pad-URL wilt gebruiken (de volledige URL van uw website).
Vernis
Indien ingeschakeld, zal "Auto Purge Varnish" de lak onzichtbaar reinigen (Cloudways zegt om het in te schakelen).
Varnish Server geeft het IP-adres van uw Varnish-server aan, dat automatisch wordt toegevoegd.
Als je wijzigingen hebt aangebracht in het ontwerp of andere aspecten van de site en deze nog niet hebt gezien, probeer dan de Varnish Cache te wissen.
Laatste gedachten
Cloudways is geweldig, en ik heb Vultr High Frequency een tijdje gebruikt voordat ik overstapte naar Breeze (nadat ik van SiteGround was verhuisd). Ik denk dat Cloudways een aantrekkelijkere host zou kunnen zijn als er meer aandacht zou worden besteed aan de Breeze-plug-in.
