-
Notifications
You must be signed in to change notification settings - Fork 173
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Issue 1013/reduce website latency/2 #2221
Issue 1013/reduce website latency/2 #2221
Conversation
This change replaces the github action png with a .webp image. As this image is partially visibile on the mobile screens, we can defer the loading of this image.
Preload the LCP image with a high fetchpriority so it starts loading with the stylesheet.
<img src="/static/img/github-action-scan-output.png" alt="Screenshot of OSV-Scanner GitHub Action"> | ||
<img src="/static/img/github-action-scan-output.webp" alt="Screenshot of OSV-Scanner GitHub Action" loading="lazy"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
{% block extra_head %} | ||
<link rel="preload" fetchpriority="high" as="image" href="/static/img/background-1.webp" type="image/webp"> | ||
<link rel="preload" fetchpriority="high" as="image" href="/static/img/background-2.webp" type="image/webp"> | ||
<link rel="preload" fetchpriority="high" as="image" href="/static/img/footer-decoration.webp" type="image/webp"> | ||
{% endblock %} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<link rel="preload" href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" as="style" onload="this.onload=null;this.rel='stylesheet'"> | ||
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@400;700&family=Overpass:ital,wght@0,400;0,700;1,400&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'"> | ||
<noscript> | ||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"> | ||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@400;700&family=Overpass:ital,wght@0,400;0,700;1,400&display=swap"> | ||
</noscript> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, thanks!, let's also wait to merge this until this week's release is out.
This PR enhances image handling on the home page for better performance, especially on mobile.