Author: ocifu_admin

Editing your hosts file on Yosemite

Lately, I had to edit my hosts file. I’m not used to do this often but I have done it before. I was surprised when just a small change like this disable my localhost environment. Every time I opened a project in httdocs I had a:

The server at localhost can’t be found, because the DNS lookup failed.

My first reflex was to erase the changes and get back to my original file but nothing happens. After that I thought that there was something wrong with my ISP, so I changed my DNS for google DNS, but nothing. After that, It was like a Saturday night between 4-6am: you have an idea where you were, who you was with, but you can not really remember how everything happens.

After start making a backup (I know, even my girlfriend told me I was being paranoid), I found someone in stackoverflow saying that he have had the same problem once editing this file with Sublime. Then I said, what if I just replace my host file with a backup copy? (you could say that it should have been my first reflex, and I agree, but they look the same!).

Once I did this, my localhost came back. Apparently, there is some encoding conflict, you should edit your hosts file with other software than Sublime or taking any kind of precaution (I don’t know which one).

So, I decided to make it console style:

$ sudo nano /private/etc/hosts

Here, I had access to my host file. I add the lines I needed. Then control-o to save and control-x to close.

After that, don’t forget to flush the DNS cache to have your changes immediately

$ dscacheutil -flushcache

Speeding up my WordPress Site – Part 3

One of the biggest issues on my site is render-blocking JavaScript and CSS in above-the-fold content. As you can see, I use jQuery only for my portfolio pages: I use a Codrops script for enhance mobile in my general work page and flexslider plugin for an specific work page.

My first step was to call my JS compress file only for those two pages, this reduce http’s requests on my blog pages to zero.

if ( is_singular( 'work' ) || is_page( 'work' ) )

After that, I had to start checking out Contact Form 7 plugin. This amazing plugin is not very helpful with performance. It generates 5 http requests: 4 JS and 1 CSS. First thing I do was to call it only for pages it really need it, it meant on the Home and Contact page. For this, I used this snippet on my functions.php page.

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

And this at the header of the Home and Contact page:

if ( function_exists( 'wpcf7_enqueue_scripts' ) ) { wpcf7_enqueue_scripts(); }

I decided no to load the CSS stylesheet.After analysing the code, I decided it wasn’t a really structural part of the plugin, specially for my site where I use it only for a simple form. So, I integrated directly into my SCSS code and decided to test for future versions of the plugin and see if it can break my site. I have to confess this was the lazy solution, I should’ve just build a form by hand, eliminate it from Home page and let it just for the Contact page.

Finally, I decided to test a new filter from WordPress 4.1:

add_filter( 'script_loader_tag', function ( $tag, $handle ) {
return str_replace( ' src', ' async src', $tag );
}, 10, 2 );

As I really don’t need JS for building my DOM, I decided to call all my JS files on a async mode. So far, I really don’t have a lot of experience and I don’t know how it can behave on a larger site, but it looks to work pretty well.

Here, I saw huge changes, my site changed from 92/100 for Desktop and 75/100 for mobile to 96/100 for Desktop and 90/100 for mobile.

I want to be clear, It’s been just a week after those changes and I’m still monitoring possible unexpected outcomes. If you have any comments or suggestions, don’t hesitate, I have the comments area blocked but only for spam issues.

Speeding up my WordPress Site – Part 2

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?

 

Speeding up my WordPress Site

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
  • Eliminate render blocking JavaScript and CSS
  • 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 !

 

 

6 months

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.