Aghiuta.com je blog o sledování médií a politice, který napsal Florin Popescu. Zde je naše optimalizace WordPress, kterou jsme pro tento blog provedli.
Před optimalizací
Rychlost načítání první stránky byla 4,3 s.
Domovská stránka má 86 požadavků a 1,3 MB.
- 14 javascriptů – 505,6 k
- 20 stránek stylů – 41,1 k
- 23 souborů – 601 k
JS
Facebook Connect JS má 174,4 kB a načte se za 0,69 sekundy. Facebook Like Box lze vložit jako textový widget zkopírováním kódu iframe ze Facebook Developers Like Box a tím se zbaví souboru JS.
Motiv Gonzo obsahuje soubor script.js, který má 101,3 kB. Obsahuje několik skriptů, jako jsou:
- fitvids
- flexslider
- zmírnění jquery
- tabber tabber
- protažení zad
- pěkný foto lightbox
- elastislide
Backstretch se používá pro velký obrázek na pozadí, ale nejméně čtyři z dalších se nepoužívají: flexslider, prettyphoto, elastislide, tabber tabs.
Fitvids reagují na vkládání videa, takže je to asi potřeba.
jQuery Easing má určitý vliv na kliknutí (snímek z vyhledávacího formuláře).
Kromě toho je jQuery Easing (8,1 K) ještě jednou načten pluginem LayerSlider (26 K), který se nikde nepoužívá.
Odstranil jsem nepoužívané skripty a velikost souboru se snížila z 101,3 kB na pouhých 29 kB.
Tlačítka pro sdílení souborů JS
Plugin, který umístí tlačítka pro sdílení na web, má docela velký vliv na dobu načítání:
- Plus 1 – 25,8 tis
- Google API – 84,2 kB
- Twitter – 84,5 tis
- Sociální bar – 1,8 tis
To vše lze vyřešit pomocí dalšího pluginu ( Jetpack ), který načte jeden JS soubor o velikosti 35K pro všechna tlačítka.
jQuery lze načíst z knihovny Google namísto načítání ze serveru.
Addfreestats JS dává chybu 404. Doporučujeme používat Google Analytics.
CSS
Existuje příliš mnoho souborů CSS (20), některé jsou načteny pomocí @import, což není nejlepší volba pro výkon.
Zkombinovali jsme, co se dalo (někdy spojení souborů js nebo css způsobí chyby) a nyní máme pouze 7 souborů CSS.
Obrázky
Obrázky lze lépe optimalizovat pro web (stejná kvalita, ale méně KB) a myslím, že z každého obrázku můžeme ušetřit minimálně 5 %.
Na první stránce mají miniatury velikost 166x166px, ale načtené obrázky jsou větší, 300x300px.
Obrázky by se měly načítat v rozlišení 166x166px.
WordPress vytváří příliš mnoho miniatur:
- 960×677
- 150×105
- 300×211
- 550×387
- 700×426
- 300×300
- 50×50
- 290×166
- 620×310
- 620×350
- 186×186
- 620×220
Stránka potřebuje pouze:
- 166×166 – miniatury první stránky
- 50×50 – miniatury pro postranní panel
- 134×77 – miniatury souvisejících příspěvků
- 290×166 – miniatura pro archiv kategorií
Zbývající rozměry jsou zbytečné a zabírají místo na serveru. Můžeme je smazat a odstranit zbytečný kód z motivu, který říká WordPressu, aby udělal ty palce.
Implementovali jsme Lazy Load, takže se načítají pouze obrázky v horní části stránky (nad okrajem), což výrazně zlepšuje vnímanou rychlost.
Po optimalizaci
Po odstranění zbytečného kódu z JS souborů, kombinovaných CSS souborů, správné konfiguraci a implementaci cache stránek a databázové cache web nyní dělá 48 požadavků a má 634,5K.
Rychlost načítání první stránky: 1,47 sekundy.
Dosáhli jsme zlepšení výkonu přibližně o 60 %.
Můžeme dále optimalizovat, ale to by znamenalo odstranění některých prvků, které poskytují konkrétní funkce požadované vlastníkem, takže jsme se zastavili zde.
Zanechat odpověď