Nonbreaking Nospace Space

Recently, we’ve switched gears on the new project.  Still using Angular 2 as the front end, but the backend had to change- moving away from Python/Django to C#/.NET.  However, there was one cool feature/tricky quirk in Django I wanted to share.

Google plays a huge role in building a new website.  We definitely didn’t consider their ranking and site score index nearly enough in the planning stages.  As a result, we had multiple post-launch ‘fixes’ to the new site- all related to getting our site as Google-friendly as possible.

One of those involved minification.  Sure- everyone knows that minifying your Javascript and CSS files is important.  It keeps the overall size of each http transfer low- meaning: faster load times.  Add concatenation to that process and you’re also reducing the overall number of http transfers- meaning: faster load times (at least, until http/2 becomes the standard- it looks like that will allow for many more open connections during the transfer process- meaning: many things that have become standard about site speed best practices will change).

But Google will also knock your page speed score down if you don’t minify your html.  I hadn’t heard of that one before.  The size differences really didn’t seem like they’d make much difference- a few bytes here and there- but it doesn’t matter to the Google check.  If your html isn’t minified, you will lose points.

In steps Django.  There’s a great middleware feature: htmlmin (pretty sure you can just install it with pip and add it to the middleware array on your file).  It will automatically minify all your html templates.  Very useful- but there is one ‘gotcha’.

It’s possible that while you were creating your masterpiece of a website, that some ‘nonbreaking nospace’ spaces were inserted.  How does this happen?  I’m still not quite sure- generally it’s because a file has been saved in utf-8 (generally a good thing) but with BOM encoding (not sure what that is or why it really matters).  However, if you do have one of these stray characters in the minified version, it will create a blank white space on your site (usually at the very top)- the height of a normal character.

The offending character code is &#65279 – but you won’t be able to find it if you search your .html files.  You can delete every space on your file as well- it won’t help.  It appears that the only (or at least easiest) way to fix this is to open your file in notepad++ (a free download), change the encoding to simple utf-8 (no BOM) and save.

This won’t make any visible change to your html code, but it will eliminate the issue and remove the blank space.  And your html is minified!  And Google is happy!  Now I just need to optimize that 6kb icon image down to 4.75kb and we’re in SEO heaven!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s