Skip to content
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

Merged
merged 6 commits into from
May 22, 2024

Conversation

zahraaalizadeh
Copy link
Collaborator

@zahraaalizadeh zahraaalizadeh commented May 17, 2024

This PR enhances image handling on the home page for better performance, especially on mobile.

  • Serve Images in Next-Gen Formats
  • Preload Background and external link Images
  • Eliminate Render-Blocking Resources: Adjusts loading optional fonts to reduce render-blocking.
  • Defer Offscreen Footer Image on Mobile: Defers footer image loading on mobile.

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.
@zahraaalizadeh zahraaalizadeh marked this pull request as ready for review May 21, 2024 01:55
<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">
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before:
before_githubaction_img2

After:
after_defer_github_action_img

Comment on lines 4 to 8
{% 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 %}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before:
before_preload_home2

After:
after_preload_home2

Comment on lines +17 to +22
<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>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before:
before_preload_font

After:
after_preload_font

Copy link
Contributor

@another-rex another-rex left a 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.

@cuixq cuixq merged commit 0df2087 into google:master May 22, 2024
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants