I Built A Bulma Extension
From January 23, 2021
I built a component that ties in with Bulma to expand their collapsible offerings
Read This ArticleWhen I first started blogging at this here URL, I wasn’t much worried about speed and performance. I wanted to talk about what I was learning and I was excited to have my own website. Don’t get me wrong, I still want to talk about what I’m learning and I’m still excited to have my own website. But I have a standard to uphold now because I have clients and prospective clients who probably expect my website to be a reflection of the work I do. Not to mention that this is a good place to practice building stuff.
So what about performance?
So, in the interest of that, I have always tried to reflect what I’m doing for my clients on my site. Favoring a particular design framework, a CMS, a theme, or plug-in, has usually been the way I do that. I also use a lot of the same signatures, like constantly updating humans.txt, putting the tags in the <head> in a very specific order, and using the same analytical tools.
One thing I’ve never really focused on has been performance. The sites I’ve built have always had okay performance. Not great, not terrible. If I ever noticed some weird things going on I’d optimize, but on the whole, performance has never been a huge issue.
A big reason for updating my site most recently was just that: performance. Aside from starting to really strongly dislike WordPress, I also noticed that my site was taking a long time to load under certain conditions. This was due to a lot of things, like pulling in (seemingly) millions of unused scripts, making hundreds of external calls, and having images that weren’t optimized being loaded above the fold. Back in the days of yore, when I first built my site on WP, there wasn’t that much bloat. Some, sure, but it was easier to control. About two months ago, I realized just how much was coming through when I ran my site through Google’s Page Speed Insights (PSI).
A New Site It Is
In the interest of fixing that and starting a new project, I decided to build myself a new site and a whole new blogging system. Out that was born Topik, a flat-file blogging system. I use that for the backbone functionality of this site, but built a lot around it, too.
When I first made the switch live, my PSI score increased from somewhere in mid-60s to the mid-90s. Desktop was scoring 99. But there were still things to do. Right now it’s sitting at a comfy 99 on mobile and 100 on desktop. 5 years ago, had you told me my site would be sitting at those PSI scores, I would not have believed you. I’m really thrilled to have that.
How To Improve Perfomance
This list will not be exhaustive, and they won’t be ordered any particluar way. This is just a list of things I did to improve my site’s performance by like, a lot. Each of these items are expandable to go a little more in depth.
Serve Fonts Locally
Prior to serving fonts locally, I just linked to Google Fonts. Serving locally moved my score from 93 on mobile and 99 on desktop to 96 & 100, respectively. This is not the place to go into detail on how to do this, but here is a good source which is exactly what I did.
Serve Icons Locally
If you’re using an icon font, serve those locally if possible. The performance increase will probably be pretty close to serving regular fonts locally. Moving FontAwesome from CDN to local improved my score from 96 on mobile to 99.
Compress and Optimize Images
Big images can bog down load time significantly. Compress your images as much as possible. I use TinyPNG if GiMP can’t do a great job. My site doesn’t have many images, but on a client’s site, we moved them from a PSI score of 78 to 85 just by compressing the hero images more. Converting those images to next gen formats (from .png to .webp) brought it up in to the 90s (hard to get an exact number because I did some other perf stuff at the same time).
Minify CSS and JavaScript
When building a site, it makes sense to use the expanded CSS & JS, but once in production, minify that stuff. Especially with large CSS files, minification can have a huge savings. On this site, minification saves about 40% of the initial file weight.
No Comments...yet