KatieI 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?)
