Google likes fast

Suppose you just bought yourself hosting and you just installed WordPress for blogging or lightweight-CMS-purposes, how can you improve your site’s performance in that case? Easy!

1. speed up PHP: use a caching optimizer (I use APC) to significantly speed up PHP performance (don’t bother  signing up for shared hosting with a company that doesn’t offer PHP with acceleration).
2. cache dynamic output: install the “WP Super Cache” WordPress plugin. Configure and then forget about it; if you create/edit a blogpost, impacted pages are automatically removed from cache.
3. optimize CSS and JS: install the “CSS JS booster” WordPress plugin, which (amongst other things) grabs all CSS and JS from WordPress and Plugins and outputs it in one CSS- and one JS-file (some plugins, e.g. Sociable and WordPress Mobile Pack, might need tweaking of the css media-attribute though)
4. avoid calling 3rd party javascript: tracking (e.g. Google Analytics, which I removed), widgets (e.g. Twitter badges) or other 3rd party gadgets (e.g. AddToAny, which I removed) can slow down your site’s performance significantly
5. optimize images: fire up your favorite photo editor and make that image just a bit smaller, use an acceptable level of compression (I end up between 70 and 80% for JPEG’s, depending on the image) and upload to smushit.com to squeeze out the last optimization-drop (example; I used a 20KB picture from Flickr, resized it to 80%, saved it with 77% compression and smushed it to end up with a mere 6KB).

The impact of a number of these steps can be measured easily; below are the response times of my blog’s homepage (the  html including css, js and images) as measured by Pingdom Tool’s Full Page Test.

1. default Wordpress (on a Linux VPS with 320Mb RAM memory): 6.5 seconds
2. (1)  with PHP APC activated: 4.1 seconds
3. (2) with WP Super Cache: 3.1 seconds
4. (3) with CSS JS Booster: 1.3 seconds

So there you have it, from 6.5 to 1.3 seconds in only 5 easy steps! WordPress specific, but easily applicable to other platforms as well. Now go and make your site fast! And then go and make it even faster!

Possibly related twitterless twaddle:

• blog.futtta.be going mobile with WPtouch
• AddToAny removed-from-here
• Google Webmaster Tools Irony

So if you happen to have problems with the positioning of 2nd (or later) pages in iframes (due to the top part of the iframe not being visible in the ‘viewport’), just upload frameMagic.js to your webserver and add the following to the head of your html to ease your iframe-blues;

<script type="text/javascript" src="path/to/frameMagic.js"></script>

Optionally you can specify which iframes are to be treated this way (excluding the other ones) by doing

<script type="text/javascript">
var fM_conf="iFrame1,iFrame3";
</script>

You can find more information and examples on http://futtta.be/frameMagic.

Possibly related twitterless twaddle:

• 5 tips to tackle the problem with iframes
• HTTP upload MIME type hell
• AddToAny: removing the “spy” from the share-ware

Dus nee, deze blogpost gaat echt niet over Gilles Peterson. Als ik niet in een eindeloze loop naar GP’s Worldwide luister, stem ik dikwijls af op KCRW, een radiostation uit California, USA. En wat ik daar hoorde heeft me blij gemaakt;

Bovenstaand YouTubeken is “Ambivalence Avenue” van Bibio (zie ook z’n myspace pagina), artiestennaam van de Brit Stephen Wilkinson, die iets geloofwaardig met electro en folk doet. Ge moet maar eens rondsnuisteren op YouTube, hij heeft zo nog leuke melodietjes.

Het zal wel iets met het grondwater of met Stonehenge te maken hebben, maar Bibio’s vernieuwingsdrang is niet nieuw. Eind jaren ‘60 begin jaren ‘70 bijvoorbeeld, deden Terry Cox, Bert Jansch, Jacqui McShee, John Renbourn en Danny Thompson samen prachtige dingen met jazz, folk en blues. En nu ik zo geheel toevalligerwijze aan Pentangle (want zo heette hun groep) heb, ben ik ervan overtuigd; Bibio is ook een fan en onderstaande “Light Flight” heeft hem diep geraakt;

Possibly related twitterless twaddle:

• Hollandse trauma’s
• The devil in Ms. Sandoval & Massive Attack (NSFW)
• Gratis te krijg: Google Wave invites

1. Google loves doesn’t hate iframes done right!

Although Google is rather vague about the subject, iframes and SEO do not have to be mutually exclusive. But you will have to make sure it’s your main page that shines in search results, not the iframe-content. The main page (where the iframes are defined) has to be more then a mere placeholder for one or more iframes. Migrate as much information (titles, description and other text) from the iframe-content to your main page, which should describe what goes on in the iframe(s). Use the iframe title-property and insert alternative content between opening and closing iframe-tags. A quick example:

<h2>Calculate your mortgage rate</h2>
<p>Calculating your mortgage rate was never easier; just enter the loan-amount and the duration below!</p>
<iframe src=”http://page.url/iframe-container-page1″ …  title=”Calculate your mortgage rate here”>Your browser does not seem to handle frames properly, but you can calculate your mortgage rate <a href=”http://page.url/iframe-container-page1″>here</a></iframe>

2. Own the stage

Avoid visitors viewing the iframe-content out of the context of the main page (e.g. because they followed a link in search-results). Add javascript to the iframe-content to check if it is accessed stand-alone and redirect to the main page (or explain and provide link to the main page) if that is the case.

if(self.location==top.location) top.location.replace('http://contain.er/page-url/here');

3. Don’t draw blanks

When a visitor clicks a link at the bottom of a long page inside an iframe and the target is a shorter page inside the same iframe, then he/she will see a blank page which is … well not very usable, no? The (hackety-hack) solution; tell the browser to scroll to the top of the iframe each time a new page in it is loaded, by calling the function below (with the iframe id as parameter) when the iframe’s onLoad event fires:

<script>
var firstrun = new Object();
function frameMagic(el) {
if (typeof firstrun[el] === ‘undefined’) { firstrun[el]=true; }
else { document.getElementById(el).scrollIntoView(); }
}
</script>
<iframe id=”iframe” onLoad=”frameMagic(‘iframe’);”>

4. Your users really do need scrolling=”auto”!

Help your visitors access all iframe content no matter what configuration they’re using: don’t disable the iframe scrollbars! Disabling them will render the iframe partially inaccessible for some of your users, because the size your iframe-content needs depends on things outside your control such as operating system & versions (e.g. font & screen resolution), browser (e.g. css-implementation) and browser configuration (e.g. non-default font-size). Instead define a reasonable iframe-width and height, make the iframe-content width flexible (fluid) and let the browser decide if a vertical scrollbar is needed.

5. Smart sizing without scrollbars

If you really really really don’t want scrollbars, if you want your iframe to adapt to the size needed by the iframe-content automatically and if you’re not afraid to experiment; there are some nifty javascript-solutions that allow the iframe-content to communicate the required height to the main page. Check out Framemanager (stand-alone, has some issues though) and the JQuery-postmessage iframe-example (which does everything in javascript, which isn’t really ideal from an accessibility point of view).

Conclusion: iframes aren’t necessarily evil (either), but you’ll have to make a small effort to render them somewhat SEO- and user-friendly.

Possibly related twitterless twaddle:

• Fix iframe-positioning problem with frameMagic.js
• 5 valuable Cufón tips
• Embedding YouTube HTML5-video with newTube

Dat alles om maar te zeggen dat ik recht van spreken heb, als het over Hollandse taalgevoeligheden gaat. Want ik heb me gisteren ongelofelijk zitten ergeren. M’n vrouw heeft me verplicht om “De eenzaamheid van de priemgetallen” van Paolo Giordano te lezen. Aangezien Paolo een Italiaan is, heeft hij die titel niet zelf in het het Nederlands gezet. Nee, Mieke Geuzebroek en Pietha De Voogd hebben dat voor hem vertaald, daarin aangemoedigd door het (Nederlands) Fonds voor de Letteren.  En Mieke en Pietha, dat zijn dus Hollandse meiden. Echte Nederlanders, geen drie-kwartjes zoals ik. Dat leid ik alleszins af uit hun bijwijlen tenenkrullende vertaling. Want Mieke en Pietha; als Alice “in haar broek poept” en een pagina later “de gore derrie naar beneden voelt lopen”, dan knapt er iets in mijn getraumatiseerd taalgevoel-orgaan. Poepen is lekker, derrie bestaat niet en Goor is een voetballer of wielrenner, ik wil ervan af zijn. En als Mattia naar een partijtje mag in hoofdstuk 2, gaat dat dan over D66 of de ChristenUnie?

Versta me niet verkeerd, het is een mooi boek -beetje dramatisch misschien- en de vertaling leest verder best wel vlot. Maar ik wou dat ik een Italiaan was, of tenminste voldoende Italiaans verstond om het origineel te lezen. Of dat ik dan toch een echte Hollander was, want dan zou ik ook niks gemerkt hebben?

Anyway, I showed him IE8 and Firefox 3.5 (both were installed as well) and he recognized Firefox as the browser he was most familiar with. So I uninstalled Chrome, hid IE8, upgraded him to FF 3.6 and also installed the “Vacuum Places improved” and NoScript add-ons.

“Vacuum Places improved” cleans up the places sqlite database where Firefox stores bookmarks and history and which can become very big over time.  When tweaking the options (“hide icon” and “auto-vacuum every 20 browser starts”) it was a great way to invisibly tune browser performance, but it turns out Firefox 3.6 vacuums places.sqlite automatically (when  idle, every 1 to 2 months). So Pierre, if you ever read this; remind me to uninstall “Vacuum Places improved” next time!

NoScript is a whole other beast; it is a add-on for the security-conscious tech-head, which by default disables javascript, flash, java, … It’s a great add-on, but it is very disruptive and as such totally unfit for novice users. Unless you change the configuration off course, because modifying these options makes NoScript a must-have addon for both you and your grandma;

• General: check “Scripts Globally Allowed (dangerous)”
• Embeddings: uncheck the 8 “Forbid” options, check both “untrusted” and “trusted” for Clearclick protection
• Appearance: uncheck “Status bar icon”, “Status bar label” and “Contextual menu”
• Advanced/XSS: check “Sanitize cross-site suspicious requests”

Although the first option specifically claims it is dangerous to do so, these changes render NoScript into an add-on that provides a lot of extra security (protecting against clickjacking, cross-site scripting and implementing support for x-frame-options and Strict Transport Security) without bothering users with new UI-elements containing incomprehensible questions, messages or options.

Because web security is not only about protecting against threats, but also about not breaking novice users’ expectations of how your secured browser (and the web) looks and behaves.

Possibly related twitterless twaddle:

• Google inadvertently kills Talk badges with x-frame-options
• Browser enforced web application security; IE8 safest?
• Warning: your computer might be infected!

Eén liefde is echter gebleven; radio! Ik en mijn radio, we go a long way back; als kind luisterden we met m’n ouders naar “Die tijd van toen” of “Te bed of niet te bed”. Toen ik 11 was, hoorde ik met een transistor-radiootje (dat ooit van mijn moeder was) Lutgart Simoens van onder m’n hoofdkussen. Als 14-jarige speurde ik in spanning de FM-band af tussen 100 en 104 Mhz, op zoek naar illegale vrije radio’s. Toen ik 17 was hoopte ik zelf plaatjes te kunnen draaien bij een héél lokale radio, maar dat is er nooit van gekomen. En later, als twintiger, kocht ik een wereldontvanger om naar Spaanse of Marokkaanse  staatsradio te kunnen luisteren, of naar een verdwaalde Amerikaanse conservatieve talk-radio en als dertiger schuimde ik het internet af op zoek naar online radio, kicken op dat middengolf-gevoel van 16kbit/s streaming in Realplayer.

Nu, als veertiger, download ik podcasts, luister ik in uitgesteld relais naar Gilles Petersons WorldWide op StuBru, stem ik in WinAmp af op KCRW music, ga -afhankelijk van m’n stemming- slapen met “Jazz” op Klara of  “Select” op StuBru. En soms, als ik ’s nachts niet kan slapen, dan gaat de lamp van de nachtradio nog eens branden en dan val ik in slaap met muziek van Neil Young, Tom Robinson (“Listen to the radio” vanzelfsprekend) of onlangs nog met deze vergeten parel van 10000 Maniacs;

Nee, hand-gekozen kwaliteitsmuziek van samenstellers en presentatoren met een passie voor de plaatjes die ze draaien, daar kunnen last.fm, Pandora of Spotify wat mij betreft echt niet mee concurreren. Ik ben immers een Radiohoofd.

Possibly related twitterless twaddle:

• Gilles Peterson & Thom Yorke draaien rare plaatjes
• electro-jazz-folk: Bibio hartje Pentangle
• Hollandse trauma’s

var a2a_config = a2a_config || {};
a2a_config.no_3p = 1;

These two lines of javascript, which have to be placed in front of the http://static.addtoany.com/menu/page.js script-include, should disable all current and future 3rd party tracking. I hope the web-guys from e.g. deredactie.be and standaard.be (and there are many others) implement this as soon as possible!

So now we can opt-out from having our visitors being spied upon by media6degrees, what more could one want? Well, since you’re asking, here’s a small list of things AddToAny could really should do;

• transparency; tell users that their visitors’ information will be shared with 3rd parties (in all relevant places)
• documentation: show them how to “remove the spy” on the AddToAny api page (“no_3p” isn’t there)
• ease-of-use: allow the tracking to be disabled with a simple checkbox in the WordPress and Drupal plugins

The opt-out code is a important first step and I’m sure concerns such as those voiced on the WordPress-forums will help AddToAny to further make the right decisions!

Possibly related twitterless twaddle:

• AddToAny removed-from-here
• Enhanced privacy for embedded YouTube
• Speed up your (WordPress-)site!

Sexy as a iPhone-UI mimicking webapp (based on e.g. iUI or JQTouch) might seem, it does have a number of important shortcomings:

• it is sub-optimal for the web, even on iPhones, as the context is very different (e.g. in terms of responsiveness)
• the iPhone-UI-approach does not make a lot of sense on non-iPhone high-end touch devices
• it will probably not work on mid- and lower-end phones at all

So yes, web-developers should try to build mobile sites that render on as many devices/ browsers possible, as we do on the non-mobile web. Unless you’re willing to invest in several sites for different handsets, building for one specific device is a bad choice, however good the browser might be (and Safari Mobile indeed is great).

That’s why I decided to switch from the iPhone-centric WPTouch (which I installed only 3 months ago) to “WordPress Mobile Pack” for this blog. WMP offers great mobile functionality out of the box;

It includes a mobile switcher to select themes based on the type of user that is visiting the site, a selection of mobile themes, extra widgets, device adaptation and a mobile administration panel to allow users to edit the site or write new posts when out and about.

When running the MobiReady test to assess how “mobile-ready” my blog is, I get a great score of 4.35/5 (page size being the main remaining issue). So thanks for ranting PPK!

Possibly related twitterless twaddle:

• Facebook mobile websites face-off
• HTC-dude, where’s my keyboard?
• Google hates HTML5, pushes Gears?

Goeie muziek “favorite” ik steevast ook op YouTube (en die komt zo dan ook automatisch Facebook binnen), maar een echte clip van “Paradise Circus” kon ik daar vreemd genoeg niet vinden. Een Facebook-friend (bedankt Hilde) was gelukkig beter geïnformeerd:

de oorspronkelijke videoclip is ondertussen zwaar gecensureerd wegens teveel kiekevlees bij sommigen

En inderdaad, de videoclip is een nietsverhullende (vandaar: “not safe for work“, geloof me) mini-documentaire over de nu 73-jarige voormalige porno-actrice Georgina Spelvin (ze heeft een eigen site en een blog) en haar rol in de jaren zeventig porno-klassieker “The Devil in Ms. Jones“. In de docu-clip wisselen interview en pornografische fragmenten uit de film elkaar af met “Paradise Circus” op de achtergrond en (als ge verder kijkt dan uw dinksken lang is) het geheel is meer dan de som van der delen:

Possibly related twitterless twaddle:

• electro-jazz-folk: Bibio hartje Pentangle
• Over Berlusconi, Hitler en (on)geoorloofd geweld