9 manieren om WordPress sneller te maken! Het zal zeker sneller zijn

B! Bladwijzer

Datum: 2025, 1 mei, 10 jaar
- De lettertype-instellingen zijn nu gedetailleerder.
- Er is een nieuwe maatregel toegevoegd: "Cron-instellingen".

Paginasnelheid is een van de belangrijkste factoren voor SEO. Google heeft ook officieel aangekondigd dat het de 'laadsnelheid van een pagina' gebruikt als rangschikkingssignaal en dat trage sites een negatieve invloed kunnen hebben op de rangschikking in de zoekresultaten.

Bovendien is de kans groter dat langzame sites vaker verlaten worden door gebruikers, wat kan resulteren in lagere paginaweergaven en conversies.
*Ongeveer 3% van de gebruikers verlaat een site als het langer dan 40 seconden duurt om te laden.

Hier ga ik de snelheid van WordPress in mijn omgeving (2024 nieuwe X-server) verbeteren, met als uiteindelijk doel een score van meer dan 80 te behalen in PageSpeed ​​​​Insights. Ik wil de inhoud openbaar maken.

Dit is een maatregel die vooral bedoeld is voor de X-server, maar ik denk dat sommige onderdelen ook door functies en plug-ins op andere servers kunnen worden gedekt. ​​Probeer het dus gerust uit. Wij leggen uit hoe u met minimale inspanning een Page Speed ​​Insights-score van meer dan 60 kunt behalen.

Hoe het allemaal begon

Het begon allemaal heel triviaal.
De X-server wordt in 2024 vervangen door een nieuwe server, die drie keer sneller zal zijn dan voorheen. Bovendien hoorde ik dat bestaande gebruikers gratis konden upgraden naar de nieuwe server, dus ik ben meteen overgestapt.

Ik heb dus vol enthousiasme een test uitgevoerd met PageSpeedInsight en dit zijn de resultaten:

Hmm... dit... is helemaal niet veranderd⤵︎ ⤵︎ ⤵︎
De cijfers lagen onder de verwachtingen. Ik denk dat ik een beetje geschokt was, want mijn verwachtingen waren te hoog.
Als gadgetblogger zou ik graag wat meer snelheidsevaluatie zien...
We vroegen ons af of er nog andere maatregelen waren die we konden implementeren. Na wat onderzoek kwamen we op de huidige maatregel.

Specifieke maatregelen

Hieronder heb ik een lijst samengesteld met specifieke maatregelen die u kunt nemen, met verwijzing naar verschillende websites.

1. Verwijder onnodige plug-ins
2. Caching-optimalisatie (serverplug-ins)
3. Beeldcompressie en -optimalisatie
4. HTML/CSS/JS-codeoptimalisatie
5. Lazy Loading van afbeeldingen en video's
6. Schakel "XPageSpeed" in op de X-server
7. Schakel "X Acceleration" in op de X-server
8. Werk de PHP-versie op uw server bij
9. Server- en database-revisie
10. Instellingen vooraf laden
11. Maak het lettertype lichter
12. Cron-instellingen *Nieuw toegevoegd op 1 januari

Omdat items 2 tot en met 5 door de X-serverfunctie "XPageSpeed" kunnen worden afgehandeld, gebruiken we dezelfde functie voor item 6.
Voor degenen die de X-server niet gebruiken, introduceren we later plug-ins.

Ik zal proberen deze één voor één in de praktijk te brengen.
Wij doen ons best om zoveel mogelijk informatie te delen over onze initiatieven, dus houd ons in de gaten.

Deel 1: Onnodige plug-ins opruimen

Een van de redenen hiervoor is dat te veel plug-ins de laadtijd van uw site kunnen vertragen, conflicten kunnen veroorzaken en de verwerkingstijd kunnen verdubbelen.

Verwijder eerst alle plug-ins die u een tijdje niet hebt gebruikt. 'Verwijderen' is effectiever dan 'uitschakelen'.
Dit komt doordat zelfs als een plug-in is uitgeschakeld, de configuratiebestanden en andere informatie behouden blijven, wat van invloed lijkt te zijn op de verwerking. Dus het is verwijderd. Beperk ook alle overlappende plug-ins tot één en verwijder deze. Ik denk dat het een goed idee is om plugins te bewaren die je af en toe gebruikt, maar eigenlijk wilt verwijderen.

Afhankelijk van de plug-in kan het verwijderen ervan ervoor zorgen dat de weergave vervormd wordt. Zorg er daarom voor dat u de back-upfunctie van uw verhuurserver gebruikt om een ​​back-up te maken van uw sitegegevens.

Deel 2. "XPageSpeed" instellen

Configureer "XPageSpeed", de unieke versnellingsfunctie van de X-server.
Meld u aan bij het serverpaneel van uw X-server en klik op de link "XpageSpeed".
En schakel alle selectievakjes in. *Houd er rekening mee dat het vertraagd laden van Javascript, afhankelijk van uw omgeving, vervorming van het scherm kan veroorzaken. Als het problemen veroorzaakt wanneer het is ingeschakeld, kunt u het proberen uit te schakelen.

Zoals hierboven vermeld, kan alles wat met een cache-plugin kan worden gedaan, ook met de "XPageSpeed"-functie van de X-server worden gedaan. U hoeft zich dus minder zorgen te maken over storingen als gevolg van de installatie van de plugin.

Tip 3. Schakel de functie "X Accelerator" in

Tip 4. Werk uw PHP-versie op uw server bij

De snelheid van PHP verbetert met elke nieuwe release. Daarom raden we u aan om regelmatig te controleren en altijd up-to-date te houden met de meest recente versie. Deze functie is mogelijk ook beschikbaar op andere verhuurservers dan X Server, dus controleer dit. *In zeldzame gevallen kan het updaten naar de nieuwste versie ervoor zorgen dat het scherm vervormd raakt. Schakel daarom over en houd de situatie goed in de gaten. Ik probeer het momenteel met de nieuwste versie 8.3.10.

Tussentijdse resultaten

Laten we nu eens kijken hoeveel sneller het is.

De resultaten op de PC waren aanzienlijk beter! Score verbeterd van 74 naar 91. Is dit niet al de grens? Het is verbazingwekkend dat we met alleen deze maatregelen de grens van 90 kunnen bereiken.
De prestaties van de smartphone gingen van 52 naar 60. Het is iets kleins, maar de aantallen nemen zeker toe. In hoeverre zullen toekomstige maatregelen de score verbeteren?

Wanneer u uw snelheid test met PageSpeedInsights, zorg er dan voor dat u eerst de cache van uw browser wist. Als het mogelijk is, zou het perfect zijn als u ook de servercache zou kunnen wissen.

Deel 5: De server en database beoordelen

Hier willen we de serverfuncties en de database verder onder de loep nemen om de snelheid verder te verbeteren.

Verhoog PHP-geheugenlimiet

Waarom is dit belangrijk?
Als u veel plug-ins hebt of grote afbeeldingen of een thema met veel functies gebruikt, kan het geheugen vol raken. Dit kan fouten en vertragingen veroorzaken. Door te zorgen voor voldoende geheugenlimieten, zal WordPress stabieler werken.

php_value memory_limit 256M

Database opschonen (MySQL)

Waarom is dit belangrijk?
WordPress wordt gebruikt voor berichten, opmerkingen, optie-instellingen, etc.MySQL-databaseis opgeslagen in. Door de opeenhoping van artikelherzieningen, spamreacties en oude tijdelijke gegevens raakt de database overbelast, waardoor de site trager wordt.

Stap 6. Installeer WordPress' "W3 Total Cache"

Dit is afhankelijk van de server, maar voor sites met veel toegangen,Objectcaches zoals Redis en MemcachedU kunt het nog verder versnellen door gebruik te maken van
Het is niet een functie waar je vaak van hebt gehoord, maar als je geïnteresseerd bent, bekijk het dan eens. Voorwaarde is dat de server compatibel is en dat duurdere serverabonnementen deze mogelijk ondersteunen.

Als u bovendien een cacheplugin zoals "W3 Total Cache" in WordPress installeert, kunt u de cachefunctie gebruiken die XPageSpeed ​​​​niet volledig kon aanvullen en kunt u streven naar een synergetische snelheidsverhoging.

Hieronder vindt u mijn instellingen voor deze plugin ter referentie.

- Pagina cache/ingeschakeld AAN
Pagina cache methode/schijf: uitgebreid

Compressie/Inschakelen UIT

Instellingen op het tabblad 'Geavanceerde instellingen' onder het item 'Pagina-cache'.

Instellingen op het tabblad 'Geavanceerde instellingen' onder het item 'Compressie'. Schakel alle items uit.

De instellingen zijn nu voltooid.
PS/Daarna ben ik gestopt met het gebruiken van de plugin omdat er een weergavefout op mijn iPhone optrad.
※Het uitschakelen van XPageSpeed ​​hielp ook niet (huilen)
Ik hoop dat de rest van de maatregelen resultaat opleveren...

7. Instellingen vooraf laden

Instellingen vooraf ladenDoor de volgende actie van de gebruiker te voorspellen en vooraf bronnen te laden,Verbetert de waargenomen snelheid aanzienlijkHet is een techniek om het te laten gebeuren.
Door bijvoorbeeld CSS, JavaScript en dergelijke vooraf te laden, die nodig zijn bij het navigeren naar de volgende pagina, wordt de pagina sneller weergegeven op het moment dat de gebruiker naar de volgende pagina gaat.

Code vooraf laden

Voeg de volgende code toe aan uw child-thema:functions.phpVoeg de code toe aan
De onderstaande code zorgt ervoor dat er twee CSS- en twee JS-bestanden worden voorgeladen. Vervang de CSS- en JS-bestandsnamen en -paden door uw eigen namen en paden.

functie add_preload_links() {
    // CSS-bestanden om vooraf te laden
    echo'  ' . "\N";
    echo'  ' . "\N";

    // JS-bestanden om vooraf te laden
    echo'  ' . "\N";
    echo'  ' . "\N";
}
voeg_actie('wp_head', 'voeg_preload_links_toe');

Code om de vooraf geladen bestanden te gebruiken

Vooraf geladen CSS- of JS-bestanden moeten door WordPress in de wachtrij worden geplaatst en op de gebruikelijke manier worden geladen.

De volgende code staat ook in het child-thema.functions.phpSchrijf alstublieft in *Zorg ervoor dat u uw eigen bestandsnaam en pad gebruikt.

functie enqueue_theme_scripts() {
    // Laad het CSS-bestand
    wp_enqueue_style('customizer-stijl', get_template_directory_uri() . '/css/customizer-stijl.min.css', array(), '1.0.0', 'alles');
    wp_enqueue_style('slick-stijl', get_template_directory_uri() . '/css/slick.min.css', array(), '1.0.0', 'all');

    // Laad het JS-bestand
    wp_enqueue_script('slick-script', get_template_directory_uri(). '/js/slick.min.js', array('jquery'), '1.0.0', true);
    wp_enqueue_script('lozad-script', get_template_directory_uri(). '/js/lozad.min.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_theme_scripts');

Hiermee is het voorladen van het bestand voltooid.

Laten we nu naar de laatste maatregel gaan.

Tip 8. Maak uw lettertypen lichter

Het duurt verrassend lang om het lettertype te laden. (De lettergrootte is ongeveer 3 MB in TTF...) Het wordt als essentieel beschouwd voor lichte metingen.Bent u echter een X-servergebruiker, dan zijn de webfonts die door de plug-in 'TypeSquare' worden geleverd, zo ontworpen dat ze alleen de benodigde tekenbestanden laden en weergeven, waardoor ze snel kunnen worden weergegeven. Ik heb er dus al profijt van gehad. Het gebruikte lettertype is "Morisawa Shin Gothic", een lettertype dat ik ken van reclameontwerpen.

Als u een moderne browser gebruikt, is de optimale oplossing om woff2-lettertypen te gebruiken. Ik ben van TypeSquare naar woffXNUMX overgestapt.
Om WOFF2-lettertypen in WordPress te gebruiken,
1. Lettertypen ophalen
※voorbeeld:https://fonts.google.com/specimen/M+PLUS+1p
*Als u alleen TTF beschikbaar hebt,サイトConverteer naar woff2 met
2. Upload het lettertype naar een verhuurserver
3. Specificeer met CSS
Dergelijke stappen zijn noodzakelijk. Hieronder vindt u de stappen.

WOFF2-lettertypebestand voorbereiden

Het te gebruiken Woff2-lettertypebestand (bijv. MPLUS1p-Regular.woff2) en (bijv. MPLUS1p-Bold.woff2).
Upload uw lettertypebestanden via de WordPress Media Library of FTP.

• Aanbevolen uploaddirectory:/wp-content/themes/your-theme/fonts/
• Voorbeeld-URL voor lettertypebestand:https://your-site.com/wp-content/themes/your-theme/fonts/custom-font.woff2

Dat zal het zijn. Het bovenstaande is voorbeeldcode. Vervang deze door uw eigen serverpad en URL.

Wanneer u klaar bent, gaat u verder met de volgende stap.
Hier is de CSS voor het gebruik van het lettertype:

Lettertypen specificeren met CSS

CSS@font-faceGebruik regels om WOFF2-lettertypen te laden.

Bij het schrijven in extra CSS

1. Ga in het WordPress-beheerderspaneel naar 'Weergave' → 'Aanpassen' → 'Extra CSS'.
2. Voeg de volgende code toe. *Het bestandspad kan een adres zijn dat begint met http.

/* Lettertype laden */
@lettertype {
    lettertypefamilie: 'MPLUS1p';
    bron: url('/fonts/MPLUS1p-Regular.woff2') formaat('woff2');
    lettergewicht: 400;
    lettertype: normaal;
}

@lettertype {
    lettertypefamilie: 'MPLUS1p';
    bron: url('/fonts/MPLUS1p-Bold.woff2') formaat('woff2');
    lettergewicht: 700;
    lettertype: normaal;
}

lichaam {
    lettertype: 'MPLUS1p', schreefloos;
    lettertype: 400; /* Normaal */
}

h1, h2, h3, h4, h5, h6 {
    lettertype: 'MPLUS1p', schreefloos;
    lettertype: 700; /* Vet */
}

Controleer lettertypetoepassing

U kunt de laadstatus van het lettertype en waar het wordt toegepast, controleren met behulp van de ontwikkelaarstools van uw browser (F12-toets). Open uw site en controleer of de lettertypen correct zijn toegepast.

Het is ook mogelijk om TTF-bestanden naar woff2-bestanden te converteren. In sommige gevallen kan dit lichter zijn.
Website voor lettertypeconversie

Het woff2-formaat is een gecomprimeerd lettertypeformaat voor het web. Veel lettertypen worden in dit formaat gedistribueerd. Hieronder vindt u enkele representatieve Japanse lettertypen die veel worden gebruikt in het woff2-formaat.

1. Ik noteer Sans JP

• 特 徴: Een lettertype dat gezamenlijk door Google en Adobe is ontwikkeld. Modern, makkelijk leesbaar en veelzijdig.
• 用途: Websites, apps, presentatiematerialen, etc.
• ス タ イ ル: Er zijn veel diktes waaruit u kunt kiezen, van dun tot dik.
• 利 点: Het ondersteunt meerdere talen en heeft een harmonieus Engels en Japans ontwerp.

2. Noto Serif JP

• 特 徴: Serif-versie van Noto Sans JP. Het geeft een klassieke en rustige indruk.
• 用途: Ideaal voor rapporten, officiële documenten en websiteartikelen.
• ス タ イ ル: Een ontwerp dat geschikt is voor alineatekst.

3. M PLUS Afgerond 1c

• 特 徴: Het ronde ontwerp creëert een vriendelijke sfeer.
• 用途: Educatief, kinder- en gebruiksvriendelijk webdesign.
• 利 点: Geeft een lichte en vriendelijke indruk.

4. Kosugi / Kosugi Maru

• 特 徴:
  • kosugi: Eenvoudig gotisch lettertype voor een hoge zichtbaarheid.
  • Kosugi Maru: Het afgeronde gotische lettertype geeft een zachte indruk.
• 用途: Algemene website, UI-ontwerp, blog.

5. Zen Kaku Gotiek / Zen Maru Gotiek

• 特 徴: Een modern Japans lettertype dat een goede balans biedt tussen zichtbaarheid en design.
• 用途: Modern ontwerp voor websites en apps.
• 利 点: Ondersteunt meerdere gewichten, waardoor het veelzijdig en eenvoudig te gebruiken is.

6. Bron Han Sans

• 特 徴: Een hoogwaardig lettertype dat Japans ondersteunt, gezamenlijk ontwikkeld door Adobe en Google.
• 用途: Voor professionele situaties en meertalige projecten.
• 利 点: Vrij voor commercieel gebruik. Leesgemak en ontwerp.

7. Afgeronde M+

• 特 徴: Afgeronde gotische versie van het M+-lettertype. Er hangt een zachte sfeer.
• 用途: Casual webdesign, educatie en entertainment.

Vind uw favoriete lettertype en maak uw website lichter.
Zoals in het begin vermeld, zelfs als het een TTF-lettertype is,Deze siteU kunt het converteren naar een woff2-lettertype met behulp van

Wat is het woff2-lettertype?

WOFF2 is een lettertypebestandsformaat dat een meer gecomprimeerde versie is van het Web Open Font Format (WOFF). Het werd ontwikkeld om de bestandsgrootte van webfonts te verkleinen, waardoor ze sneller laden en minder bandbreedte gebruiken. WOFF2 comprimeert lettertypegegevens met behulp van een compressiealgoritme genaamd Brotli. Dit resulteert in een equivalent WOFF Ze kunnen aanzienlijk kleiner zijn qua bestandsgrootte dan lettertypen. Deze indeling wordt ondersteund door de meeste moderne webbrowsers, waaronder Chrome, Firefox, Safari, Opera en Edge (versie 14 en nieuwer).

Citaat:BESTANDSFORMAAT

Daarmee zijn onze versnellingsmaatregelen afgerond.
Ik wil graag zien hoeveel sneller het is.

Eindresultaat

Het is spannend en opwindend. Maar verwacht er niet te veel van.

Ooooh! De smartphone-score is aanzienlijk verbeterd! Ik was oorspronkelijk 52 en nu ben ik 77, dus ik ben heel blij. Mijn PC-score is gedaald van 91 naar 88, maar valt dit binnen de foutmarge? Omdat we een behoorlijk hoge score hebben weten te behouden, laten we de PC voorlopig met rust.

Wat betreft smartphones is het jammer dat we geen score van 80 hebben gehaald, maar we hebben toch een mooie score van 77 behaald. Ik denk dus dat de maatregelen die we hebben genomen wel degelijk effect hebben gehad. De gemiddelde LCP bedraagt ​​echter 4.7 seconden, dus er is nog ruimte voor verbetering. *LCP (Largest Contentful Paint) verwijst naar de tijd die nodig is om de hoofdinhoud van een pagina te laden.
Ik ben blij dat jullie allemaal goede cijfers hebben gehaald.

9. Aanvullende maatregelen: Cron-instellingen

Dit gaat over de X-server (ik denk dat andere servers dezelfde functie hebben), maar je kunt de snelheid verbeteren door het item 'Cron-instellingen' een beetje aan te passen.
De kans is groot dat deze functie ook op andere servers dan de X-server beschikbaar is. Probeer het gerust eens uit.
In mijn omgeving is het inzicht in de paginasnelheid met 8 punten verbeterd.

Hoe de standaard WordPress Cron werkt

• Standaard gebruikt WordPress een systeem genaamd “WP-Cron” om geplande berichten, beeldverwerking, automatische plugin-updates en meer te beheren.
• Omdat dit mechanisme echter 'elke keer dat de site wordt bezocht' wordt uitgevoerd, genereert het extra belasting, ongeacht het aantal bezoeken.

Laadeffect

• Bij persoonlijke blogs kunnen onnodige verificatieprocessen plaatsvinden, zelfs als het aantal bezoekers laag is.
• Deze belasting kan zich ophopen en de algehele snelheid van uw site beïnvloeden, vooral in gedeelde serveromgevingen zoals X-servers.

Effectbereik

• Door "WP-Cron" uit te schakelen en het schema te beheren met de "Cron-instellingen" op de X-server, kunt u onnodige verwerking elimineren en een verbetering van de weergavesnelheid en de efficiëntie van de serverbronnen verwachten.
• Zelfs blogs met weinig verkeer kunnen profiteren van het verminderen van verspilling van bronnen.

Stappen voor het instellen van Cron op uw X-server

WP-Cron uitschakelen

WordPresswp-config.phpDownload het bestand van de FTP-server en voeg de volgende code toe met behulp van een teksteditor zoals BBEdit.

define('DISABLE_WP_CRON', waar);

De code moet worden ingevoegd boven de code met de tekst "/* Dat is alles, stop met bewerken! Veel plezier met bloggen. */".
Zodra u klaar bent met het invoeren van de gegevens, uploadt u het bestand naar de FTP-server en overschrijft u het.

Toegang tot de X-server en Cron instellen

Houd er rekening mee dat deze uitleg betrekking heeft op de X-server. Ik denk niet dat het op andere servers veel anders zal zijn, dus gebruik dit als referentie.

php /home/gebruikersnaam/domeinnaam/public_html/wp-cron.php > /dev/null 2>&1

Controleer of de site correct wordt weergegeven. Als er geen problemen zijn, meet u de snelheid met Page Speed ​​Insights en bent u klaar.

ま と め

Deze keer hebben we geprobeerd de site te versnellen. Tot nu toe hadden we geen grootschalige maatregelen genomen en deden we het met kleine trucjes, dus ik ben erg blij dat we deze keer echt resultaat zagen.

Ik denk echter dat er nog ruimte is voor verbetering, dus ik wil het in de toekomst graag proberen met de introductie van een CDN in gedachten. (Ik betwijfel of een CDN effectief zou zijn voor een site als de onze...) Ik zal opnieuw een update plaatsen als dat gebeurt.
Streef naar een score van meer dan 90 met Page Speed ​​​​Insights!

Geschreven door Tomo

Vandaag ga ik met je op reis ~Het "Reisnotitieboek" dat ik vond bij Traveler's Factory~

Haal de inhoud op!

[Desk Tour] De comfortabele bureauomgeving van een gadgetblogger

Haal de inhoud op!

16 hoofdstukken in totaal: De geschiedenis en toekomst van Hatsune Miku... 17 jaar meesterwerken en evolutie

Haal de inhoud op!

Laatste informatie over MOFLIN! Een emotionele AI-huisdierrobot ♪ Hoe kan ik deze kopen?

Haal de inhoud op!

De filosofie van Comme des Garcons en Rei Kawakubo's vraag naar vrijheid | De essentie van avant-garde design

Haal de inhoud op!

Een verhaal over hoe de aankoop van een commerciële dartmachine voor persoonlijk gebruik mijn leven veranderde [DARTSLIVE2EX]

Haal de inhoud op!

De magie van "geurig"... Hoe je "vaste parfum" op een chique en leuke manier kunt gebruiken voor zowel mannen als vrouwen [Review]

Haal de inhoud op!

[Speciale functie] Leer meer over LGBTIQ en word een vriendelijker persoon wereldwijd

Haal de inhoud op!

[2023] Een review van de Nikon D3, een aantrekkelijke camera die vandaag de dag nog steeds gebruikt kan worden

Haal de inhoud op!

Wij vieren 100 recensieartikelen! Top 10 beste gadgets

Haal de inhoud op!

B! Bladwijzer

Tomo AribeOntwerper/regisseur van reclamevideo's

Ik ben een transgender persoon met een passie voor gadgets. Ik heb 25 jaar ervaring in reclameontwerp en 20 jaar ervaring in videoproductie. In februari 2021 begon hij met het runnen van de gadgetrecensieblog "Gadget Mania Z." Wij bieden informatie over gadgets met een uitstekend ontwerp en functionaliteit, geselecteerd vanuit het perspectief van reclamemakers. Ook,Amoeba keuzeHij fungeert tevens als gecertificeerd deskundige.Zie hier het artikel over slimme tags.

Klik hier voor een gedetailleerd profiel
E-mail (verzoeken voor het schrijven van artikelen, enz.)
Bekijk meer artikelen van deze auteur