Blog optimization – just another ​case study

Aghiuta.com is a media monitoring and politics blog written by Florin Popescu. Here’s our WordPress optimization we did for this blog.

Before optimization

First page loading speed was 4.3 sec.

The homepage has 86 requests and 1.3 MB.

• 14 javascripts – 505.6 k
• 20 sites stylesheet – 41.1 k
• 23 files – 601 k

JS

Facebook Connect JS has 174.4K and is loaded in 0.69 seconds. The Facebook Like Box can be inserted as a text widget by copying the iframe code from the Facebook Developers Like Box page and that gets rid of the JS file.

Gonzo theme includes a script.js file that has 101.3K. It includes several scripts such as:

• fitvids
• flexslider
• jquery easing
• tabber tabs
• backstretch
• prettyphoto lightbox
• elastislide

Backstretch is used for the large background image, but at least four of the others are not used: flexslider, prettyphoto, elastislide, tabber tabs.

Fitvids make video embeds responsive, so it’s probably needed.

jQuery Easing makes some effect on click (the slide from the search form).

In addition, jQuery Easing (8.1 K) is loaded once more by the LayerSlider (26K) plugin which is not used anywhere.

I removed the unused scripts and file size has decreased from 101.3K to only 29K.

Sharing buttons JS files

The plugin that puts the share buttons on the website has a pretty big impact on the loading time:

• Plus 1 – 25.8K
• Google Api – 84.2K
• Twitter – 84.5K
• Social Bar – 1.8K

All this can be solved by using another plugin (Jetpack) that loads a single JS file of 35K for all the buttons.

jQuery can be loaded from Google Library instead of loading it from the server.

The Addfreestats JS give a 404 error. We recommend using Google Analytics.

CSS

There are too many CSS files (20), some loaded with @import which is not the best option for performance.

We have combined what was possible (sometimes combining js or css files throws errors) and we now have only 7 CSS files.

Images

Images can be better optimized for the web (same quality but less KB) and I think we can save at least 5% of each image.

On the first page, thumbnails are 166x166px in size but the loaded pictures are larger, 300x300px.

The images should be loaded at 166x166px.

WordPress creates too many 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

The site only needs:

• 166×166 – first page thumbnails
• 50×50 – thumbnails for sidebar
• 134×77 – thumbnails for related posts
• 290×166 – thumbnail for category archive

The remaining dimensions are useless and occupy space on the server. We can delete them and eliminate the unnecessary code from the theme that tells WordPress to make those thumbs.

We implemented Lazy Load so only the images at the top of the page (above the fold) are loaded which gives a major improvement in perceived speed.

After optimization

After removing unnecessary code from JS files, combined CSS files, correct configuration and implementation of page cache and database cache the website now makes 48 requests and has 634,5K.

First page loading speed: 1.47 seconds.

We achieved a performance improvement of around 60%.

We can optimize further but that would mean removing some elements that provide specific functionality desired by the owner so we stopped here.