Share
Geef uw site een boost! Implementeer cruciale optimalisatietechnieken die niet alleen uw verbeteren YSlow score, maar ook je Google-rang. In deze zelfstudie bespreken we alle aspecten van W3-caching, ySlow, Google-paginasnelheid, CSS-sprites en htaccess-regels om een hoge ySlow-score te bereiken zoals ik die op mijn blog heb gedaan.
Een korte opmerking voordat we beginnen, hoewel deze tutorial alles in zoveel detail zal behandelen als nodig is, zullen er (waar mogelijk) snelkoppelingen zijn om u tijd te besparen.
Installeer een caching-plugin: Ten eerste, welke caching-plug-in je ook gebruikt, schakel hem NU uit! Tenzij het de machtige W3 Total cache is, want dat is waar we hier mee gaan werken. (Ok, dus dat kwam een beetje goed, maar ik heb veel van de caching-plug-ins gebruikt en W3 is mijn favoriet. Als je een andere gebruikt om welke reden dan ook, dat is waarschijnlijk goed - we gaan mee met de W3 Aanbeveling hoor.) Ga naar het gedeelte "Add new" plugins in de WordPress, zoek "W3 Total Cache" download het, installeer het maar schakel het niet in ... nou nog niet toch.
Installeer een Database Manager-plugin: Vervolgens hebt u nog een plug-in nodig die "WP-DBmanager" heet. Zoek en installeer dit opnieuw en zorg ervoor dat er geen andere database-plug-ins zijn geïnstalleerd.
Voordat we verder gaan en beginnen met het verbeteren van uw site, laten we eerst zien waar we mee te maken hadden. Open Google Chrome of installeer het als je het nog niet hebt. Zodra u in Chrome bent, installeert u de ySlow-plug-in HIER eenmaal geïnstalleerd en ziet u rechtsboven in uw scherm een nieuw pictogram. Klik Het. (Zorg ervoor dat u op de startpagina van uw site bent)
ySlow controleert vervolgens uw site, vertelt u wat goed is, wat slecht is en alles daartussenin. We willen eerst focussen op alles wat lager is dan een klasse B. Hieronder zal ik elke W3-instelling doorlopen die je nodig hebt om de laadtijd van je sites te verbeteren.
Zodra W3 Total Cache is ingeschakeld, ziet u een nieuw tabblad op de zijbalk met de naam 'Prestaties' erop klikken. Nu zullen we natuurlijk alle verschillende secties van W3 doornemen, maar om u wat tijd te besparen kunt u het W3-instellingenbestand, gebundeld in de "bronbestanden", importeren en naar stap 2C gaan.
Dit is waar alle instellingen voor W3 zitten. Laten we eerst kijken naar de "Algemene instellingen". Vink de volgende vakjes aan (in te schakelen):
Page Cache (selecteer "Disk: Enhanced" in de vervolgkeuzelijst) - Caching-pagina's verminderen de reactietijd van uw site en vergroten de schaal van uw webserver.
Verklein (selecteer "Handmatig", laat de andere instellingen staan) - Minimalisatie kan de bestandsgrootte van HTML, CSS, JS en feeds verkleinen met gemiddeld ~ 10%.
Vink Database cache niet aan (we zullen dit later op een andere manier sorteren)
Object cache (selecteer "Disk" in de vervolgkeuzelijst) - Object-caching verhoogt de prestaties aanzienlijk voor zeer dynamische sites (die de Object Cache API gebruiken).
Browser Cache - Schakel HTTP-compressie in en voeg headers toe om de serverload te verminderen en de laadtijd van bestanden te verminderen.
Laat CDN, Varnish & cloudflare ongewijzigd. (opnieuw om deze snelle upload te doen, het instellingenbestand opgenomen in de "bronbestanden" via de optie onderaan de "Algemene instellingen")
Klik op het tabblad "Verkleinen" bovenaan het paneel / de pagina van W3. Controleer in het gedeelte "HTML & XML" of de eerste drie vakjes zijn aangevinkt. Klik vervolgens bovenaan op de knop "Help".
Zodra deze popover wordt geladen, wordt u geconfronteerd met een lijst met javascript-bestanden, gevolgd door stylesheets waarnaar uw site linkt. We willen in essentie alles proberen UIT TE VINDEN:
JQuery-bestanden
Google-advertenties (of welke advertenties dan ook)
Alle stats.wordpress.js-bestanden (deze heb je als je jetpack hebt geïnstalleerd
Maar voor CSS kun je ze redelijk veilig allemaal selecteren. Nu is dit geen exacte wetenschap, want dit is het verkleinen van je themabestanden (maak je geen zorgen dat het niet destructief is) en er zijn veel verschillende thema's die allemaal een breed scala aan verschillende bestanden, plug-ins en functies gebruiken. Kortom een voorbeeld van uw wijzigingen voordat u ze indient.
Minify is een van de grootste verbeteringen die je gaat integreren, als je eenmaal al je bestanden hebt geselecteerd (en hetzelfde hebt gedaan met elk thema, als je er meerdere gebruikt) klik dan op "Apply & close", direct gevolgd door "Save all" instellingen "(Implementeer het als uw site er nog steeds hetzelfde uitziet / werkt).
Zodra je op het tabblad "Browser Cache" bent, moet je de "Expires header life" veranderen naar 691200 seconden. Dit zal je ySlow-score meteen een boost geven.
Ga nu terug naar "Algemene instellingen" en klik op "Alle caches legen", ga dan naar je startpagina en voer de ySlow-test opnieuw uit, je zou een mooie verbetering moeten zien.
Onder het tabblad "Prestaties" op de zijbalk in de WordPress-backend zou er een ander tabblad moeten zijn met de naam "Database" (zo niet, ga dan terug en activeer het).
Nu is dit heel eenvoudig, je moet drie dingen doen, back-up maken, repareren, optimaliseren.
Om een back-up te maken klikt u op de "Backup DB" en klik onderaan op "Backup" (Maak u geen zorgen over gzipping).
Vervolgens willen we je database herstellen (alleen in geval van), dus ga naar de "Repair DB" in de zijbalk. Klik onderaan op de knop "Repareren".
Ten slotte, optimaliseer het. Klik op de zijbalkknop "Optimaliseren DB" & yep je hebt het al geraden, klik onderaan op de knop "Optimaliseren".
Om dit proces te voorkomen, opent u het tabblad "DB-opties" op de zijbalk. Onderaan zal er een gedeelte "Automatische planning" zijn. Zorg ervoor dat elke ELKE DAG een back-up wordt gemaakt (u kunt niet te voorzichtig zijn) en vervolgens instellen om elke dag te optimaliseren en één keer per week te repareren. Sla vervolgens de wijzigingen op.
Nu in ySlow zult u waarschijnlijk in de sectie "Maak minder HTTP-verzoeken" een reeks tekst zien die zoiets zegt als "Deze pagina heeft 10 externe achtergrondafbeeldingen. Combineer ze met CSS-sprites. "
Stel je de besparingen voor als al die kleine afbeeldingen slechts één afbeelding zouden kunnen zijn ... Het zou de dingen zeker versnellen. Hiervoor gaan we een gratis tool genaamd "Spriteme" gebruiken, dus ga naar de site HIER (doe dit in een nieuw tabblad, zorg er opnieuw voor dat je site op de startpagina staat).
Zodra u zowel uw startpagina hebt geopend op één tabblad en spriteme geopend in een andere, sleept u de "SpriteMe" -tekst naar het tabblad waarop uw site staat. Er verschijnt een vak rechtsboven in het tabblad / venster. U moet op de knop "make sprite" klikken die zich in het vak "Voorgestelde sprites" bevindt. Zodra het klaar is, download het de afbeelding die het heeft gemaakt en upload het naar ergens op uw site (bij voorkeur binnen het thema dat u gebruikt). 
Klik nu op de knop "CSS exporteren" in de rechterbovenhoek van de pop-up "SpriteMe", kopieer en plak de CSS-code die het u heeft gegeven (dat is alles) aan de onderkant van uw thema's "style.css" of waar dan ook het zal worden gebruikt in plaats van de standaardcode (omdat we niet de standaard-themacode willen overschrijven). U moet ervoor zorgen dat de tweede "background-image: url" wordt gewijzigd van "http://www.jaredhirsch.com" naar waar u ooit de sprite-afbeelding van eerder hebt opgeslagen.
Zodra u dit hebt gedaan, moet u nogmaals "alle caches leegmaken" op het zijbalktabblad "Prestaties".
Voor het grootste gedeelte gebruik ik altijd persoonlijk Photoshop om mijn afbeeldingen te comprimeren voordat ik het upload, maar voor velen van jullie is dit geen optie omdat je geen photoshop hebt. Dus hier zal ik je helpen bij het verkleinen van de bestandsgrootte van je afbeeldingen.
Allereerst wil je ervoor zorgen dat alle themafoto's zijn geoptimaliseerd en je kunt dit doen door ze allemaal te grijpen en ze te meppen in deze fantastische kleine app genaamd "ImageOptim"
Zodra je themabeelden leuk zijn en gecomprimeerd, wil je mogelijk naar plug-ins als "Smush.it" voor Wordpress kijken die afbeeldingen optimaliseren die je in posts en dergelijke kunt gebruiken..
Dit is zeker een cruciale optimalisatietechniek. Als u PHP GZIP-compressie wilt inschakelen, bewerkt u php.ini (voorbeeldlocaties zoals in / etc / of / usr / local / lib) met een teksteditor zoals vi en zoekt u de volgende instructie op:
zlib.output_compression
De standaardwaarde is Uit, wijzig de instelling in Aan om de regel er als volgt uit te laten zien:
zlib.output_compression = Aan
Herstart Apache HTTPD-server na de wijziging. Elke webpagina die door PHP wordt geproduceerd, wordt nu gecomprimeerd voordat via internet naar de webbrowser wordt verzonden om te decoderen.
PHP heeft ook een richtlijn die kan worden gebruikt om het compressieniveau aan te passen. Om het compressieniveau in te stellen, gebruikt u de volgende regel in php.ini, met geldige waarden tussen 1 en 9, waarbij 1 het minst comprimeert en 9 het meest comprimeert. Het standaard compressieniveau is 6, wat de beste compressie biedt zonder de prestaties van de server te verslechteren.
zlib.output_compression_level = 6
Eerder werd PHP-compressie bereikt door in te voeren code aan het begin van elke PHP-scripts. De methode wordt niet aanbevolen omdat elke script moet worden gewijzigd. zlib inschakelen in php.ini is zonder uitsluiting van toepassing op alle PHP-scripts op de webserver.
Als het php.ini-bestand niet kan worden gewijzigd of als php.ini geen controle heeft over met name shared hosting, kan de PHP GZIP-compressie ook worden ingesteld via het .htaccess-bestand, meestal in de hoofdmap van de website. Om PHP GZIP-compressie via Zlib in te schakelen, voegt u gewoon de volgende regel toe aan het .htaccess-bestand. Merk op dat elke website afzonderlijk moet worden gewijzigd.
php_flag zlib.output_compression op
Het nadeel van het inschakelen van GZIP-compressie via PHP is dat alleen webpagina's die door PHP-scripts worden gegenereerd, worden gecomprimeerd door GZIP-codering. Alle externe CSS- of JavaScript-bestanden worden niet gecomprimeerd. Voor de mogelijkheid om GZIP-compressie op alle bestandstypen in te schakelen, wordt in plaats daarvan mod_deflate of mod_gzip gebruikt op HTTPD-webserver.
Controleer en controleer of de GZIP-compressie correct werkt
Als we aan het einde van deze tutorial komen, wil ik gewoon wat laatste dingen bespreken. Nu uw afbeeldingen zijn verbrijzeld en sprites zijn gemaakt, wilt u mogelijk zowel uw browsercache wissen als nogmaals "alle caches leegmaken" in het zijbalkje "Prestaties"..
Laten we nu teruggaan, log uit van WordPress de startpagina van uw site laden en een ySlow-test uitvoeren. Wederom zou het moeten zijn gestegen, in de CDN-sectie van ySlow heb je de optie om "Toevoegen als CDN" op sommige componenten. Als je dit doet, wordt je cijfer nog beter.
Als u echt een speciale CDN wilt toevoegen, raad ik u aan deze TUTORIAL te volgen.
Nu moeten vingers die gekruist zijn naar een cijfer A-testscore kijken en als je dit vergelijkt met de paginazendsnelheidstest van Google, zie je een zeer gezonde score.
Een deel van ySlow dat ik niet heb behandeld is het "Cookie-gratis domein", dat is wanneer de browser een verzoek indient voor een statische afbeelding en samen met de aanvraag cookies verzendt, heeft de server geen enkel gebruik voor die cookies. Ze maken dus alleen maar netwerkverkeer zonder goede reden. U moet ervoor zorgen dat statische componenten worden aangevraagd met cookievrije verzoeken. Maak een subdomein en host al uw statische componenten daar.
Als uw domein www.example.org is, kunt u uw statische componenten hosten opstatic.example.org. Als u echter al cookies hebt ingesteld op het hoofddomein example.org in tegenstelling tot www.example.org, bevatten alle aanvragen voor static.example.org die cookies. In dit geval kunt u een geheel nieuw domein kopen, uw statische componenten daar hosten en dit domein zonder cookies houden. Yahoo! maakt gebruik van yimg.com, YouTube gebruikt ytimg.com, Amazon gebruikt images-amazon.com enzovoort.
Een ander voordeel van het hosten van statische componenten in een cookievrij domein is dat sommige proxy's kunnen weigeren om de componenten die worden gevraagd met cookies te cachen. Als je je afvraagt of je example.org of www.example.org moet gebruiken voor je startpagina, overweeg dan de impact van een cookie. Als u www weglaat, heeft u geen andere keuze dan cookies te schrijven naar * .example.org, dus u kunt het beste gebruikmaken van het www-subdomein en de cookies naar dat subdomein schrijven..
Ik zal hier niet op ingaan, maar het bovenstaande zou u een goed idee moeten geven. Ik zal dit uitgebreid bespreken in een later zelfstudie. Dit verbetert de score, maar het is niet helemaal essentieel.
Dit zijn de stappen die ik neem bij het bouwen van websites en ze doen heel wat verschil als het gaat om het verbeteren van de snelheid en het toestaan van snelle reactietijden. Voor degenen onder u die meer informatie nodig hebben of die graag hulp willen bij het uitvoeren van de procedures, kunt u hieronder reageren of een bericht sturen via mijn auteursprofiel.
Accentsconagua