This site has recently had a redesign, though I suspect most people won’t be blown away with the design I’m really pleased with the performance gains and wanted to share some of what I have been doing. If you have never visited this site before, it didn’t always look this way, in fact the site has been through many iterations and several domain names, why I thought .me.uk was a good choice in the early 2000s I will never know.
Over the years the site has mainly had a theme that has been modified from a pre-existing one, the modifications being done by myself with little regard for anything other then getting a job done. The exception being a brief period where I had a unique theme designed by the very talented Kat from Capra. She did an amazing job unfortunately I implemented about 1/10 of the functionality and it soon became not fit for purpose.
Which is a shame as I loved that design. Over the years more themes have come and gone but with the start of 2018 timnash.co.uk has a new lick of paint a completely custom theme and lots of tweaks under the hood. I showed the site as a show and tell at WordPress Leeds a week ago and promised to do a write up. This post is a ramble about the Design & Performance side. The follow up posts will be about workflow, security and on going maintenance. enjoy!
When you know you can’t design
At school I once got an A in my art homework the teacher asked, Tim did you mum help a bit?
I’m the person who can’t draw a straight line, and thinks everything should be in grey boxes. Which is a shame as I knew exactly what I wanted the site to look like and it was going to be great. It would be a minimal design, with great typography and ROBOTS!!! randomly in pages there would be “cracks” in the screen and behind the cracks would show robot animations working away. It would have been amazing…
…
…
…
Then I woke up in the shower.
I’m not sure if it was the shower but at some point it become obvious my imagination and my abilities were quite far apart. I did make some attempts at various parts of my ambitious plan however for all my reading most tutorials can be summed up as missing a few steps.
Like most people I simply abandoned hope that I would indeed wake up an artist/designer and after a period of moping (a mere 6 months) and feeling sorry for myself set about creating something. To force myself I gave myself a totally artificial deadline of Jan 1st 2018 and the site must go live. It’s been a work in progress since, but importantly it did go live.
So if you can’t design don’t!
We have worked out I can’t design anything so I had a choice I could hack from something else or I could go back to the drawing board. I’m a backend developer, I don’t do “frontend” I know how to make things fast, secure and automated this is my life so perhaps I should embrace it. If I make something that is functional, looks slightly ok at best but is really fast then thats all I need. After all what is the site for? Wait what is this site for?
I have had a web presence for 20+ years but why? I mean let’s face it I suck at this blogging thing? What’s the point of having a site, why go through the hassle and if I want a presence I could always throw a one pager up and point it at Github…
Why?
For those who might not know I’m the platform lead for 34SP.com Managed WordPress Hosting it would be positively rude to not use the hosting I help make. In fact the redesign has helped improve the platform as several niggles I had were ironed out for all our clients. Work also uses my site as a showcase of performance at events, each time I have cringed as while it was never slow it was hardly stellar. So having a site that I’m heavily invested in using the company platform means I’m constantly dog fooding which is good for our clients and provides a nice show case.
That’s cool but also not a good enough reason on it’s own, there are lots of internal projects that could be utilised the same way, it needs to be more then that. One of the things I have been so fortunate to do is talk at events and I have given a lot of talks over the years from How to rob banks, through to scaling WordPress and quite a few security talks. I have been terrible about making those talks available to a wider audience and really my site is a great place to centralise those talks. Some would be suitable for the company blog but a talk about Home Automation possibly not.
I also still have a lot to say, actually anyone who has met me will probably say I have to much but hey! My site provides me a place to say things that others won’t publish sure it might mean it comes across as rants but that is ok. Having a place that is “mine” means I always have a place to throw myself on.
Finally I want somewhere that is mine, that represents me and that I can play with.
So now with justification for having a site back to design…
ah yes I can’t design so let’s not.
Indeed I deliberately took away as much “design” and design choice away from myself as I could if I’m worrying about pixel perfect positioning I’m doing it wrong. The site should be simple and fast.
Last words on “design”
So the actual design itself, is basically a one column design, with the footer and header having two columns. The layout is managed using Flexbox, I did start using CSS grids and boy has doing layouts come on in the last couple of years, but CSS grids provided a layer of complexity not needed for such a simple design. Flexbox was very easy to implement (shout out to CSS Tricks Complete guide to Flexbox they also have one for grids). At WordPress Leeds someone asked me if I was worried about compatibility but Flexbox is well supported in modern browsers and most of the device browser combinations that can’t use it also struggle to connect to a site using SNI so would never be able to access the site. That said it does fail by cascading so while there is an odd ident it doesn’t look horrible and still usable.
The colour palette, if I had been left to it, every thing would have been blacks and greys. Knowing thats not a good idea I used Coolors to help me select a palette I liked. Once I had found the purple and locked it the rest was selected in a few minutes.
Framework choice
Before diving to much further, for many WordPress theme designers the first question I’ve been asked is, does it use Genesis, roots, underscores?
And when I say um no in a very sheepish way, the response is oh you rolled your own Framework thats super cool.
There is no framework, remember how this is mine, well a team isn’t working on it, the theme is never going to be released to anyone there is no framework and pretty much every rule of theme design you have heard of was thrown away.
I have so much respect for good theme designers, building a theme for the general public is really hard, you have to make something that looks decent, performs well and is going to be abused and twisted in ways you never imagined. You have to assume your design is going to be used with different typography layouts and people are going to want it to do a range of fancy things. Almost certainly they will want a shop to run using your blog theme.
Preparing a theme for such situations is a nightmare so I have a confession I don’t do any of it…
- No widgets
- No Menus
- Fixed Left to Right text
- No internationalisation of strings
- Hardcoded frontpage
My “framework” is to use the barest amount of WordPress functions as possible to generate the content on the front.
Now its really important to emphasis I can do this on this site because thats the route for the best performance at the cost of all the amazing flexibility using those features brings. It’s all about getting the balance right. I’m not a framework hater, the last iteration of the site used Genesis, and this version started that way but I found I was removing so much that really the odd bit I was using would be more easily replicated by scratch.
However do yourself a favour use a framework for your next project ;)
Let’s go
Over a thousand words in, probably time to start talking performance, after all we ascertained aesthetics not my thing, making stuff fast I’m better at so with that in mind here are a few of the things I have done to improve performance.
Font choice
The site uses the default system fonts, which means it actually looks slightly different in every browser. This also means there is no need to remotely get fonts or rely on font families being on the device viewing the site. It’s worth emphasising this is true for any “web safe” font not just system ones, indeed implementing system ones actually is a bit more work. So why do it, I think on the whole a lot of effort has been put in by operating systems to make them look good and very readable and comfortable for people as such they make a great choice for my no frills site and take typographical aspects away from me which I quite like.
Interestingly I wasn’t always going this way and one of the earlier choices was to use a dyslexic friendly font, which I really liked and felt was very readable and cute.
Early prototype of the site
However I was talked out of using “a thing that made comic sans look professional” as one person put it. Also while really readable in short bursts actually 2k words and it started to look horrible so hey ho.
Minimising the head and footer content
WordPress positively spews things into the footer and head of your site through the wp_header and wp_footer actions these are abused hooks that just about every plugin that adds its mark to the home page adds something to. The WordPress core also has a fair amount of things it needs to add to the head that are not needed or add limited benefits. That’s not to say they are not useful, just not useful to me for this site.
To give an idea of what get’s removed:
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wp_shortlink_wp_head');
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10);
add_filter('the_generator', '__return_false');
add_filter('show_admin_bar','__return_false');
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'wp_head', 'rest_output_link_wp_head' );
remove_action( 'wp_head', 'wp_resource_hints', 2 );
add_filter( 'disable_wpseo_json_ld_search', '__return_true' );
add_filter('wpseo_json_ld_output', '__return_true');
remove_action( 'wp_head', 'add_ga_header_script' );
add_action( 'wp', function() {
if( !is_singular() || is_front_page() ){
remove_action( 'wp_footer', 'Gaussholder\Frontend\output_script' );
}
} );
Most of that is WordPress core but also includes a plugin that I use to proxy Google Analytics (more in a bit), some extra content generated by Yoast SEO plugin and to restrict Gaussholder to posts & pages. This reduces the markup on the homepage by over 30% and saves multiple additional requests being loaded.
Plugin Auditing
This site has just 10 plugins running, of which just 4 have any impact on the frontend, of those 4 all of them have bits stripped out or have deferred loading of their javascript. Each plugin has been selected after I’ve looked at the code, and while not 100% happy with them most I’m not going to rewrite.
Obviously this is a ridiculous luxury position to be in and most sites require to many shiny spinning things to be able to be so picky.
Putting stuff into the head
Having taken bits out of the head, one thing I did add was to use DNS Prefetch to warm up the browser to expect content from the CDN, the benefits of this are minimal, only a few browsers support DNS Prefetch, those that do already have some basic prefetch in the browser and with such few additional resources would have likely already been using their internal optimisation to do the prefetch. It’s also a signal not an instruction so can be ignored. Testing to see if it has any benefit is remarkably difficult on the site. Originally I also had it looking up the DNS location for Google Analytics as well but I’m 99.99% sure that this is already cached in every browser based on sheer number of sites using it that this was a waste of bytes.
Using a CDN
I have used KeyCDN for a number of years, they are fast, easy to use very affordable and keep innovating. They were one of the first CDNs to offer SSL at no extra cost and support HTTP/2 out of the box. Using a CDN is very borderline for the site, indeed for the homepage it’s probably adding to the load time to make the extra DNS lookup for the favicon and the localised google analytics file. On other pages where there are additional images such as this post it makes more sense and does provide some performance benefits.
For the actual pointing of content at KeyCDN I use the CDN component in Mark Jaquith WP Stack which rewrites all URLs depending on file extension. It’s simple and works well as long as the pages are fully cached.
Using third party DNS provider
While I could use my domain registrar or my hosts DNS, I prefer to use a third party service for this site its DNSMadeEasy which do what they say on the tin, though I have also used Route53 and several others. Third Party DNS tends to be distributed and being outside of your hosting company infrastructure easy to change, have fallbacks for when it goes wrong. For this site I also have backup records to allow quick change of nameservers and be back online fairly quickly should something disastrous go wrong. DNSMadeEasy have geographically diverse locations and are incredibly quick at resolving requests. Sounds like a sales pitch, but when your shaving milliseconds something I really recommend.
Awesome Hosting
Thought the last one was a sales pitch…
So the site is hosted with 34SP.com Managed WordPress Hosting it’s on a one site, 2 unit plan which would set you back £14.95/Month The site is on it’s own VPS, runs on Nginx, PHP7, Redis for an object cache and full page caching via Nginx Fast-CGI cache. Loads of buzzwords but the key part I have made no modifications to the services on my container, I’m running our stock product and it’s really fast. Mainly thanks to the Fast-CGI cache meaning most requests being made to the site are being given a cached result stored in RAM. Out of the box, the hosting takes care of browser caching, and enables gzip for assets where appropriate. By the way if you want to try it use TIMNASHWP at checkout for 3 months free.
Yep that was a sales pitch, but ¯\_(ツ)_/¯ results speak for themselves, for actual UK based hosting, not sure you will find better value or performance but I’m rather biased.
In head CSS vs Inline
So the site doesn’t use an external stylesheet instead I inline the CSS into the head, its small enough that this isn’t an issue, but why if I’m committing the near criminal act of putting it in the head why do I not inline it? Well connivence building a workflow using inline styles, that is consistent is actually harder then you would imagine, but a bigger issue came when writing a CSP security header policy at which point inline becomes a true nightmare. So while I’m all about the performance it’s always a balancing act.
Inline SVG
Originally the social media icons were from a well known font library, using a font library has become the defacto way for dealing with small icons, but loading in the entire library for 4 or 5 icons makes little sense, so your left with the choice of stripping it back or using something else. You also have the issue, that you can’t use just one font format, for maximum compatibility you will have two or three formats. Using SVG and embedding them into the page is tiny and highly performant with no extra resource requests. SVG have been around forever I remember teaching a Internet Tech class at uni in early 2000s with SMIL and SVG it was going to be the future… ok so 18 years later and actually SVG is well supported in most browsers.
Proxying Google Analytics really?
Yeah, this is pure vanity, there is the tiniest performance benefit to proxying and using my CDN to load GA javascript, and loads of headaches, such as when it updates I need to push those changes out, and if I have utilised browser caching effectively I need invalidate it. So why do it?
Yeah it was to get a perfect score on the various metric sites. Am I proud of that…
Actually yes, but I shouldn’t be because we know a perfect score is little to do with speed, the whole correlation vs causation. Anyway to achieve this I use the Complete Analytics Optimization suite which basically makes a curl request periodically to download the GA script. I then modified the output it generates, so it points to my CDN and also to force it into the footer. I don’t really like this plugin, its doing the job but I’ve already put together a very small plugin to mimic it and will be swapping over at some point.
8KB Favicon
During the later stages of testing, I was looking at a pie chart of assets breakdown and realised images were taking up a third of the homepage, which was weird as there shouldn’t have been any images, the tool in question seeing SVG as markup. Well it turned out a third of the weight of the page, was the favicon. My poor mannequin man, he has been around for a long long time. Indeed that favicon is probably the oldest thing on the site. Did I blink or even think to screen shot before removing him. Nope, gone.
Initially I just had an empty file, to prevent 404s but this actually caused its own performance issues as browsers tried to render nothing. at one point, it was a grey square to match the default chrome colours on Mac. Now it’s a very simple TN at under 1kb it’s a significant saving. Though I am sorry to see the old one go!
Lazy Loading images
For all the minimalism bits I’ve discussed, I like images and memes a picture says a thousand words and all that (we on over 3k, so maybe I should include a few more) but they ruin pagespeed scores and also browsers load them differently which can make a big impact on performance for some browsers. I’m already loading them via HTTP/2 on a CDN but also lazy loading them. Lazy loading is simply getting Javascript to load images, as the user scrolls down the page. In the past I have used something like jQuery.solar which is great but I’m not loading the entire jQuery to lazy load images, indeed my intention was to find something very light. Originally I wrote a few lines of javascript that were crude but effective. However crude really was ugly. I really like the effect Medium and Facebook have with their lazy loaders, providing what appears to be a highly pixelated image and then it sharpens as it loads. Luckily the folks at Human Made apparently like that to and built Gaussholder which while they are describe as aimed at large sites looks good and works well. The overhead is not to bad either and I really like the look. This is something that you either like or you don’t.
So how did you do?
Overall the site is pretty speedy, real world results in Chrome show the home page loading in around 300ms an average blog post is around 1.2s, this is slightly disappointing but is due to the fact a lot of posts have embedded video, using their native embed options. Over time I will start to look to lazy load wordpress.tv and Youtube the two main sources and I expect that to drop the average page render time.
And that pagespeed score…
Totally worth potentially ruining stats by having out of sync analytics code.
Overall I’m really pleased with the results, there are savings to be made, especially on individual pages. Older pages have a load of junk and one of my future projects is to go through the site cleaning it up. Also several posts are missing images and need these re-uploading. There is a tale there, ask me about it at an event!
Critics are going to say, well it’s great you have a fast site, but there is nothing there to slow it down so it should be fast. They are of course right, this site is a bit of a compromise it’s fast mainly due to it being slim but then it’s a blog what else is there to add that I actually need? Interestingly I’m working on an e-commerce side project and virtually all the things I’ve done on this site can be used on it as well, so hopefully on your sites too to make reading this worth while.
The interesting thing is for me nothing has felt like a compromise to far.
What’s missing?
Before I go I wanted to cover a couple of experiments that didn’t make it to the final site and explain a little bit why and where I think they are going.
Gutenberg
You can’t write a blog post about a WordPress site in 2018 without mentioning Gutenberg the new editor for WordPress and original intention was to have the Gutenberg editor integrated, so I had as close to possible editing experience. The reality is when I was trying in mid December I could barely get it to work, let alone build anything cool with it. So much has changed in just a month but even so every time I think I’m ready for another stab I’m put off. I really don’t want to learn React and to get the level of integration that I think I want, I would need to at the moment. As a user, I write these long form articles and the experience of editing them is painful in Gutenberg indeed on my last attempt half my posts won’t convert to blocks properly leaving posts I simply couldn’t edit and would need to be copied and pasted in, segments at a time.
It’s still got time to mature, and I have seen some really interesting discussions and demos so its not all doom and gloom, but alas no Gutenberg quite yet for the site.
AMP
AMP is designed to make pages load instantly, by minimising markup and styling…
yeah about that, the AMP plugin by Automattic does a good job and I was able to style it quite easily, the problem when your average page is measure well under 50kb its hard to strip anything and indeed the AMP generated pages, had more markup and a lot more javascript. While I appreciate AMP pages are also cached by Google as well, the result was if you hit an AMP end point the total page load was slower. I’m also not sure I like the idea of AMP, the goal is great, but perhaps we could just write websites that perform well on mobile?
I haven’t been given a convincing reason to use AMP other then for performance and as the performance benefits are not there nor is AMP currently.
Offline Service workers
One of my original ideas, was to use javascript and the REST API to have the site run offline and to not need make any more then a singular request to the main site using service workers. There is nothing wrong with this idea, unlike previous attempts of going offline, Hi appcache! Service workers work well in browsers that support them, indeed with HTTP/2 I could even push JSON updates from the REST API. This is a project I would like to revisit but for a humble blog it feels like so many moving parts to fail and potential for disaster if setup wrong. So a pin in it currently but definitely something I want to look at.
Work in Progress
This seems like a good place to pause, but development of the site continues. I hope the ramble has been helpful its worth restating in case you haven’t got the message I’m not a designer, a front end developer and my experience with UX is well using it.
I do have A few things coming in the short term. Before the security post I want to get a couple of features online, including sorting the content security policy out to work with full page caching (thats this weeks job), I also want to introduce a pair of very cute robots, designed by my friend Kayleigh who will slowly start appearing on the site.
Finally I’ve noticed an interesting bug, that means the subsrc images that WordPress creates for images in posts are not getting their CDN versions and as such are not being loaded properly so the wrong size image is being shown on mobiles which is annoying but easily fixable I believe.
This site doesn’t pretend to be the greatest or indeed the fastest. What it is is mine, it has just enough style to make me feel proud and I am pleased with the results.
If you enjoyed this article please do share it on your favourite social media of choice (or even multiple) my goal is to write a couple more covering other aspects of the site and to try and get back into blogging in general. To that end I have added a “goals” page to crowdsource a backbone, so please call me out if I’m not hitting those goals.
If you have any ideas and thoughts do let me know, till next time!
p.s Want to read part 2? New Site Part 2 – Development Workflow