Aghiuta.com is een blog over mediamonitoring en politiek, geschreven door Florin Popescu. Hier is onze WordPress-optimalisatie die we voor deze blog hebben uitgevoerd.
Vóór optimalisatie
De laadsnelheid van de eerste pagina was 4,3 sec.
De startpagina heeft 86 verzoeken en 1,3 MB.
- 14 javascripts – 505,6 k
- Stylesheet voor 20 sites – 41,1 k
- 23 bestanden – 601 k
JS
Facebook Connect JS heeft 174,4K en is in 0,69 seconden geladen. De Facebook Like Box kan als tekstwidget worden ingevoegd door de iframe-code van de Facebook Developers Like Box- pagina te kopiëren en daarmee wordt het JS-bestand verwijderd.
Het Gonzo-thema bevat een script.js-bestand van 101,3 KB. Het bevat verschillende scripts, zoals:
- fitvids
- flexschuif
- jQuery-versoepeling
- tabber-tabbladen
- rugstrekking
- mooie foto lightbox
- elastiek
Backstretch wordt gebruikt voor de grote achtergrondafbeelding, maar minstens vier van de andere worden niet gebruikt: flexslider, prettyphoto, elastislide, tabber tabs.
Fitvids maakt video-insluitingen responsief, dus het is waarschijnlijk nodig.
jQuery Easing heeft enig effect op klikken (de dia uit het zoekformulier).
Daarnaast wordt jQuery Easing (8,1 K) nog een keer geladen door de LayerSlider (26K) plugin die nergens wordt gebruikt.
Ik heb de ongebruikte scripts verwijderd en de bestandsgrootte is afgenomen van 101,3 KB naar slechts 29 KB.
Knoppen delen JS-bestanden
De plug-in die de deelknoppen op de website plaatst, heeft een behoorlijk grote impact op de laadtijd:
- Plus 1 – 25,8K
- Google-API – 84,2K
- Twitter – 84,5K
- Sociale balk – 1,8K
Dit alles kan worden opgelost door een andere plug-in ( Jetpack ) te gebruiken die voor alle knoppen een enkel JS-bestand van 35K laadt.
jQuery kan worden geladen vanuit de Google-bibliotheek in plaats van vanaf de server.
De Addfreestats JS geeft een 404-fout. Wij raden u aan Google Analytics te gebruiken.
CSS
Er zijn te veel CSS-bestanden (20), sommige geladen met @import, wat niet de beste optie is voor de prestaties.
We hebben gecombineerd wat mogelijk was (soms levert het combineren van js- of css-bestanden fouten op) en we hebben nu slechts 7 CSS-bestanden.
Afbeeldingen
Afbeeldingen kunnen beter worden geoptimaliseerd voor internet (dezelfde kwaliteit maar minder KB) en ik denk dat we minstens 5% van elke afbeelding kunnen besparen.
Op de eerste pagina zijn de miniaturen 166x166px groot, maar de geladen afbeeldingen zijn groter, 300x300px.
De afbeeldingen moeten worden geladen met een formaat van 166x166px.
WordPress maakt te veel thumbnails:
- 960×677
- 150×105
- 300×211
- 550×387
- 700×426
- 300×300
- 50×50
- 290×166
- 620×310
- 620×350
- 186×186
- 620×220
De site heeft alleen het volgende nodig:
- 166×166 – miniaturen van de eerste pagina
- 50×50 – thumbnails voor zijbalk
- 134×77 – thumbnails voor gerelateerde berichten
- 290×166 – miniatuur voor categoriearchief
De overige afmetingen zijn nutteloos en nemen ruimte in beslag op de server. We kunnen ze verwijderen en de onnodige code verwijderen uit het thema dat WordPress vertelt die duimen te maken.
We hebben Lazy Load geïmplementeerd, zodat alleen de afbeeldingen bovenaan de pagina (boven de vouw) worden geladen, wat een grote verbetering in de waargenomen snelheid oplevert.
Na optimalisatie
Na het verwijderen van onnodige code uit JS-bestanden, gecombineerde CSS-bestanden, correcte configuratie en implementatie van paginacache en databasecache, doet de website nu 48 verzoeken en heeft deze 634,5K.
Laadsnelheid eerste pagina: 1,47 seconden.
We realiseerden een prestatieverbetering van circa 60%.
We kunnen verder optimaliseren, maar dat zou betekenen dat we enkele elementen moeten verwijderen die de specifieke functionaliteit bieden die de eigenaar wenst, dus zijn we hier gestopt.
Laat een reactie achter