search

defold / defold.github.io

www.defold.com
Other
11 stars 15 forks source link

Improve page load speed #24

Open britzl opened 4 years ago

britzl commented 4 years ago

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

mikatuo commented 1 year ago

image

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 https://github.com/defold/defold.github.io/issues/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 commented 1 year ago
  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!