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.

Sign up for GitHub

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

Improve Lighthouse Score of Meshery.io Home Page #1876

Closed
wants to merge 5 commits into from
Closed

Improve Lighthouse Score of Meshery.io Home Page #1876

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7d7222b
Improved the Accessibility score for Meshery.io
shubhusion Aug 17, 2024
7e60e8f
Implemented lazy loading
shubhusion Aug 17, 2024
1288b8c
Converted gifs to webm format , png to webp & Implemented lazy loading
shubhusion Aug 17, 2024
dd687d8
preconnect to required origins
shubhusion Aug 17, 2024
5c17bdc
Merge branch 'master' into patch-8
shubhusion Aug 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion _data/features.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: See changes to your infra <span class="special-text">before you merge</span>
description: Get snapshots of your infrastructure directly in your PRs. Preview your deployment, view changes pull request-to-pull request and get infrastructure snapshots within your PRs by connecting MeshMap to your GitHub repositories. <div class="button-para"><a href="https://docs.meshery.io/extensions/snapshot" class="highlight">View Docs</a></div>
logo: /assets/images/meshmap-icon.svg
image: /assets/images/gitops-snapshot.png
image: /assets/images/gitops-snapshot.webp
list:
- See your deployment before you merge
- Connect MeshMap to your GitHub repo and see changes pull request-to-pull request
Expand Down
45 changes: 28 additions & 17 deletions _includes/features.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,10 @@ <h2><span class="special-text">Multi-cluster management</span> for Kubernetes an
<div class="image flex" style="flex-flow: column wrap;">
<div align="center" style="margin-top: 3rem;">
<div style="display: flex;">
<img src="/assets/images/screens/multi-cluster-management.gif" class="screenshot" style="max-height: 50vh;"
alt="Multi-cluster Kubernetes Manager" loading="lazy" />
<video class="screenshot" style="max-height: 50vh;" autoplay loop muted playsinline>
<source src="/assets/images/screens/multi-cluster-management.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<span>
<!-- <p style="font-size: 1rem;margin:0rem;padding:0rem;color:#666;font-style: italic;">(excerpt: patterns
in-action)</p> -->
Expand All @@ -61,8 +63,10 @@ <h2>Manage your connections with <span class="special-text">Environments</span><
<div class="image flex" style="flex-flow: column wrap;">
<div align="center" style="margin-top: 3rem;">
<div style="display: flex;">
<img src="/assets/images/features/environments.gif" class="screenshot"
alt="Multi-cluster Kubernetes Manager" loading="lazy" />
<video autoplay loop muted playsinline class="screenshot" alt="Multi-cluster Kubernetes Manager">
<source src="/assets/images/features/environments.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<span>
<!-- <p style="font-size: 1rem;margin:0rem;padding:0rem;color:#666;font-style: italic;">(excerpt: patterns
in-action)</p> -->
Expand All @@ -85,8 +89,10 @@ <h2><span class="special-text">Workspaces</span>: Your team's Google Drive for c
<div class="image flex" style="flex-flow: column wrap;">
<div align="center" style="margin-top: 3rem;">
<div style="display: flex;">
<img src="/assets/images/features/workspace.gif" class="screenshot"
alt="Multi-cluster Kubernetes Manager" loading="lazy" />
<video autoplay loop muted playsinline class="screenshot" alt="Multi-cluster Kubernetes Manager">
<source src="/assets/images/features/workspace.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<span>
<!-- <p style="font-size: 1rem;margin:0rem;padding:0rem;color:#666;font-style: italic;">(excerpt: patterns
in-action)</p> -->
Expand All @@ -112,8 +118,10 @@ <h2>Manage infra performance with <span class="special-text">Performance Profile
<div class="image flex" style="flex-flow: column wrap;">
<div align="center" style="margin-top: 3rem;">
<div style="display: flex;">
<img src="/assets/images/features/performance-metrics.gif" class="screenshot"
alt="Multi-cluster Kubernetes Manager" loading="lazy" />
<video autoplay loop muted playsinline class="screenshot" alt="Multi-cluster Kubernetes Manager" >
<source src="/assets/images/features/performance-metrics.webm" type="video/webm" >
Your browser does not support the video tag.
</video>
<span>
<!-- <p style="font-size: 1rem;margin:0rem;padding:0rem;color:#666;font-style: italic;">(excerpt: patterns
in-action)</p> -->
Expand All @@ -129,7 +137,7 @@ <h2>Manage infra performance with <span class="special-text">Performance Profile
<div class="container flex">
<div class="text ">
<img src="/assets/images/meshmap-icon.svg" style="max-width:20%;position:relative;float:left;
margin-right:20px;margin-bottom: 10px;" loading="lazy" />
margin-right:20px;margin-bottom: 10px;" loading="lazy" alt="MeshMap icon"/>
<h2>See changes to your infra <span class="special-text">before you merge</span></h2>
<p>Get snapshots of your infrastructure directly in your PRs. Preview your deployment, view changes pull request-to-pull request and get infrastructure snapshots within your PRs by connecting MeshMap to your GitHub repositories.</p>
<!-- <ul style="line-height: 1.5em;height: auto;text-align: left; color: var(--color-secondary-light)">
Expand All @@ -150,8 +158,9 @@ <h2>See changes to your infra <span class="special-text">before you merge</span>
<div class="gradient-box-before">Before</div>
</div>
</div>
<input type="range" min="1" max="100" value="50" class="slider" name='slider' id="slider">
<div class='slider-button'></div>
<label for="slider" id="slider-label" class="sr-only">Adjust slider to compare before and after images</label>
<input type="range" min="1" max="100" value="50" class="slider" name="slider" id="slider" aria-labelledby="slider-label" aria-valuemin="1" aria-valuemax="100" aria-valuenow="50">
<div class='slider-button' role="button" aria-label="Drag to adjust slider" tabindex="0"></div>
</div>
</div>
</section>
Expand Down Expand Up @@ -192,8 +201,9 @@ <h2>{{ features.title }}</h2>
</div> -->
<div class="image flex" style="flex-flow: column wrap;">
<div align="center" style="margin-top: 3rem;">
<button id="video-modal" class="link recording-link" style="width:100%"><img
src="{{ features.videoPoster }}" loading="lazy" ></button>
<button id="video-modal" class="link recording-link" style="width:100%" aria-label="Open video modal" role="button">
<img src="{{ features.videoPoster }}" alt="Video thumbnail" loading="lazy">
</button>
<!-- <p style="font-size: 1rem;margin:0rem;padding:0rem;color:#666;font-style: italic;">(excerpt: patterns
in-action)</p> -->
{% include video-modal.html
Expand All @@ -214,8 +224,8 @@ <h2>{{ features.title }}</h2>
</div>
<div class="image flex">
<a style="width: 100%;" href="{{ features.image }}" data-fancybox="images"
data-caption="Webassembly based Envoy Filters">
<img src="{{ features.image }}" class="screenshot" loading="lazy" />
data-caption="Webassembly based Envoy Filters" aria-label="View image of WebAssembly-based Envoy Filters" >
<img src="{{ features.image }}" class="screenshot" loading="lazy" alt="{{ features.imageDescription }}"/>
</a>
</div>
</div>
Expand Down Expand Up @@ -257,8 +267,9 @@ <h2>{{ features.title }}</h2>
</div>
<div class="image flex" style="flex-flow: column wrap;">
<div align="center" style="margin-top: 3rem;">
<button id="video-modal" class="link recording-link" style="width:100%"><img
src="{{ features.videoPoster }}" loading="lazy" class="screenshot"></button>
<button id="video-modal" class="link recording-link" style="width:100%" aria-label="Play video" role="button">
<img src="{{ features.videoPoster }}" loading="lazy" class="screenshot" alt="Video poster">
</button>
<!-- <p style="font-size: 1rem;margin:0rem;padding:0rem;color:#666;font-style: italic;">(excerpt: patterns
in-action)</p> -->
{% include video-modal.html
Expand Down
14 changes: 9 additions & 5 deletions _includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="test" content="testing" />
<link rel="dns-prefetch" href="//www.googletagmanager.com">
<!-- Google Tag Manager -->
<meta name="description" content="{{ page.patternInfo | url_decode }}" />
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
<script defer>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
Expand All @@ -21,6 +22,9 @@
{% endif %}
<link rel="stylesheet" href="{{ site.baseurl }}/css/screen.css" />
<link rel="icon" type="image/png" href="{{ site.baseurl }}/favicon.ico" />
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
<link rel="dns-prefetch" href="http://cdn-images.mailchimp.com">
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans"
Expand Down Expand Up @@ -130,19 +134,19 @@

<div class="project-name">
<a href="{{ site.baseurl }}/">
<img src="{{ site.baseurl }}/assets/images/logos/meshery-logo.png" alt="Meshery Logo" />&nbsp;
<img src="{{ site.baseurl }}/assets/images/logos/meshery-logo.png" alt="Meshery Logo" loading="lazy"/>&nbsp;
<img src="{{ site.baseurl }}/assets/images/logos/meshery-logo-text.png"
data-logo-for-dark="{{ site.baseurl }}/assets/images/logos/meshery-logo-text.png"
data-logo-for-light="{{ site.baseurl }}/assets/images/logos/meshery-logo-text-dark.png" alt="Meshery Logo"
id="logo-dark-light" />
id="logo-dark-light" loading="lazy"/>
</a>
</div>
{% include navigation.html %}
<div class="nav-mode-icon" id="mode-toggle-btn" style="text-align: center;">
<div class="nav-mode-icon" id="mode-toggle-btn" style="text-align: center;" role="button" aria-label="Toggle dark and light mode" tabindex="0" aria-pressed="false">
<img class="nav-text" id="logo-dark-light"
src="{{ site.baseurl }}/assets/images/nav-icons/mode-toggle-icon-moon.png"
data-logo-for-dark="{{ site.baseurl }}/assets/images/nav-icons/mode-toggle-icon-moon.png"
data-logo-for-light="{{ site.baseurl }}/assets/images/nav-icons/mode-toggle-icon-sun.png" />
data-logo-for-light="{{ site.baseurl }}/assets/images/nav-icons/mode-toggle-icon-sun.png" alt="Toggle dark and light mode icon" loading="lazy"/>
</div>
</div>
</header>
Expand Down
6 changes: 3 additions & 3 deletions _includes/home-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,12 +116,12 @@ <h2 class="sub-text" style="padding-top:1rem; font-size: 1.05rem; font-weight: 5
<img class="meshery-repo"
src="https://img.shields.io/github/stars/meshery/meshery.svg?style=social&label=Stars" alt="Stars on meshery.io GitHub repository"
style="height: 1.75rem;
margin-top: 1rem;" />
margin-top: 1rem;" loading="lazy"/>
</a>
<a href="https://github.com/meshery/meshery">
<img class="meshery-repo"
src="https://img.shields.io/github/forks/meshery/meshery.svg?style=social&label=Fork" alt="Fork meshery.io GitHub repository" style="height: 1.75rem;
margin-top: 1rem;" />
margin-top: 1rem;" loading="lazy"/>
</a>
</div>
</section>
Expand Down Expand Up @@ -254,7 +254,7 @@ <h3 class="adopter-title">Add yourself as an <strong>adopter</strong></h3>
{% include testimonials.html %}
<section class="bg-white">
<div class="container cncf-section">
<h4>MESHERY IS A CLOUD NATIVE COMPUTING FOUNDATION PROJECT</h4>
<h3>MESHERY IS A CLOUD NATIVE COMPUTING FOUNDATION PROJECT</h3>

<img src="./assets/images/cncf-horizontal-color.svg" id="logo-dark-light"
data-logo-for-dark="./assets/images/cncf-light-logo.svg"
Expand Down
2 changes: 1 addition & 1 deletion _includes/navigation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
{% endfor %}
{% endif %}
<a {% if link.link %}href="{% include relative-src.html src=link.link %}" {% endif %} {% if link.submenu %} {% endif %} class="{{class}}"
{% if link.new_window %} target="_blank" {% endif %}>
{% if link.new_window %} target="_blank" {% endif %} aria-label="{{ link.name }}" >
{{ link.name }}
</a>

Expand Down
2 changes: 1 addition & 1 deletion _includes/partials/homePage-integrations.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ <h2>
<div class="card-front">
<img src="${iconURL}" loading="lazy" id="logo-dark-light"
data-logo-for-dark="${iconURL}"
data-logo-for-light="${iconURL}" />
data-logo-for-light="${iconURL}" alt= "integration-logo" role="img" />
</div>
<div class="card-back">
<p> ${item.name} </p>
Expand Down
12 changes: 6 additions & 6 deletions _includes/partials/relationships.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
<figure class="tabcontent hierarchical" id="hierarchical" data-fancybox="images" data-caption="Example: Kubernetes Deployment with ConfigMap applied" href="https://docs.meshery.io/assets/img/meshmodel/relationships/hierarchical_inventory_relationship.svg"><br>
<img alt="Example: Kubernetes Deployment with ConfigMap applied" src="{{ site.baseurl }}/assets/images/features/relationships/hierarchical_inventory_relationship.svg">
<img alt="Example: Kubernetes Deployment with ConfigMap applied" src="{{ site.baseurl }}/assets/images/features/relationships/hierarchical_inventory_relationship.svg" loading="lazy">
<figcaption>Example: Kubernetes Deployment with ConfigMap applied</figcaption>
</figure>

<figure class="tabcontent hierarchical" id="hierarchical" data-fancybox="images" data-caption=" Hierarchical - Parent: Namespace (Parent) and ConfigMap (child), Role (Child)" href="https://docs.meshery.io/assets/img/meshmodel/relationships/hierarchical_parent_relationship.svg"><br>
<img alt=" Hierarchical - Parent: Namespace (Parent) and ConfigMap (child), Role (Child)" src="{{ site.baseurl }}/assets/images/features/relationships/hierarchical_parent_relationship.svg">
<img alt=" Hierarchical - Parent: Namespace (Parent) and ConfigMap (child), Role (Child)" src="{{ site.baseurl }}/assets/images/features/relationships/hierarchical_parent_relationship.svg" loading="lazy">
<figcaption> Hierarchical - Parent: Namespace (Parent) and ConfigMap (child), Role (Child) </figcaption>
</figure>

<figure class="tabcontent edge" id="edge" data-fancybox="images" data-caption="Kubernetes Pod with Persistent Volume mounted via Persistent Volume Claim" href="https://docs.meshery.io/assets/img/meshmodel/relationships/edge_mount_relationship_pod_persistent_volume.svg"><br>
<img alt="Kubernetes Pod with Persistent Volume mounted via Persistent Volume Claim" src="{{ site.baseurl }}/assets/images/features/relationships/edge_mount_relationship_pod_persistent_volume.svg" style="display:block;">
<img alt="Kubernetes Pod with Persistent Volume mounted via Persistent Volume Claim" src="{{ site.baseurl }}/assets/images/features/relationships/edge_mount_relationship_pod_persistent_volume.svg" style="display:block;" loading="lazy">
<figcaption>Example: Kubernetes Pod with Persistent Volume mounted via Persistent Volume Claim</figcaption>
</figure>

<figure class="tabcontent edge" id="edge" data-fancybox="images" data-caption="Kubernetes Ingress mapped a Service" href="https://docs.meshery.io/assets/img/meshmodel/relationships/edge_network_ingress_to_service_relationship.svg"><br>
<img alt="Kubernetes Ingress mapped a Service" src="{{ site.baseurl }}/assets/images/features/relationships/edge_network_ingress_to_service_relationship.svg">
<img alt="Kubernetes Ingress mapped a Service" src="{{ site.baseurl }}/assets/images/features/relationships/edge_network_ingress_to_service_relationship.svg" loading="lazy">
<figcaption>Example: Kubernetes Ingress mapped a Service</figcaption>
</figure>

<figure class="tabcontent edge" id="edge" data-fancybox="images" data-caption="Kubernetes Cluster Role assigned to a Service Account" href="https://docs.meshery.io/assets/img/meshmodel/relationships/edge_permission_relationship_cluster_role_service_account.svg"><br>
<img alt="Kubernetes Cluster Role assigned to a Service Account" src="{{ site.baseurl }}/assets/images/features/relationships/edge_permission_relationship_cluster_role_service_account.svg">
<img alt="Kubernetes Cluster Role assigned to a Service Account" src="{{ site.baseurl }}/assets/images/features/relationships/edge_permission_relationship_cluster_role_service_account.svg" loading="lazy">
<figcaption>Example: Kubernetes Cluster Role assigned to a Service Account</figcaption>
</figure>

<figure class="tabcontent sibling" id="sibling" style="width: 60%;" data-fancybox="images" data-caption="Kubernetes Service and Deployment with matching label selectors" href="https://docs.meshery.io/assets/img/meshmodel/relationships/sibling_relationship.png"><br>
<img alt="Kubernetes Service and Deployment with matching label selectors" src="{{ site.baseurl }}/assets/images/features/relationships/sibling_relationship.png">
<img alt="Kubernetes Service and Deployment with matching label selectors" src="{{ site.baseurl }}/assets/images/features/relationships/sibling_relationship.png" loading="lazy">
<figcaption>Example: Kubernetes Service and Deployment with matching label selectors</figcaption>
</figure>

Expand Down
6 changes: 3 additions & 3 deletions _includes/testimonials.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ <h2>Hear what other users have to say...</h2>
<div class="bq-section">
<div class="type-one-wrapper type-one-wrapper-boxed">
<div class="bq-quote type-one-quote">
<div class="type-one-quote-userpic"><img src="{{ testimonial.image }}"></div>
<div class="type-one-quote-userpic"><img src="{{ testimonial.image }}" alt="Testimonial provider's picture" loading="lazy"></div>
<div class="type-one-quote-qmark">&#10077;</div>
<div class="type-one-quote-pattern"></div>
<div class="type-one-quote-base">
Expand All @@ -29,7 +29,7 @@ <h2>Hear what other users have to say...</h2>
<div class="type-two-quote-pattern">
<div class="type-two-quote-qmark">&#10077;</div>
</div>
<div class="type-two-quote-userpic"><img src="{{ testimonial.image }}"></div>
<div class="type-two-quote-userpic"><img src="{{ testimonial.image }}" alt="Testimonial provider's picture" loading="lazy"></div>
<div class="type-two-quote-base">
<blockquote class="type-two-quote-text">{{ testimonial.quote }}</blockquote>
<div class="type-two-quote-meta">
Expand All @@ -50,7 +50,7 @@ <h2>Hear what other users have to say...</h2>
<div class="type-three-quote-base">
<blockquote class="type-three-quote-text">{{ testimonial.quote }}</blockquote>
<div class="type-three-quote-meta">
<div class="type-three-quote-userpic"><img src="{{ testimonial.image }}"></div>
<div class="type-three-quote-userpic"><img src="{{ testimonial.image }}" alt="Testimonial provider's picture" loading="lazy"></div>
<div class="type-three-quote-meta-info">
<div class="type-three-quote-author"><cite>{{ testimonial.person | default: "" }}</cite></div>
<div class="type-three-quote-source"><span>{{ testimonial.title | default: "" }}</span></div>
Expand Down
Loading
Loading