That's cool. Just for fun, try to remove the lazy load effect from the LCP, let's see how it effect the score.

As for the strategic articles, I mean that you'll increase the internal links certain articles you think can rank higher.

On October you had 3300+ keyword that were ranked 11-100 on Google

https://i.imgur.com/ZGU0Ezk.png

It dropped to 165 keyword now. That's an insane drop, but I wonder how much traffic these thousands of keywords brought you since there weren't rank too high.

I would like to dive into the keyword that ranked 4-10, on Google (50 keywords). And they keywords that ranked 1-3 (15 keywords)

By understanding on GA which pages brought you the most traffic/ranked the highest you can make them stronger by adding more internal links to these pages, look at it as kind of first aid ;)

EDIT:

Few tips:

- The 'Recent posts' widget is great. It get your article indexed faster. What about adding a widget below for 'Popular articles'? Place 5-10 articles there.

https://i.imgur.com/MBquX6M.jpg

- Make sure you implement time stamp to your articles the right way

https://i.imgur.com/b5usnJJ.png

https://i.imgur.com/0vpXdyE.png

tell me more about the timestamp. Where does that data get derived? I thought that should be in great shape since I set lastmod in my sitemap based on git commit date

https://johnnyreilly.com/2022/11/25/adding-lastmod-to-sitema...

We could apply lazy loading only after the 2nd image maybe

Yeah - primitive but probably reasonable. Would be happy to experiment with that. I've also been pondering things we could do around open graph images as well, would be nice to use image CDNs like Cloudinary for open graph images in the same way we can for blog images https://johnnyreilly.com/2022/12/26/docusaurus-image-cloudin...

Changing all images to be lazy loaded is not a good idea for SEO reasons (and perhaps not a good idea for regular usage of the site either). If it were, browsers would just do it automatically. Using hints on your images is only useful if you are doing it strategically, which means only lazy loading images that are offscreen on the initial page load. Otherwise you are not actually giving useful hints to the browser on how to load your page in the correct manner, and thus you are just better off letting the browser use whatever internal logic it has to decide how and when to load the assets.

Basically you can think about the optimal, minimal set of resources to render your page being:

- HTML

- Required CSS

- Above the fold images

Then at that point, download all of the other things to make the page work in the way you want (javascript, etc). Anything else is delaying the initial page-load. Because your images are lazy loaded, your page load looks like the following:

- HTML

- Required CSS

- Some above the fold images (profile.jpg, etc)

- Massive, >300kb blobs of javascript (runtime-main.js, main.js)

- Above the fold images in the post

This is not good. It doesn't make sense for your page to download 300kb of javascript before downloading the 18kb image that is above the fold. Now you can partially solve this problem by making the javascript asynchronous, but that still is just another band-aid on the problem, as then the javascript and above the fold images would download concurrently, which is still not optimal.

What you want to do is have above the fold post images be loaded eagerly (the default), and then lazy load ones that are lower on the page. If you aren't going to do that, you probably are better off just not having the images being lazy loaded at all, especially if your page includes 300kb of javascript which is likely going to be much larger than the combined size of all the images on the page.