DEV Community

loading...
Cover image for  I improved Page Speed from 80 to 91 -- can you help me get closer to 100?

I improved Page Speed from 80 to 91 -- can you help me get closer to 100?

katiekodes profile image Katie Originally published at katiekodes.com on ・2 min read

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.

  1. I left scripts_internal.txt in the <head></head>. Maybe it doesn’t need to live there, but I didn’t want to take a lot of time to debug.
  2. I moved scripts_external.txt to 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?)

Discussion (2)

pic
Editor guide
Collapse
xowap profile image
Rémy 🤖

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.

Collapse
nicolus profile image
Nicolas Bailly • Edited

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.