definitiv unwichtig

I was shocked as I checked my website http://attackemart.in on performance for the first time. More than eight seconds until it was fully loaded. I knew the code behind it wasn't super clean or tidy, it was my first big javascript project and I was at the very beginning of my frontend developer career. But at the end of a day, there were always other important things to do, than refactoring this code. So it took more than two years to take the day to get this finally done.

This was the status:

The top scores were:

• 81 initial HTTP requests (HTML, CSS, JS, Images and yes, even Flash)
• 913 KB Images
• 41 W3C Errors
• Document completed 5,51s 

Find the old version here: http://martingauer.de

Many requests were caused by the "app" icons from the smartphone in my hand. I created a sprite with all icons and some other little things like the microphone in the search bar. I made the sprite manually with Photoshop and crushed the finished png with http://tinypng.org/ (the crush saved another 40 KB).

At the end I had a 15 KB png sprite which saved me 11 requests (hell yeah).

So let's continue. I saved all jpg's with about 30% quality, this is good enough for the web. After that I had just 419 KB of images, including the sprite! (total saved 494 KB).

The next thing was the embedded youtube video. It was directly loaded at first load and has blocked the other content for several seconds. I decided to load the video first at click on the youtube icon. And since I have another two images in two other content screens I programmed a simple javascript preloader which loads the images after the initial stuff of the page is loaded.

Next step was to put the like & share buttons from G+, Twitter and Facebook into a function which fires right after everything else is loaded. Easy one.

These steps improves the initial load time!

Javascript in head? Nope, not anymore. Because I don't have tracking events or other Javascript related things which have to been loaded first, I can put all my JS files at the bottom of my HTML. This saves several seconds, because JS blocks the whole content until it's loaded.
My first preloading screen was made with javascript. I changed it into pure CSS3 animation, so even if Javascript is in the bottom of the page, it will appear directly.


To minify the CSS and JS files I used http://jscompress.com/ and http://cssminifier.com/. Of course I could have made it with http://gruntjs.com/ or http://gulpjs.com/, but to be honest, I was too lazy to set it up, because I had more focus on refactoring the code and performance. Please be patient with me :)

I noticed, that all my images were loaded twice. First time from attackemart.in and second time from martingauer.de. That was because I hosted the website on my martingauer.de webspace and had a headless redirect from my Domain Provider. So I had to move the site to my server.

The Result:

The top scores now:

• 29 HTTP requests, but only 12 of them on initial load
• 419 KB Images (more than 50% saved)
• 0 W3C Errors
• Document completed 1.47s

http://attackemart.in

The conclusion:

You can speed up the initial load time of your website if you keep things small. Try to save every byte you can. Use sprites, minify your CSS and JS files, load images and other stuff asynchronously if you don't need them at the very first seconds. It's better to show the user something as fast as you can to keep them on your site.

Web Performance  <3