Improve page load speed

[britzl]

https://developers.google.com/speed/pagespeed/insights/?url=www.defold.com

[mikatuo]

I can help with the load optimizations.

1. Add lazy loading. vanilla-lazyload or lazysizes will work great, they both can also lazy-load background images that you use for full game images.
2. At least convert home page png and jpg to webp using Squoosh CLI, then replace their <img> elements with <picture> element with <source type="image/webp"> and <img> fallback for older browsers. I have no experience with Jekyll but it seems to be possible to add a Jekyll template for it, right? Then will be easy to replace a few <img> with <picture>.
3. The webp > png fallback is not possible for background images (full game images). They will stay. If you want them to be compressed (webp is >10x smaller than png) then to support older browsers the background CSS images need to be refactored into <picture> elements.

The 2 is related to #15. It might be possible to use webp>png/jpg without the automation first, possibly with a template file and https://devopsx.com/jekyll-check-if-file-exists/ . If there is no .webp for the image then render a single <img>, otherwise, render the <picture> element with webp and png/jpg.

[britzl]

1. Add lazy loading

This is a really good suggestion! I'm going to try this!

2. At least convert home page png and jpg to webp

Yep, moving to webp will definitely improve page load times!