#StandWithUkraine
Andrey “Rarst” Savchenko —  — WordPress — freewaregenius, optimize, pagespeed, performance, speed, yslow

Optimizing Freeware Genius blog performance

nThere had been more than one mutual mention of this blog and Freeware Genius, with joint Appnews site on top. Technically Freeware Genius is WordPress-based software blog, very much like mine. But Samer seems to have has family duties and social life (unlike me) and has less time for ironing out technical nuances. :)

As result most of our conversations touch on performance issues, themes and such. Latest theme change over there hadn’t resolved any issues and added few fresh ones. So I offered my help for a little bit of backend cleanup.

Initial state

Real mess. Blog seemed to be heavy in every department – text, scripts, images and server-side performance.

YSlow showed somewhat grim picture with heavy page weight and mediocre total score:

freeware_genius_tuneup_before

freeware_genius_tuneup_before

Heavy sites are no rarity nowadays, but it matters a lot how that weight is distributed and loaded. Long pauses and slow initial loading are efficient turn-offs. And there were plenty of those.

On WordPress side there were over hundred (ouch!) installed plugins in need of major cleanup (nuke whatever isn’t needed).

Theme

Suffusion is one of those modern themes, packed full of features and user-friendly options in administration area. It screams awesome. That is until you look under the hood.

Rich functionality came at cost of:

Cherry on top that because of frequent updates I couldn’t even touch theme files, any changes to theme are nuked on update. Creating child theme seemed like an overkill, in the end I found an option to hook own PHP file and used that for modifications.

Few days into process new version of theme cleaned up its database performance (and gave me some grief with update).

Cache

Blog used WP Super Cache – popular and proven choice, but not my personal favorite. I had recently moved my own blog to W3 Total Cache, latest and greatest in niche. Its features seemed like natural match to what I had to solve so I swapped to it.

Aside from static page cache it took care of:

  • page compression and minification;
  • combining style sheets and scripts, also with compression, minification and moving scripts to footer;
  • caching database queries.

There was usual (it seems) hiccup with minification – files refused to generate. This time it took disabling pretty permalinks options to solve.

Tweaks

  • theme scripts were jQuery-dependent, so I made a tweak to load minified version of library from Google CDN;
  • theme allowed to drag and minimize sidebar widgets (more scripts and CSS, great) – as useless feature as it gets, I nuked it by removing function that outputs it from theme hook;
  • some of images were linked without www part in URL and generated redirects every time;
  • changed Google Analytics code to newer asynchronous one;
  • favicon was hosted several levels deep and served with wrong content type, moved to site root and fixed type with AddType image/x-icon .ico in .htaccess;

Headers

Page Speed noticed missing expiration headers. What they do is inform browser how long is it ok to store stuff before checking it again. Missing (or worse – wrongly setup) headers can cause re-downloading of files more than necessary and slow browsing from page to page.

I went with .htaccess rules that work fine for me, except that I set shorter time for JavaScript to prevent issues from concatenation and possible changes of combined file:

ExpiresActive On
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 day"
ExpiresByType text/x-javascript "access plus 1 day"
ExpiresByType text/javascript "access plus 1 day"
ExpiresByType text/css "access plus 1 day"
ExpiresDefault "access plus 1 hour"
<Files index.php>
Header append Cache-Control "public, must-revalidate"
</Files>
FileETag MTime Size

Leftovers

  • still very image heavy, not something that can be easily fixed – will take major styles cleanup and tweaking how post excerpts work;
  • one of advertisement networks seems nuts – they load pack of over ten scripts of considerable size, Samer contacted them about better version or something, no results so far;
  • VPS hosting used feels sluggish and I was unable to do anything about long (1-1.5s) page generation times, will take some lengthy talks with support to figure such out.

Results

So here is YSlow opinion after tweaks:

freeware_genius_tuneup_after

freeware_genius_tuneup_after

Page was only slimmed down by ~25%. But what matters is where those percent are:

  • text parts where greatly reduced in size (almost 6x), which means pages show up and render faster;
  • scripts were reduced and moved to footer, which means they don’t get in the way of initial page loading.

While actual download times are still flaky, blog now renders page considerably faster which matters a lot for visitors.

Overall

Clearly room to improve, but parts that matter did get much needed boost. Still… several year of unchecked growth and it is pretty much impossible to get blog back to slim overnight.

Related Posts

36 Comments

  • Sayontan #

    Interesting observations, but they require some qualification:
    # theme scripts were jQuery-dependent, so I made a tweak to load minified version of library from Google CDN;
    WP's versions of JQuery are minified, AFAIK, and so are most of Suffusion's scripts (the ones that aren't are not very large). So apart from the fact that the CDN versions are probably cached for a lot of people this wouldn't give you much of a benefit, that too, only during the first load.
    # theme allowed to drag and minimize sidebar widgets (more scripts and CSS, great) – as useless feature as it gets, I nuked it by removing function that outputs it from theme hook;
    You could have simply disabled Drag and Drop from the Options pages - that is upgrade-proof and it doesn't load any of the DBX scripts (CSS or JS). BTW, you will be surprised to learn how many people went up in arms when I suggested the removal of this feature. Just my 2c.

  • Rarst #

    @Sayontan Google hosts both minified and non-minified version. WP version is minified, but another issue that it isn't up to date. 1.3.2 as of WP 2.9.2 vs 1.4.2 being latest jQuery release, which Google does offer. Also since blog has large amount of HTTP requests, spreading them over different domains starts to count. Must have missed that option. I didn't have enough time dedicated to this to go over all of them. By the way stripping dbx.css kinda ruined headings in widgets. I actually left in as simple fix (concatenated with rest of styles). Well, there would be user for any feature. I just think there won't be enough of those to justify 46KB more of JavaScript for everyone to load. :) Good luck with development! I might not be a fan of your theme (I prefer slimmer and closer to code solutions), but it seems there are plenty of people who are.

  • Optimizing Freeware Genius blog performance #

    [...] Especially interesting considering that Google has started to use site speed as a ranking factor. Optimizing Freeware Genius blog performance | Rarst.net A person hears only what they understand. Reply With Quote [...]

  • Jason H #

    Great article. Interesting tweaks. # VPS hosting used feels sluggish and I was unable to do anything about long (1-1.5s) page generation times, will take some lengthy talks with support to figure such out. Have a feeling that's gonna be there until a different host than MediaTemple is used.

  • Rarst #

    @Jason Glad you like it. :) According to Samer blog is no longer hosted at MT, he switched to Rackspace Cloud.

  • Jason H #

    Ah, good for him!

  • Rarst #

    @Jason Well... Judging by those 1.5s generation times - not so much. By the way it isn't even slow database, it's PHP side that lags for some reason.

  • How to speed up Wordpress: a case study | freewaregenius.com #

    [...] my site, and he did a fantastic job. You can read all about what he did in his blog posting about how to optimize and speed up Wordpress. [...]

  • Ishan@ILoveFreeSoftware #

    This topic is really close to my heart, as I have been struggling with similar problem with my website. I also tried W3 Total Cache, but found that it did not combine by CSS files. I tried all the settings, but did not work. Any idea what I might be missing?

  • Rarst #

    @Ishan I had issues with combining CSS both at my blog (somehow resolved itself) and at Samer's (as described in post - it worked after disabling pretty URL for combined styles file). I think if nothing helps common advice at moment is to try development version of plugin. You can also try contacting W3 total cache developer with bug report (there is tab for that in W3 settings). He is most helpful and responsive. Your blog is quite snappy by the way. At least comparing to what Freeware Genius was before tweaks. :)

  • Arafat Hossain Piyada #

    I just check Freeware Genius and I must say you done a great job. Thanks for explaining the procedure you follow. We can now optimize our blog in certain places.

  • Tomas M. #

    Good article! another way to reduce queries is hardcoding some WP options right in the wp-config file. I use these: define('WP_HOME', 'full link to your site'); define('WP_SITEURL', 'full link to your site'); define('TEMPLATEPATH', '/home/website/wp-content/themes/your-theme'); define('STYLESHEETPATH', '/home/website/wp-content/themes/your-theme'); Also I like to disable post revisions: define('WP_POST_REVISIONS', false);

  • Rarst #

    @Arafat Hossain Piyada Thank you. :) It isn't really a procedure. Was more chaotic, just looks nice and orderly in the post, heh. Most of these tweaks and things to check I learned gradually, while tweaking this blog. @Tomas Thank you. :) I've seen those defines around, but as for me they don't make noticeable performance difference. Those values are queried and cached early and aren't really resource hog. On other hand hardcoding them adds clutter to change when moving to another hosting. Yep, disabling post revisions is a good idea if they are not needed. But it's more of an admin-side improvement, I don't believe it makes noticeable difference to site load times. That is unless database has multiply thousands of post and revisions. Rarely the case.

  • Ishan@ILoveFreeSoftware #

    Thanks for those suggestions buddy. i will try those out. Even I think that my website is pretty fast, but Google considers it slow. Google seems to be benchmarking websites with itself :)

  • Rarst #

    @Ishan You mean that tab in webmasters tools? I think it is nuts. You have to strip site bare to get in green there. May work if your home page only has search form, but not quite with real site. :)

  • Klemen #

    Hi Rarst. Great post! I need to get down to optimizing my blog/theme, too, since it's quite image heavy and I wouldn't like people to go away before they even see a first photo :)

  • Rarst #

    @Klemen Glad you liked it. Your blog's core seems light enough, I mean it is same theme I use... Ok, it is same theme as the one I started with all those months ago. :) Indeed very image heavy. You should consider showing excerpts instead full posts. And maybe some cute animated slider to show several photos and that blog has those.

  • Prepping for diploma project | Rarst.net #

    [...] – some of the most thorough and deep posts on topic; also Samer made me a thank you gift for optimizing blog in form of their book, which I am now reading;Scribu – not very prolific blog, but some excellent [...]

  • Jason H #

    Glad to know I'm not the only one that's having a hard time getting my load time down for Google. I'm also looking for an alternative to FloatBox Plus. Right now it uses a number of CSS and .js files. Any recommendations for a light image viewer that might consist of a single .js and .css file?

  • Rarst #

    @Jason I still hadn't warmed up to image viewers. They suck for my taste and I much prefer 1:1 pics like I do here or simply links to full images. So nothing I can suggest.

  • Jason H #

    Thanks. I've switched back to just linking to the full images. The viewers are nice because then the visitor doesn't have to leave your page. I guess the way to combat that is to just have quality content that makes them want to come back and if the page is faster/snappier that seems more likely to happen.

  • Rarst #

    @Jason Well, I am inclined to believe that visitor that wants to leave will and visitors that wants to stay will just as well. Took some years but people learned to wield back button well. :)

  • Visit my site and it tries to download a GZ file - WordPress Tavern Forum #

    [...] is concatenating, minifying and compressing styles and scripts. I recently did light (relatively) performance tuneup at Freeware Genius and I just basically fed W3 lots of CSS and JS and it produced single file for each automagically. [...]

  • Optimize and Speed Up WordPress - Raymond.CC Forum #

    [...] and Speed Up WordPress For any of you friends that have a WordPress-based blog, check this out: https://www.rarst.net/web/freeware-genius-tuneup/ __________________ I'm lost...I've gone to find myself. If I should return before I get back, [...]

  • Estanislao #

    Hi R, Thanks for a very useful post. You and W3 Total Cache have helped me ALOT with the explanations and the example. All the best Estani

  • Rarst #

    @Estanislao You are welcome. :) Glad if was of use to you and good luck with your optimizations.

  • Case Study – How to Optimize Popular Wordpress Sites :: TinyHacker #

    [...] Optimizing Freeware Genius blog performance [...]

  • Leaf. #

    Hi. Thanks for the article. Wanted to ask about your .htaccess rules, because I know not much about them. You use a relative ""access plus (time)"" format. Is that more beneficial than a absolute date? I'm running with a different format which is .... Header set Expires "Fri, 10 Jun 2011 20:00:00 GMT". ..... though I like the sounds of relativity better, and the ExpiresByType gives added flexibility.

  • Rarst #

    @Leaf For the long-cached content like images it makes no difference. However for content like CSS that might change it is better to set shorter relative times. Otherwise you might make changes to CSS but some visitors will remain stuck with old version. Another issue to be careful about is default expires. I managed to screw up considerably once - moved to another hosting, it had different type for JavaScript files and my rules back then ended up prohibiting caching JS completely. I wondered why is it so slow for few weeks. :) Current set of rules I quoted in post works nicely for me so far and seems to fit taste of diags tools like YSlow.

  • Devon #

    Only problem is that you can't do anything when you use toolbars and other external scripts. Just install Meebo Bar, Wibiya or even just some "relevant articles" script. A rank... and then F rank. Terrible :(

  • Rarst #

    @Devon Yep, external scripts can be real performance killer. Actually W3 can fetch them for you and re-serve with bells and whistles, but that is clearly not native and can easily break things. Myself I just try to keep amount of external scripts to the minimum. Currently I only use Google AdSense and Analytics at this blog.

  • &ldquo;Digging Into WordPress&rdquo; book review | Rarst.net #

    [...] WordPress materials as well.Samer of FreewareGenius bought me a copy as thank you gift for optimizing his blog’s performance and I found to read it time this week.Topics coveredBook consists of over ten large chapters, which [...]

  • Charleston #

    Thanks for informative post, Rarst. Is it worth it to switch from super cache to W3 cache? Have tried it but the setup seems too complicate and hv switch back to super cache. Heard there's not much different. Wp super cache has CDN options too. Just wonder...is it worth it?

  • Rarst #

    @Charleston Sorry, I have no experience with more recent Super Cache versions. If you don't need/want more complex options then either plugin should do nicely for basic static caching.

  • sanjeev #

    what you think of using w3 cache plugin..will it help alot...for sites

  • Rarst #

    @sanjeev As I wrote in post it is feature-rich and works nicely.