Skip to content

Improve page load speed #24

Open
Open

Activity

mikatuo

mikatuo commented on Dec 20, 2022

@mikatuo
Contributor

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 #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

britzl commented on Dec 27, 2022

@britzl
CollaboratorAuthor
  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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @britzl@mikatuo

        Issue actions

          Improve page load speed · Issue #24 · defold/defold.github.io