Tackling this above-the-fold CSS issue

Performance Optimization is somewhat like housekeeping. If you don’t take care of it regularly, the shit piles up. My history of our web performance goes back almost five years now and what started as a blazin’ 94 once was now a 76 while mobile, which was never really good, dropped from the mid-seventies to the high-fifties. Even though I optimize all images and write as less code as possible.

I came across these horrifying numbers because one of our main competitors relaunched recently and while pointing at him and laughing at his numbers (52 Desktop, 51 Mobile) I had to admit that ours aren’t really great either.

Running the Erzgebirge-Palace through PageSpeed Insights spoiled two obvious issues: The long-avoided above-the-fold render-blocking stuff and the trust seal. But that will be a different story, we will focus on the render-blocking css for now.

The core layout for Erzgebirge-Palace is ten years old now and also it has clean markup which made reponsive retrofitting quite easy there is no build process or anything near to it. So the CSS is a little bit messy. Identifying the above-the-fold styles manually was not an option, but hey, Smashing Magazine tackled this issue already two years ago. I came across this article after I unsucessfully tried to run a simple gulp task with the critical plugin by Addy Osmani.

While gulp just spit errors into my console the grunt task by Ben Zörb worked right away and returned a pretty good result. I had to add some more code as there happen things on the page the plugin cannot be aware of as different headers during the holiday season and different headers for different languages. But in the end it was less work than I expected and the result gives me now 92 on Desktop and 91 on Mobile (also resolved the trust seal, though).

All numbers given are from Google PageSpeed Insights. While this tool is ok to do a quick check on your site’s performace you should rely on other tools when actually optimizing your website, my tool of choice here is Webpagetest.

You can’t fix what’s not broken, 1&1

You can surprise people when you tell them you own more than 100 domains. Currently I have 118 domains in my portfolio. Some have website or mail services, some are for later use and some just redirect to another domain. This is the case for the domain in question.

I received an email from 1&1 last thursday telling me the website at www.example.com is infected. Indeed, the website shows a warning page when accessed with Google Chrome, however, it redirects to www.example.org. This is the infected website. So I told 1&1 that this is a false positive because this is just a redirect and the domain the redirect points to is not under my control. I also asked them to check their systems so they don’t bother me with these false positives in the future.

The reaction was exactly what you expect from 1&1: They told me example.com (which was not infected) is under my control and I should fix this ASAP. Well, you can’t fix what’s not broken and so I send them a screenshot with the following:

matthias:/htdocs/example.com/httpdocs # ls -al
total 8
drwxr-x---  2 examplecom   psaserv   22 2011-03-01 10:22 .
drwxr-xr-x 13 root         root    4096 2011-04-10 21:48 ..
-rw-r--r--  1 root         root      66 2011-03-01 10:22 .htaccess
matthias:/htdocs/example.com/httpdocs # cat .htaccess
RewriteEngine On

RewriteRule .* http://www.example.org/ [L,R=301]
matthias:/htdocs/example.com/httpdocs #

So I have done exactly nothing but 1&1 congrats me for solving this issue. They don’t get the point. And because of that I will have to life with these false positives in the future.

So this is a relaunch

So this is a relaunch. But not only the look and feel of this blog changed, other changes are coming along. The old version had the claim „Aus dem Alltag eines Halbtagsselbständigen” („From the everday life of a part-time self-employed”). This claim is gone because it is no longer true. I quit my other job effective April, 30th and I’m now solely selling cuckoo clocks for a living.

This blog is now responsive. As I hadn’t had the time to do it on my own I used the Tatami-Theme by Elma Studio. There is a lot of good stuff in this template and you can learn a lot from just using it. Of course there are some things I don’t like, too. But I guess that’s the price you have to pay when you use something off-the-shelf.

I also want to use this relaunch to get a consistent line regarding my blogs. So this blog will focus on work-related things and will be in english most of the time. Thanks to the Tatami-Theme I can now also post quotes, links and videos in a more tumblelog-style. Blogpotato will become (or remain) the geek stuff blog in german and I will continue to blog about becoming a vegan on Ist mir egal, ich ess das jetzt einfach (also in german, the URL translates to „I don’t care, I just eat this now”). And, if this wouldn’t be enough: I bought a flat lately which is currently under construction. Thoughts on this subject (in german) will be published on K12.

The future of testing is yellow

Pingdom, my favourite service for monitoring my servers, released a new tool yesterday that saves you from becoming a click monkey: Transaction Monitor.

What it does is accessing your webpage, clicking links, filling out forms and checking on the results (URL, Status Codes, etc.). I just implemented it for checking all of our stores checkout processes once a day.
Setting up is straigt forward and easy (as long as you have a check left in your Pingdom account). The Check editor offers context sensitive suggestions on actions and validations and has instant feedback on how long it took to perform the action and wether it was successful or not.
check-editor

So with the Transaction Monitor annyoing repetitive task can be automated and thanks to that performed even more often as when executed manually.

check

For some inexplicable reason however there is an artificial limit on the number of steps you can add to a check which is currently 25 and limits the usefulness unnecessarily.

#btconf – Take 2

I was very exited to be part of beyond tellerrand 2012 and I didn’t get disappointed.

While the conference in 2011 was great, this year it was even greater. And I got a sneak peak on next years speakers and 2013 might be even greaterer. And there is another good news: We won’t have to wait a whole year this time as Marc switches the dates for Play! and Web and the later will take place in May 2013, 27th to 29th to be exact.

My fellow german colleagues often nickname Beyond Tellerrand as „Klassentreffen” (class reunion) for the german webworker scene and that exactly nails it. You can meet everybody in Düsseldorf and it was great to see Sandra, Eric, Christian, Marc and all the others again and meet new talented guys like Dennis and Andreas. Plus we had nice vegan food together.

Those who follow me on Twitter might have noticed that I didn’t tweet that much this time. And I barely took notes. This is because I was afraid to miss something from all these great talks. And all of them were fascinating, both those with more technical details and those without. So I won’t get into any details here, others have already done this and more will follow. Marc will most likely put a nice list of all posts on Lanyrd or somewhere else. Marc is collecting all write-ups on the conference’s lanyrd-page.

What I love most about this conference is most likely this familiar flair that’s everywhere. And this is most likely because of Marc. No matter how busy he might be, there is always time for a little chat or a beer. Thanks to this you don’t feel like just attending a conference but being part of it. Of course his team does also a tremendous job to run this so smoothly and a great thank you goes out to them, too.
The worst thing is that I’m in such a passive role. I’m just not used to it, I’m a maker in everything I do. You’ll for instance never see me in a baseball stadium just watching. So this is really hard for me. And I’ll have to change this one day.

Pictured above is BTW my brand new Wacom Bamboo Stylus which I ‘won’ at the conference. Thanks to Wacom for the Bamboo and thanks to Marc for throwing an orange one in my direction, as orange is my favorite color.

Sublime Text 2 Settings

Martin over at The Amazing Web asked for Sublime Text 2 Settings yesterday, so here we go:

{
    "font_face": "Consolas",
    "font_size": 15.0,
    "word_wrap": "true",
    "highlight_line": true,
    "tab_size": 4,
    "translate_tabs_to_spaces": false,
    "line_padding_bottom": 1
}

I’m a huge fan of Microsoft’s Consolas font, so this is my default in both Sublime Text 2 and iTerm 2. The font size looks a little bit to large, but Consolas in 15pt is similar to Monaco in 13pt.
As Martin I hate scrolling horizontally and like my lines highlighted, however, I prefer tabs over spaces when it comes to indentation. The line padding is taken from Martin, it makes things way mare readable.

There are no color scheme settings in my config. As most Sublime Text 2 users I was a long-time Textmate user before and loved their Twilight theme (also on a dark background). However, I instantly fell in love with Sublime’s default Monokai theme and I’m still happy with it.

And I’m pretty happy I finally had the chance to play with Lea Verou’s great prism.js for this post.