Whenever I want to test or try something out, I do one of three things; I create a new pen on CodePen, push some files to a new Surge project, or I’ll try it out live on my personal site or blog. The last one in that list is my favourite thing to do.
If there’s a performance boost or enriching addition that I need to test out, I just bash it straight into my blog. As much as I like showing a professional looking site, I’m far more keen to try something new. Sure, my site could completely fall over from the change. However, I can easily revert it back, plus I’ll have learnt that whatever I added or changed doesn’t work.
You probably have something similar; maybe not with your own site, but with a side project site. If you don’t have one of these, then maybe you should. It could be your personal playground: a place to try out quick wins, but also learn from mistakes.
Here’s a brief example: after seeing a few results come out of the new “Test my site” page from Google (which is actually just Page Speed Insights with a pretty UI over it), I tested my own site out on it. I got 73/100 for mobile speed, but wasn’t sure why, so I tried some things out. After quite a few attempts, a portion of which broke my site, I managed to boost it to 89/100.
The solution was using srcset for my avatar and moving my Google Fonts reference to the footer of my site. Now that I’ve tried these out and have seen them working, I’ll be able to use them on other projects.
Alright, so this example is pretty small fry. I do suggest you find your development playground though: a place where you can try things out ‘live’. Trying stuff out on a development URL or locally isn’t the same.