Customizing K2: Part 5
Hot on the heels of Part 4 comes Part 5. In Part 4 I spent a bit of time on using image maps to decrease load times and save bandwidth. I thought I would expand upon this and dedicate Part 5 to creating a faster loading blog. Most of these concepts can be applied to any website or blog, however they are meant for K2 as it is fairly loaded even at default. Hopefully, by the end of this article your blog and server will be able to handle mass-traffic, such as from Slashdot or Digg, much more easily and help you conserve costly bandwidth. Throughout this article, I used this website optimizer to find out how large each page is and how many items load.
NOTE: If you’re going to copy and paste code, retype the quotation marks and apostrophes - when I posted this code, WordPress automatically changed them to the “fancy” ones and this breaks in code.
Script Slowdown
Weighing in at roughly 47kB, the prototype.js bundled with K2 r167 is a hefty JavaScript framework that allows your K2 blog to have things like livesearch, live commenting and rolling archives. (note that the newer, SVN versions of K2 use a lighter prototype at just 10kB) My general rule of thumb is that while this JavaScript adds some neat features it adds not only to the time it takes to download the file but also gives the browser the extra task of executing such a file. Unfortunately, I have been noticing a trend with many K2 mods using JavaScript effects to have items that control collapsable spaces. The less scripts your user’s browser must download and execute, the better.
If you choose to sacrifice the amenities of livesearch and live commenting for the simplicity and rapid response of the traditional methods, make your way to WP Admin » Presentation » K2 Options. Disable both livesearch and AJAX commenting as below and save.
If you don’t like the ugly Go button that comes with the regular search box, you can disable it so that one must type in a query and hit enter to search. Open up searchform.php and find this block of code at the bottom:
<input type=”text” value=”<?php echo wp_specialchars($search_text, 1); ?>” name=”s” id=”s” onfocus=”if (this.value == ‘find that elusive article’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘find that elusive article’;}” />
<input type=”submit” id=”searchsubmit” value=”go” />
</form>
You will want to comment out the second from last line in that snippet, as below. Luckily, even after removing the search button, pressing enter processes the search query.
Plugins
If you are using the Rolling Archives plugin, deactivate that as well. As far as scripts go, if you are using Mint the more peppers you use, the larger the JS include will become. Most peppers, upon activation, add a bit of extra code to the javascript file. For example, my Mint JS include is roughly 9kB at the time of this writing, with over 10 peppers in use. I have seen other Mint JS files weigh in at only 3kB.
Load times can be increased not only dependent upon how many things need to be downloaded but also from which websites they come from. Loading 5 local files is nothing compared from 5 files each on different servers or websites. Serve as many of the files you can locally, unless your server is slow, then you can offload pictures to a service such as flickr.
Speaking of flickr, if you are using Dave’s awesome flickrRSS plugin now is the time to either completely deactivate it or display a more reasonable number of photos, such as 4. If you cannot live without flickrRSS, at least ensure that caching is enabled. Other plugins or code that display your bookmarks at services such as Digg and del.icio.us can add time to your page loads as your blog attempts to contact each service. I know there is a del.icio.us plugin that has caching, so if you must display your del.icio.us bookmarks, have that enabled. Gravatars can also dramatically increase loading times on popular pages with many comments, but this is one of the things I deem vital and still have enabled on my site. Again, there is the WP-Cron Gravatar Cache plugin to help with loading times.
I have seen many people use more than one form of stat tracking; Mint, Measure Map, Google Analytics, Performancing Metrics and others. Each loads their own JavaScript file, so it is best to choose which one you like and only use that.
Images
This one should be obvious. The more images you have, especially ones not web-friendly, the more likely you are to drastically increase loading times. Images such as your header and footer should be as small as possible. When saving them in Photoshop, utilize the File » Save for Web dialog and save your images as a jpg or your favorite file format, at somewhere between 55-75% quality. Depending on whether your image has text or lots of detail, you can adjust the file quality accordingly. Something more than 50kB for a header image will start becoming burdensome. Take a look at the image maps section in Part 4 to deal with icons in your footer.
In addition to the main images, you can’t forget about the smaller ones such as feed subscription images, social bookmarking icons and the icons that come with K2. Only use those which you cannot go without. I don’t use any of the icons that come with K2, however they are still defined in style.css and still loaded, regardless of whether or not that CSS selector is ever called. Using display: none; on each CSS selector in your scheme isn’t enough. You will have to manually edit your style.css file, commenting out each icon you don’t wish to use. Remember what you did the next time you upgrade your K2.
Particularly, comment out the background attribute for .commentslink if you don’t wish to use the comment icon, .chronodata for the time icon, .tagdata for the tag icon, .commentsrsslink for the RSS feed icon, .trackbacklink for the trackback arrow icon and .commentmetadata for the time icon (again). However, if you will still be using the pieces of K2 where the icons were displayed, you will want to adjust the padding for each so that there isn’t an awkward gap. Each of these uses a line like padding:2px 0 2px 20px;. Add a line such as padding:2px 0 2px 0; to your scheme for each of the CSS selectors of which you aren’t using its icon.
Also, if you are not using livesearch you will want to remove the three images that are called for livesearch in style.css. Comment out the background attributes for #LSResult, #searchcontrols and .LSRow:hover,#LSHighlight,#LSHighlight:hover.
If you are using an image for your background such as a gradient or a pattern for something, as I’m using for my main menu links, consider the size of those as well. For a background all you really need is a 1 pixel wide image that is as high as necessary and the repeat-x attribute. For example, if you want to make an image load in your #page and have it repeat vertically all you need is a 1 pixel high image. Your CSS will look something like this for that background image (this is what makes the shadow in my sidebar):
The original image I used for my main menu diagonal lines was over 200 pixels wide. I was able to open it in Photoshop, figure out how wide it needs to be to properly repeat and cut it down to around 20 pixels wide.
Compress Your CSS
With the default K2 style.css at over 19kB in addition to your own custom scheme, there is an easy way to save some time. Compressing your CSS with a tool such as CSS Tweak performs several things including removing whitespace and comments. With style.css, ela.css and your scheme there is a good amount of time to be saved.
For WordPress to properly recognize style.css, you will need to add this bit of text back to the top after you compress it.
Theme Name: K2
Theme URI: http://binarybonsai.com/wordpress/k2/
Description: The sequel in spirit to <a href=”http://binarybonsai.com/kubrick/”>Kubrick</a>. Developed by <a href=”http://binarybonsai.com”>Michael Heilemann</a> and <a href=”http://chrisjdavis.org”>Chris J. Davis</a>. Share and distribute.
Version: Beta Two
Author: Michael Heilemann & Chris J Davis
Author URI: http://binarybonsai.com/
*/
However, always keep a non-compressed copy of your current stylesheets. Editing a compressed CSS file isn’t the most intuitive so I generally edit the non-compressed file, compress it and then upload it again.
Server Side Woes
Even if you have gone above and beyond optimizing your website with load times in mind, your server might not be as optimized. PHP rendering and fetching data from your MySQL database can take up to as much time as it takes for the browser to download everything, execute any JavaScript files and display the site. If possible, contact your webhost and ask for a PHP performance boosting server add-on such as Zend.
For MySQL, ensure you are running a stable version of MySQL 4.x and not stuck on MySQL 3.x. Some webhosts offer a MySQL optimization service to give your MySQL settings more cache, dramatically improving performance. There was a time when not even my server was able to handle a day of massive traffic, but increasing MySQL’s cache helped dramatically and made my server near invincible.
If you are looking for a webhost with many of these features, take a look at Media Temple’s upcoming (ss) version 6 and their high-performance (dv) line featuring Zend.
When talking about the database, there is also the discussion about plugins making superfluous database calls to be brought up. If you are running many plugins, be weary of ones that might call the database too frequently and crash your MySQL server upon massive traffic. After talking to Brian Benzinger from Solution Watch, I was told to stay away from the Bad Behavior spam plugin for WordPress which consistently killed the MySQL service, by making way too many database calls, on his (mt) (dv) server when under load.
Web Standards
By running clean, valid XHTML and CSS, your readers’ browsers won’t have to waste time guessing what you meant by that blurb of invalid code here and there. Using web standards also has other benefits, as explained by Roger Johansson. Check to see if your XHTML and CSS are valid.
Wrapping It Up
By taking these tips into consideration, I was able to take my website from 266kB down to 115kB. As I mentioned in the beginning, I use the website analyzer all the time. It is very convenient at tracking down what is taking so long to load. If I were to opt for a minimalist approach and not use header or footer images, I could probably get this site down to 70kB. For as many aesthetic tweaks you can do to help load times, there are just as many optimizations that can be done to the server. Get to know what software your server runs and find out what can be done to help you out. Increasing the memory limit for PHP in the /etc/php.ini file is a good way to start, but I would leave that and other server tweaks to your webhost.
Web Page Analyzer is a good share, I’ll make sure to check that out after a little sleep. I’ve been working on cutting unneccessary and redundant items out of my stylesheet for the past couple days as I’ve been cleaning up my theme. I can’t wait for a final version of K2 though with that smaller prototype package, it’s the biggest hit my site takes in loading. Thanks for the tips Stamfewjfve3uktfgeiuwtgw (for those of you who don’t know, that’s how you pronounce Paul’s last name, I spell it phonetically).
Another great article. Not really relevant to me, given my lowly stat count but informative nonetheless. Thanks!
Sweet stuff again Paul, thanks for the pointers. It will be nice to have a site that loads faster than ever before with these tweaks in part 5.
Excellent! thanks for being such a gem to the k2 community
Great ways to cut down on load time. Personally I’ve deactivated my live commenting to save server load. I’d disable live search too but I need to make some modifications to the search script first.
Validating your xhtml and css has SO many benifits it’s unwise to ingnore the task of validating nowadays. Though one thing I’ve noticed is that either K2 or Wordpress seems to spit out invalid code with the comments. Like, this page has 46 errors, and all my posts with comments have a similar amount of errors even though all my other pages (the ones without comments) validate without a problem. It’s hella weird.
Great post. It’s del.icio.us-ed!
If you’re using Lightbox on your site, disabling that plugin will knock off ~15kb of your JS loads. That’s for the 0.5 Plus version, it’ll probably be even more for the newer version, as it’s considerably fancier.
Paul, or others,
How, in today’s day and age of uber bandwidth, does cutting your page’s size help?
I’ve been “out of it” as far as truly being a website afficinado, as I’ve had a baby in the past year, and have just recently finished my MBA…so, I’ve been kind of “booked”.
So, fellow webizens and blog kings, teach me!
Peter,
For example, if you are on a hosting plan where you are allotted only 30GB of bandwidth per month, you can get more bang for your buck by following these tips. Most webhosts charge exorbitant fees for going over your allotted bandwidth.
Also, if your page sizes are smaller, when the server is under extreme load such as from a Slashdot, it will be able to cope better by serving each connection quicker and moving onto the next connection. It is therefore less taxing to the server.
In addition, you want to pay attention to accessiblity. Not everyone has an OC3 connection to the internet as I do, or a Cable/DSL/Corporate connection. Roughly 40% of the web, gasp, still uses dial-up. By serving to everyone’s needs with a smaller website you can ensure that people keep coming back.
Now, if I took your case into a different realm - the one being that “everyone today has huge displays with large resolution” and thus designed my website to make use of them, I would be annoying those still using smaller resolutions. Not everyone is ahead of the tech curve. A gap will always exist. This is why large, professional websites that make use of an AJAX form, for example, make their code degrade gracefully so it can work on all users’ computers.
Just thinking around a bit, it seems feasible to same a few kB by loading the CSS dynamically, dependent upon which page is called. For example, using Extended Live Archives utilizes a stylesheet, ela.css. Instead of calling it for every page, you could make a php conditional so that it is only called on the archives page.
Using a conditional for the JS of ELA helps too, as that’s roughly a 10kb hit
I just changed my header and footer images to .gif’s and now my site is at 90kB. =D
Niiice. I’m still looking for where the ELA JS is called from, it’s probably staring me right in the face!
Nevermind, the newest version of ELA no longer needlessly loads its JS for non-Archive pages. Serves me right I suppose for never bothering to upgrade. My page load is ~110kb now, not bad seeing as how it started at about 220.
You mentioned disabling the seach box’s ‘go’ button.. I’d just mention I threw in a STYLE=”font-size:8pt; background-color:#993333; color:#ffffff” and it looks pretty good. I don’t know how many of my visistors would or wouldn’t know to just hit ‘enter’. Nice article, Stammy. ;-)
Oh and I just noticed, even having disabled livesearch the CSS is still loading the images… is that true or am I just crazy? Do I need to go into the CSS and comment those out, too?
Christ, I swear I looked like three times…
Even if you’re commenting them out it’s still contributing to the size of the stylesheet itself. I completely removed mine, as it’s not difficult to pull them out of a stock K2 stylesheet should I ever need them.
Paul,
From my previous life as a fulltime web developer, some of yoru comments hit home. I definiltey used to and probably still do, live my web life knowing that you have to cater to the lowest commom denominator. I’m just thinking and hoping that the lowest common denominator isn’t someone on Windows 95 with an 800×600 display. Unfortunately, there are probably a handful of folks out there that still use technologies that are, ahem, not so optimal.
I’m going to take this article to heart and try to use it for both my blog and my Axim Users Dot Com (http://www.aximusers.com) site, which uses vBulletin as its backend…I’m sure there are performance and optimization tweaks I can do there…especially since that site is a revenue stream for my “hobby” of running sites.
Paul and others, thanks for your tips.
And Paul, Christos Anesti!
Paul,
I saved your header and footer GIFs as PNGs which knocked off another ~4.5KB; it could be worth doing if you want to shrink the page size even further?
Stu, I had tried PNG’s at first but the gray background was ever so slightly off and it seemed fine with a GIF.
Paul, with each new tutorial, you make me wish the semester was over sooner, so I can spend the summer fiddling with K2.
And, thank you for the shout-out about dialup users. While I get to use DSL at work and at a friends, and T3 (or whatever it is) at school, I am still a slave to my dialup every night at home.
In some areas (well populated at that) DSL is still not available, and cable not really and option. (As in, my parents have a dish, so unless I want to drop the money for a cable connection strictly for the computer, it’s not happening).
I think a lot of tech sites would do well to remember that they do have audiences on dialup, and we don’t like to be treated like that second-cousin-twice-removed that everyone wishes wouldn’t show up at the family reunion.
There will always be people on dialup. So, thanks for making things easier for us.
Paul: I had the same problem on my blog. It seems that on Firefox PC the colors match even if one is gif and one is png. But when I test it on Safari or IE PC they’re off unless they’re both gifs. Weird.
Paul,
I’ve compared your GIFs to the PNGs I saved and the colouring’s identical; did you try saving them from the GIF version because that’s what I did (which will therefore be after the colours have been converted from 24-bit to 8-bit)?
I just spent about 20 minutes trying to get a PNG to show up properly… all to no avail. I have tried saving from the GIF and directly from the PSD. I double-checked the palette to make sure it was using #5A5A5A as the background and it said it was. Regardless of how I saved it, they all generally turned out like this: http://paulstamatiou.com/wp-images/png_no_go.jpeg
Actually I think Ben has hit the nail squarely on the head; it’s a rendering problem. I saved a local copy of your page, swapped the header GIF for a PNG version and it looked fine in Firefox but not in IE. Most bizarre!
Yeah, it’s IE and Safari that for some reason render png’s differently than gif’s. Totally non-logical but it sure seems to be the case.
Great writeups Paul.
I have definitely learned alot from all of these writeups.
Keep them coming!!!! ;-)
How do you add more cache to the My SQL DATABASE??
Thanks for the tips,Paul.
Most of this was over my head. But interesting nevertheless. I think the main thing I’ve learned here is that I’m probably not doing myself a favour by using sidebar widgets. Better to have more control over the sidebar and thus be able to keep a lean front page.
Just to tell you it was a great work !
hi Paul,
I was searching for a solution to change the link and mouse over link colours
and went thru all ur 5 part series, but wasnt able to find…
can you plz drive me to a solution
Hi,
Can someone please point me in the right direction as to how to remove the “Published by” at the top of each post in my K2 themed blog? I just want to make no author for each.
Thanks for any help.
Keith