Blogin optimointi – vain yksi tapaustutkimus

Aghiuta.com on Florin Popescun kirjoittama mediaseuranta- ja politiikkablogi. Tässä on tälle blogille tekemämme WordPress-optimointi.

Ennen optimointia

Ensimmäisen sivun latausnopeus oli 4,3 sekuntia.

Kotisivulla on 86 pyyntöä ja 1,3 Mt.

• 14 javascriptiä – 505,6 k
• 20 sivuston tyylitaulukko – 41,1 k
• 23 tiedostoa – 601 k

JS

Facebook Connect JS:llä on 174,4 kt ja latautuu 0,69 sekunnissa. Facebook Like Box voidaan lisätä tekstiwidgetiksi kopioimalla iframe-koodi Facebook Developers Like Box -sivulta ja se poistaa JS-tiedoston.

Gonzo-teema sisältää script.js-tiedoston, jonka koko on 101,3 kt. Se sisältää useita skriptejä, kuten:

• fitvids
• flexslider
• jqueryn helpottaminen
• välilehtiä
• selkä venytellä
• prettyphoto lightbox
• elastislide

Isossa taustakuvassa käytetään Backstretchiä, mutta vähintään neljää muuta ei käytetä: flexslider, prettyphoto, elastislide, tabber tabs.

Fitvidit tekevät video upotuksista responsiivisia, joten sitä todennäköisesti tarvitaan.

jQuery Easing vaikuttaa jonkin verran napsautukseen (hakulomakkeen dia).

Lisäksi jQuery Easing (8,1 K) ladataan vielä kerran LayerSlider (26K) -laajennuksella, jota ei käytetä missään.

Poistin käyttämättömät skriptit ja tiedostokoko on pienentynyt 101,3 kt:sta vain 29 kt.

Jakamispainikkeet JS-tiedostoja

Jakopainikkeet verkkosivustolle sijoittava laajennus vaikuttaa melko paljon latausaikaan:

• Plus 1 – 25.8K
• Google Api – 84,2 kt
• Twitter – 84.5K
• Social Bar – 1.8K

Kaikki tämä voidaan ratkaista käyttämällä toista laajennusta ( Jetpack ), joka lataa yhden 35 kt:n JS-tiedoston kaikille painikkeille.

jQuery voidaan ladata Google-kirjastosta palvelimelta lataamisen sijaan.

Addfreestats JS antaa 404-virheen. Suosittelemme käyttämään Google Analyticsia.

CSS

CSS-tiedostoja on liian monta (20), joista osa on ladattu @import-tiedostolla, mikä ei ole paras vaihtoehto suorituskyvyn kannalta.

Olemme yhdistäneet sen, mikä oli mahdollista (joskus js- tai css-tiedostojen yhdistäminen aiheuttaa virheitä) ja meillä on nyt vain 7 CSS-tiedostoa.

Kuvat

Kuvia voidaan optimoida paremmin verkkoa varten (sama laatu, mutta vähemmän kilotavua) ja uskon, että voimme säästää vähintään 5% jokaisesta kuvasta.

Ensimmäisellä sivulla pikkukuvat ovat kooltaan 166x166px, mutta ladatut kuvat ovat suurempia, 300x300px.

Kuvien tulee olla 166 x 166 pikseliä.

WordPress luo liian monta pikkukuvaa:

• 960×677
• 150×105
• 300×211
• 550×387
• 700×426
• 300×300
• 50×50
• 290×166
• 620×310
• 620×350
• 186×186
• 620×220

Sivusto tarvitsee vain:

• 166×166 – ensimmäisen sivun pikkukuvat
• 50×50 – sivupalkin pikkukuvat
• 134×77 – pikkukuvat aiheeseen liittyville viesteille
• 290×166 – pikkukuva luokka-arkistoon

Loput mitat ovat hyödyttömiä ja vievät tilaa palvelimella. Voimme poistaa ne ja poistaa tarpeettoman koodin teemasta, joka käskee WordPressiä tekemään peukalot.

Otimme Lazy Loadin käyttöön, joten vain sivun yläosassa (sivun yläosassa) olevat kuvat ladataan, mikä parantaa huomattavasti havaittua nopeutta.

Optimoinnin jälkeen

Tarpeettoman koodin poistamisen JS-tiedostoista, yhdistetyistä CSS-tiedostoista, oikean konfiguroinnin ja sivuvälimuistin sekä tietokantavälimuistin toteutuksen jälkeen sivusto tekee nyt 48 pyyntöä ja sillä on 634,5K.

Ensimmäisen sivun latausnopeus: 1,47 sekuntia.

Saimme noin 60 prosentin suorituskyvyn parannuksen.

Voimme optimoida edelleen, mutta se tarkoittaisi joidenkin elementtien poistamista, jotka tarjoavat omistajan toivomia erityisiä toimintoja, joten lopetimme tähän.