search

therungg / therun-frontend

Frontend for therun.gg
https://therun-fr-therun.vercel.app
MIT License
26 stars 8 forks source link

Page speed optimizations #93

Closed zoglo closed 1 year ago

zoglo commented 1 year ago

This PR introduces page speed optimizations for external src images from igdb and adds a proper alt tag for A11Y

More Optimizations will be added to that PR

zoglo commented 1 year ago

I want to wait with this PR as there is more to improve on this end

zoglo commented 1 year ago

Changes to the PR

Load Bootstrap locally and not via CDN

This PR introduces local bootstrap support so styles don't get loaded via CDN anymore https://github.com/therungg/therun-frontend/pull/93/commits/eaa9dda9e142823290232a00c434636ba97c6fc6

New GameImage Component for changing quality size of igdb images

Images from IGDB were loaded in a much higher resolution than needed which would lead to more kB being downloaded on page load.

Hence Introducing a new component GameImage that allows following properties that was always replaced for all images:

    src: string;
    alt: string;
    width?: SafeNumber;
    height?: SafeNumber;
    quality?: Quality;
    loading?: LoadingValue;
    placeholder?: PlaceholderValue;
    style?: React.CSSProperties;

Usage:

import { GameImage } from "~src/components/image/gameimage";

You can use following qualities for images from igdb:

"small" | "medium" | "large" | "sd" | "hd";

The URL from the API that delivers the "cover_big" image will be transformed into the new properties according to the image sizes listed here: https://api-docs.igdb.com/#images image