WordPress-sites te versnellen en te optimaliseren

Sep 13, 2025
Procedures
Speed up and optimise WordPress
(Afbeelding Credit: Web Designer)

WordPress begon als een eenvoudig blogplatform, maar evolueerde in het contentbeheersysteem dat nu een groot percentage websites bevoegd is. Zoals de meest populaire CMS, is het snelle succes waarschijnlijk tot aan het is een fantastisch hulpmiddel voor algemene doeleinden in de Web Development World.

Een lage barrière voor binnenkomst en groot ecosysteem van plug-ins en Gratis WordPress-thema's Laat minder technisch bekwame gebruikers complexe systemen opbouwen. Maar dit kan een tweesnijdend zwaard zijn als een WordPress-website tractie krijgt, die verder gaat dan af en toe een bezoeker en leidt tot problemen.

Niet zeker over WordPress? Bekijk andere opties met onze lijst met top web hosting providers. En als u gemakkelijk een site wilt ontwerpen, probeer dan deze briljant Website-bouwers ​

De eerste tekenen van problemen verschijnen wanneer een nieuwe gebruiker op de website landt: laadtijden kunnen ondraaglijk zijn en elementen springen rond de pagina als afzonderlijke stylesheets, één voor één. Het is niet lang voordat de server onvoldoende geheugen heeft, waardoor de database crasht, waardoor een server opnieuw is opgestart om de website weer te geven.

Standaard, wanneer een gebruiker landt op een pagina die wordt geleverd door een WordPress-website, loopt het achterste uiteinde door het thema en eventuele plug-ins voordat u de pagina weergeeft. Als veel plug-ins worden gebruikt of het thema slecht geschreven is, kan dit resulteren in langdurige databasequery's en opname van JavaScript en CSS waar het niet nodig is.

Gelukkig kunnen veel van de belangrijkste kwesties die langzame snelheid veroorzaken, en in deze tutorial zullen we kijken hoe u zelfs de clunkiest van kunt optimaliseren WordPress-websites ​Om je vaardigheden verder te stimuleren, kijk dan eens naar onze roundup van WordPress-tutorials proberen.

01. Test de huidige snelheid

De eerste stap in het versnellen van een website is om erachter te komen hoe goed het optreden om mee te beginnen. Er bestaat een scala aan gereedschap om hiermee te helpen, inclusief Google's PageSpeed ​​Insights en Pingdom's Page Load Checker. We zullen gebruiken GTMETRIX omdat het verschillende cheques combineert; Ga naar de site en voer de URL in voor de website.

02. Onderzoek de resultaten

Speed up and optimise WordPress: Examine the results

GTMETRIX geeft u een snelle analyse van de prestaties van uw site (Afbeelding Credit: GTMETRIX)

Na een korte vertraging zal GTMETRIX de resultaten van de cheque weergeven en verschillende scores van A-F geven. Het geeft ook een volledig geladen tijd en de totale paginaformaat. Hieronder wordt een uitsplitsing van verschillende elementen gegeven.

03. Identificeer de grootste bestanden

Een van de belangrijkste metrieken is de totale paginaformaat. Dit is de bestandsgrootte van alle geladen elementen op een pagina, zoals afbeeldingen, video, CSS en eventuele scripts die op de pagina zijn opgenomen. Gebruik GTMETRIX het tabblad Waterfall en sorteer de tabel met de grootte om de grootste elementen op de pagina te vinden.

04. Comprimeer media om de grootte te verminderen

Speed up and optimise WordPress: Compress media to reduce size

Bulk Optimaliseer uw media om een ​​snelheidsboost te krijgen (Afbeelding Credit: EWWW)

Afbeeldingen en video zijn meestal de grootste items op een pagina. Elimineer onnodige achtergrondvideo's en zorg ervoor om video te coderen bij een lage bitsnelheid als deze automatisch afspeelt. Installeer de plug-in EWWW-afbeelding Optimizer ​Vanuit de mediabibliotheek is een nieuwe bulkoptimalisatieoptie beschikbaar. Voer dit uit.

Als je veel media hebt om op te slaan, stash het veilig in deze uitstekende cloud opslag opties.

05. Grootste afbeeldingen

Speed up and optimise WordPress: Resize images

Krimpen die enorme beelden die in de browser worden verkleind (Beeldkrediet: WordPress)

Soms staan ​​afbeeldingen toegevoegd aan een pagina met een hoge resolutie en vervolgens worden opgeschubd met CSS. Dit verspilt bandbreedte omdat de grotere maat nooit wordt gebruikt. Ga naar het dashboard & GT; Instellingen & GT; EWWW-beeldoptimiser en selecteer de grootte wijzigen. Vink "de grootte van detectie" aan. Nu markeren pagina's die door een beheerder worden bekeken beelden die moeten worden aangepast. Het wijzigen van deze afbeeldingen in een beeldeditor of het gebruik van een CDN met automatische dimensionering zal dit probleem oplossen.

06. Minificatie van CSS, JS & AMP; Html

Dit is het proces van het verwijderen van de tekens in de code die het menselijk leesbaar maakt om de grootte van de pagina te verkleinen. Bij gebruik van een thema met een derde partij, een plug-in zoals Autopitimiseren is hiervoor perfect. Installeer het, ga naar Instellingen & GT; AutoPTimize & GT; Blader naar beneden naar CSS-opties en vink "Optimize CSS-code". Bij het werken met een thema dat is gemaakt, wordt minicificatie uitgevoerd met build-tools zoals Slup. 

 CSS:
een {
    -Webkit-box-schaduw: geen;
    tekst-decoratie: geen;
​

Gezijdig:
een {-Webkit-box-shadow: geen; tekst-decoratie: geen;}

07. Combineer CSS & AMP; JS-bestanden

Bij gebruik van een thema van derden kan de AutoPTIMISE-plug-in de meeste scenario's dekken door de optie "CSS-bestanden" AGGREGE CSS-bestanden mogelijk te maken. Dit combineert alle CSS voor elke pagina in een enkel bestand in plaats van veel kleinere.

08. Uitstel extern JavaScript

Live Chat, Analytics and Tracking-tools kunnen grote JavaScript-bestanden bundelen die volledige seconden toevoegen aan de tijd dat de pagina nodig is om interactief te worden. Voeg het defersattribuut toe aan deze scripts, zodat ze niet worden uitgevoerd totdat de DOM klaar is met laden. 

  & LT; SCRIPT SRC = "PATH-TO-FILE.JS" DEFER & GT; & LT; / SCRIPT & GT;

09. Onderzoek de plug-ins

Speed up and optimise WordPress: Examine the plugins

Behandel uw site naar een ernstige plug-in-audit (Beeldkrediet: WordPress)

Te veel plug-ins kunnen WordPress verlangen. Met zoveel plug-ins die vrij zijn, staan ​​ontwikkelaars onder druk om premiumversies van hun software te duwen en bevatten onnodige, opgeblazen functies, zoals het duwen van meldingen naar het Admin-dashboard. Schakel uit en verwijder alle plug-ins die niet worden gebruikt - ze kunnen later opnieuw worden geïnstalleerd indien nodig.

10. Controleer de Web Server Power

Speed up and optimise WordPress: Check web server power

Uw server kan de dingen afnemen; Hier is hoe te identificeren of dat het geval is (Afbeelding Credit: Google)

De motor van een website is de server waarop het wordt uitgevoerd. Als het goedkoop, underpowered en slecht wordt gehandhaafd, zal het slecht rennen. Ga naar Google PageSpeed ​​Insights en voer de URL van de website in. In de resultaten zoekt u naar "Verminder de reactietijd van de server". Als dit op het rapport verschijnt, is het waarschijnlijk dat een langzame server de schuld heeft voor de uitvoering.

11. Schakel GZIP-compressie in

GZIP kan de grootte van uw website verlagen voordat deze naar een gebruiker wordt verzonden. De webbrowser van de gebruiker decomprimeert vervolgens de gegevens automatisch en geeft het hierop weer. Zonder nadelen is het belangrijk om ervoor te zorgen dat GZIP is ingeschakeld. Er zijn verschillende hulpmiddelen om te controleren of GZIP is ingeschakeld; proberen Giftofeed ​

12. Upgrade naar PHP 7

Binnen het WordPress Dashboard Open gereedschap & GT; Site Health en klik op het tabblad Info. Open de "Server" -accordeon en controleer de waarde voor de PHP-versie. Als dit minder dan 7.x.x is, wordt het sterk aanbevolen om te upgraden naar ten minste PHP 7.1. Tests tonen wijzigen van deze toegestane handling van het dubbele van de gesimuleerde bezoekers.

13. Stel paginacachen in

Speed up and optimise WordPress: Set up page caching

Gebruik de cache-enabler om populaire pagina's op een sneller statisch HTML-bestand te maken (Beeldkrediet: WordPress)

Ga naar Plug-ins & GT; Voeg nieuwe plug-in toe en zoek naar "Cache Enabler". Deze lichtgewicht plug-in bewaart pagina's in een cache, zodat een bezoeker op hetzelfde moment doorbroekt als een ander ervoor zorgt ervoor dat de website twee keer de pagina weerhoudt. In plaats daarvan maakt de plug-in de pagina de pagina naar een Statisch HTML-bestand zodra dit bestand op latere gebruikers dient.

14. Photon

Verschillende apparaten maken afbeeldingen op verschillende formaten, waardoor het moeilijk is om afbeeldingen te formatteren precies zoals ze worden weergegeven. De gratis "Photon" -service gebruiken, inbegrepen Jetpack , afbeeldingen worden automatisch op de juiste maat geserveerd.

15. Stel browsercache in

Browser Caching vertelt de browser van een gebruiker dat bepaalde elementen niet opnieuw moeten worden gedownload elke keer dat ze een pagina op de website opnieuw laden of terugkomen en opnieuw bezoeken. Dit kan handmatig worden gedaan in .htaccess of alternatief kan een plug-in zoals "Hefboombrowser Caching" worden gebruikt.

16. Laadtesten met virtuele gebruikers

Speed up and optimise WordPress: Load testing with virtual users

Gebruik een service zoals loader om te controleren op uw site kan het hoofd krijgen met een hoge vraag (Afbeelding Credit: GTMETRIX)

Om echte gebruikers te simuleren met behulp van de website en plaats de website onder stress, moeten laadtests worden uitgevoerd. Gebruik tijdens het bewaken van de server voor het laden van impact een service zoals Lader om verkeer naar de website te verzenden. De CPU en het geheugen van de server moeten binnen veilige limieten blijven.

17. Huid opnieuw controleren

Zodra de optimalisaties zijn uitgevoerd, moet u de verbetering van de website testen en meten. Voer GTMETRIX opnieuw uit en gebruik het tabblad Geschiedenis om het verschil in de laadtijd van de pagina te zien. Als CACHING is ingeschakeld, zorg er dan voor dat u de website minstens één keer bezoekt om de cache te "Prime" voordat u het testen uitvoert.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 292 van Creative Web Design Magazine Webdesigner ​ Koop Issue 292 ​

GenerateJS banner

(Afbeelding Credit: Future / Toa Heftiba, Unsplash)

Doe mee in april 2020 om onze line-up van JavaScript Superstars te zien bij Generatejs - de conferentie die je helpt Betaal JavaScript te bouwen. Boek nu op generateconf.com

Gerelateerde artikelen:

  • Hoe WordPress in een visuele bouwer te veranderen
  • 26 WordPress-portfolio-thema's van topkwaliteit

Procedures - Meest populaire artikelen

Animate SVG met JavaScript

Procedures Sep 13, 2025

Er is zoveel dat in de browser in de browser kan worden bereikt met behulp van CSS3 of de webanimatie-API, in JavaScript. Eenvoud..

Hoe een gebrekkige samenstelling te corrigeren

Procedures Sep 13, 2025

Ik heb mijn oorspronkelijke schilderkunst rond deze tijd vorig jaar gecreëerd, geïnspireerd door de enorme fantasielandschappen door kunstenaars zoals Dongbiao Lu en Ruxing Gao. Het was mij..

Maak aangepaste borstels in clipstudio-verf

Procedures Sep 13, 2025

Elke eerste installatie van clipstudio-verf omvat een opgewonden verkenning van de decoratie-subtool. Het is een ware smorgasbord van natuurlijke, onnatuurlijke en ronduit goofy borstels die ..

Hoe maak je 3D-belettering in Illustrator

Procedures Sep 13, 2025

Vorige week bracht Adobe nog wat meer video's uit aan hun nuttige maak het nu afspeellijst, het geven van creatives de kans om in slechts 60 seconden of minder een scala aan praktische vaardi..

5 manieren om meer meeslepende VR-ervaringen te creëren

Procedures Sep 13, 2025

Virtual Reality is niet echt nieuw, maar het is pas in de afgelopen paar jaar dat technologie een punt heeft bereikt waar het kan..

Maak een typografische poster met behulp van Adobe InDesign

Procedures Sep 13, 2025

Adobe InDesign is een geweldig programma om te gebruiken bij het ontwerpen van alles dat Type zwaar gebruikt. Gedurende deze InDe..

De ultieme gids voor het compositeren van afbeeldingen in Photoshop

Procedures Sep 13, 2025

Van alle Photoshop-projecten, compositerende afbeeldingen in één fantastisch frame is misschien wel de meest aangename en creat..

Een promo ontwerpen voor een denkbeeldig merk

Procedures Sep 13, 2025

Bij het ontwerpen voor een merk, of het nu gaat om een ​​vaststelling van een of een startup waar u de creatieve lead aanneemt, is de consistentie in alle aanraakpunten de sleutelwoorden...

Categorieën