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

Jump to bottom

Improve Lighthouse Score of Meshery.io #1865

Closed
wants to merge 10 commits into from
Closed

Improve Lighthouse Score of Meshery.io #1865

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e86db25
Updated meshery.json with new discussion posts
leecalcote Aug 12, 2024
12b6052
Improved the Accessibility score for Meshery.io
shubhusion Aug 14, 2024
39043b4
Updated meshery.json with new discussion posts
leecalcote Aug 13, 2024
33ebc64
Updated meshery.json with new discussion posts
leecalcote Aug 14, 2024
17388be
Improved Accessibility score for Meshery.io
shubhusion Aug 14, 2024
e516142
Implemented lazy loading and converted images to webP format
shubhusion Aug 15, 2024
a6859c6
converted gif to webm format
shubhusion Aug 15, 2024
2bf25bb
preconnect to required origins and minifies subscribe.css
shubhusion Aug 15, 2024
e8cea73
converted gif to webm format
shubhusion Aug 17, 2024
479acea
Merge branch 'master' into patch-6
shubhusion Aug 17, 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
18 changes: 7 additions & 11 deletions Gemfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ GEM
http_parser.rb (~> 0)
eventmachine (1.2.7)
ffi (1.16.3)
ffi (1.16.3-x64-mingw-ucrt)
ffi (1.16.3-x64-unknown)
forwardable-extended (2.6.0)
google-protobuf (3.25.3-arm64-darwin)
google-protobuf (3.25.3-x64-mingw-ucrt)
google-protobuf (3.25.3-x64-unknown)
google-protobuf (3.25.3-x86_64-darwin)
google-protobuf (3.25.3-x86_64-linux)
http_parser.rb (0.8.0)
Expand Down Expand Up @@ -65,21 +65,17 @@ GEM
pathutil (0.16.2)
forwardable-extended (~> 2.6)
public_suffix (5.0.4)
rake (13.2.1)
rb-fsevent (0.11.2)
rb-inotify (0.10.1)
ffi (~> 1.0)
rexml (3.3.2)
strscan
rouge (4.2.0)
safe_yaml (1.0.5)
sass-embedded (1.63.6-arm64-darwin)
google-protobuf (~> 3.23)
sass-embedded (1.63.6-x64-mingw-ucrt)
google-protobuf (~> 3.23)
sass-embedded (1.63.6-x86_64-darwin)
google-protobuf (~> 3.23)
sass-embedded (1.63.6-x86_64-linux-gnu)
sass-embedded (1.63.6)
google-protobuf (~> 3.23)
rake (>= 13.0.0)
strscan (3.1.0)
terminal-table (3.0.2)
unicode-display_width (>= 1.1.1, < 3)
Expand All @@ -94,7 +90,7 @@ GEM
PLATFORMS
arm64-darwin-22
arm64-darwin-23
x64-mingw-ucrt
x64-unknown
x86_64-darwin-23
x86_64-linux

Expand All @@ -112,4 +108,4 @@ DEPENDENCIES
wdm (>= 0.1.0)

BUNDLED WITH
2.4.21
2.4.22
3 changes: 2 additions & 1 deletion _data/discuss/meshery.json
View file
Open in desktop

Large diffs are not rendered by default.

46 changes: 29 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,10 @@ <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
13 changes: 8 additions & 5 deletions _includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="dns-prefetch" href="//www.googletagmanager.com">
<!-- Google Tag Manager -->
<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 @@ -20,6 +21,8 @@
{% 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="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans"
Expand Down Expand Up @@ -121,19 +124,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
Loading
Loading