I finally took the world’s advice and split my blog’s JavaScript into “load first” and “load last” sections. I brought my Google PageSpeed Insights score for KatieKodes.com on mobile up from 80 to 91. That said, it still feels low and I'd love help from the #DEVcommunity!
Discussion Prompt
It looks like my only image on my home page is my SVG logo, so I’m a little mystified why I’m still all the way down at 91 on mobile and 95 on desktop.
Does anyone here at Dev have any ideas for how I could get my “first contentful paint” even snappier without too much effort and without sacrificing things like "cumulative layout shift"?
How I did it
I used to have a file called scripts.txt that I injected into the <head></head> of my site.
It included the 6-line JavaScript for my archive expander/contractor arrow toggles as well as calls to some external JavaScript, like Google Analytics and LinkedIn/Twitter widget I had long ago stopped using.
I split it into two files: scripts_internal.txt and scripts_external.txt.
- I left
scripts_internal.txtin the<head></head>. Maybe it doesn’t need to live there, but I didn’t want to take a lot of time to debug. - I moved
scripts_external.txtto live as the last piece of HTML injected into the<body></body>of my web site.
I also got rid of the LinkedIn/Twitter widget JavaScript it turned out I’d long ago replaced with simple links.
Moral of the story: don’t just read the textbook on web site optimization – do your homework too!
(How many times had I read to do this one little thing before I actually did it?)
Top comments (2)
Look, Google's rules are arbitrary and full of shit. Don't waste too much time with that, know your audience, build your own metrics and most important of all don't embed a YouTube video in your page because you'll loose 15 points right away.
I wouldn't necessarily go as far as saying they're 100% arbitrary and full of shit, but like all tools that give you metrics about your code it's just that... A tool.
I think it's interesting to look at why you lost points, go through the checklist and for each item choose for yourself if you want to do it or not. Most of the time the answer might be "no", but if there's even one item where you think "Oh right I forgot to do that", or "Yeah that's a good idea, maybe I can optimize this part" then the tool provided value.
What you don't want to do is aim for a perfect score and go changing perfectly good code just to get more points. That would be counter productive.