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.
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 settings.py 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 ﻿ – 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!