After reading about leveraging browser caching, I was hesitating between using just a WordPress Plugin (W3 total Cache) or doing it by myself. I have to say that I’m becoming a bit sceptical to the difference between using and abusing with WordPress plugins. I am not saying this plugin does not worth it, actually I think it does, but maybe because my site is not too big, I could try do it by myself.
While I’m doing this, I’ve been reading this article – among others – and I finally decided to hard code it. I did not use the script suggestion from the article, instead I went back to HTML5 Boilerplate and recover the rest of the web performance .htacces.
This made that 86/100 for Desktop and 70/100 for mobile became 92/100 for Desktop and 75/100 for mobile. Not bad for desktop. However, I’m arriving to the hard part blocking JS and CSS.
P.S: When I restarted my computer today, the score was different from that of Saturday, but after a second run It got the same results. Is this a cache problem?
As I said, I started to work on my site. After two years of putting it online and completely abandon it, it was time to recovering it.
I started the Web Performance course offer by Udacity and I tried to implement some performances techniques that I knew for a long time that I had to implement but, well…
First, I completely change my workflow from Codekit to a Grunt System. This allow me to compress my js and css files, and reduce the http request numbers. Sadly, at this point, I did not take PageSpeed measure, but well, at least I made it at this point.
I started from a score of 78/100 for Desktop and 65/100 for mobile. It was pretty awful, I have never checked my own site and this discovery was really disappointing. Between the suggestions and fixing point I found:
- Enable gzipping
- Leverage browser caching
- Prioritize visible content
From all this topics is the render blocking problem the one which concerns me the most, but so far I am going to start with the “easiest”.
I took the Web Perfomance snippet from HTML5 boilerplate to enable gzipping in my site. I copied this code into my .htacces and the magic started, my scores changed to 86/100 for Desktop and 70/100 for mobile. I am still far away but it is a good star point.
Next step is leveraging browser caching, keep around here !
It’s been already more than 6 months since my last post, I only have in my defense that I was in a hard change period. After the World Cup euphoria I decided to quit my job and move to another country. I think I had more than enough in my hands.
Anyway, no more excuses, It’s the moment to restart and change words into acts. Right now, I’m leaving in Sevilla, Spain and I can say that I’m really happy, I change the stress full routine of metro, parisiens, expensive restaurants for some kind of slow pace and friendly people.
I started updating my site, changing all my old workflow into a Grunt task system. This has allow me to improve performance, minified CSS and JS and compress images. But in another hand, I detected other thing to improve/fix.
I’m trying to catch up again with my site, writing regularly and post performance results after I’ll make some changes after finishing this course offer by udacity.