style: Homepage performance improvements (#2806)

.github/workflows/publish-pr.yml

@@ -116,10 +116,10 @@ jobs:
   comment:
     permissions:
       pull-requests: write
-    needs: [deploy_netlify, metadata]
+    needs: [deploy_garage, metadata]
     runs-on: ubuntu-latest
     env:
-      address: ${{ needs.deploy_netlify.outputs.address }}
+      address: ${{ needs.deploy_garage.outputs.address }}
     steps:
       - uses: thollander/actions-comment-pull-request@v2.5.0
         with:

docs/index.md

@@ -86,7 +86,7 @@ Trying to protect all your data from everyone all the time is impractical, expen
 
 <div class="grid cards" markdown>
 
--   ![Proton Mail logo](assets/img/email/protonmail.svg){ .lg .middle .twemoji } **Proton Mail**
+-   ![Proton Mail logo](assets/img/email/protonmail.svg){ .lg .middle .twemoji loading=lazy } **Proton Mail**
 
     ---
 
@@ -94,7 +94,7 @@ Trying to protect all your data from everyone all the time is impractical, expen
 
     [:octicons-arrow-right-24: Read Full Review](email.md#proton-mail)
 
--   ![Mailbox.org logo](assets/img/email/mailboxorg.svg){ .lg .middle .twemoji } **Mailbox.org**
+-   ![Mailbox.org logo](assets/img/email/mailboxorg.svg){ .lg .middle .twemoji loading=lazy } **Mailbox.org**
 
     ---
 
@@ -102,7 +102,7 @@ Trying to protect all your data from everyone all the time is impractical, expen
 
     [:octicons-arrow-right-24: Read Full Review](email.md#mailboxorg)
 
--   ![Tuta logo](assets/img/email/tuta.svg#only-light){ .lg .middle .twemoji }![Tuta logo](assets/img/email/tuta-dark.svg#only-dark){ .lg .middle .twemoji } **Tuta**
+-   ![Tuta logo](assets/img/email/tuta.svg#only-light){ .lg .middle .twemoji loading=lazy }![Tuta logo](assets/img/email/tuta-dark.svg#only-dark){ .lg .middle .twemoji loading=lazy } **Tuta**
 
     ---
 
@@ -162,7 +162,7 @@ Trying to protect all your data from everyone all the time is impractical, expen
 
 ## About Privacy Guides
 
-![Privacy Guides logo](assets/brand/logos/png/square/pg-yellow.png){ align=right }
+![Privacy Guides logo](assets/brand/logos/png/square/pg-yellow.png){ align=right loading=lazy }
 
 Established in 2021 due to the difficulty of finding unbiased reviewers in the VPN and privacy space, **Privacy Guides** is the most popular, trustworthy, non-profit website that provides information about protecting your *personal* data security and privacy. Our crowdsourced recommendations and reviews of **privacy tools** and our community dedicated to helping others set us apart from other blogs and content creators. The team behind this project has been researching privacy and security in the open-source space for over 5 years, originally with a now-defunct web resource that eventually became the *Privacy Guides* millions of readers trust.
 

includes/strings.en.env

@@ -11,10 +11,8 @@ HOMEPAGE_CTA_DESCRIPTION="It's important for a website like Privacy Guides to al
 HOMEPAGE_DESCRIPTION="A socially motivated website which provides information about protecting your online data privacy and security."
 HOMEPAGE_RSS_CHANGELOG_LINK="https://discuss.privacyguides.net/c/site-development/changelog/9.rss"
 HOMEPAGE_RSS_CHANGELOG_TITLE="Privacy Guides release changelog"
-HOMEPAGE_RSS_BLOG_LINK="https://blog.privacyguides.org/feed_rss_created.xml"
+HOMEPAGE_RSS_BLOG_LINK="https://www.privacyguides.org/articles/feed_rss_created.xml"
 HOMEPAGE_RSS_BLOG_TITLE="Privacy Guides blog feed"
-HOMEPAGE_RSS_STORIES_LINK="https://share.privacyguides.org/web-stories/feed/"
-HOMEPAGE_RSS_STORIES_TITLE="Privacy Guides web stories feed"
 HOMEPAGE_RSS_FORUM_LINK="https://discuss.privacyguides.net/latest.rss"
 HOMEPAGE_RSS_FORUM_TITLE="Latest Privacy Guides forum topics"
 HOMEPAGE_HEADER="The collaborative privacy advocacy community."

mkdocs.yml

@@ -143,14 +143,7 @@ extra:
           link:
             !ENV [
               HOMEPAGE_RSS_BLOG_LINK,
-              "https://blog.privacyguides.org/feed_rss_created.xml",
+              "https://www.privacyguides.org/articles/feed_rss_created.xml",
-            ]
-        - title:
-            !ENV [HOMEPAGE_RSS_STORIES_TITLE, "Privacy Guides Web Stories feed"]
-          link:
-            !ENV [
-              HOMEPAGE_RSS_STORIES_LINK,
-              "https://share.privacyguides.org/web-stories/feed/",
             ]
         - title:
             !ENV [
@@ -284,8 +277,10 @@ theme:
 extra_css:
   - assets/stylesheets/extra.css?v=20240802
 extra_javascript:
-  - assets/javascripts/randomize-element.js?v=20240801
+  - path: assets/javascripts/randomize-element.js?v=20240801
-  - assets/javascripts/feedback.js?v=20240801
+    defer: true
+  - path: assets/javascripts/feedback.js?v=20240801
+    defer: true
 
 watch:
   - theme

theme/assets/javascripts/discourse-topics.js

@@ -79,6 +79,9 @@ async function main() {
       avatar.width = 20;
       avatar.height = 20;
       avatar.className = "middle";
+      avatar.loading = "lazy";
+      avatar.ariaHidden = "true";
+      avatar.alt = "";
       author.appendChild(avatar);
       var namespan = document.createElement('span');
       namespan.innerText = " Posted by " + author_data['username'];

theme/home.html

@@ -121,6 +121,6 @@
   {% endif %}
 {% endblock %}
 {% block scripts %}
-  <script src="{{ 'assets/javascripts/discourse-topics.js' | url }}"></script>
+  <script defer src="{{ 'assets/javascripts/discourse-topics.js' | url }}"></script>
   {{ super() }}
 {% endblock %}

theme/partials/alternate.html

@@ -27,7 +27,7 @@
     {% for alt in config.extra.alternate %}
       {% if alt.lang == config.theme.language %}
         <button class="md-header__button md-icon" aria-label="{{ lang.t('select.language') }}">
-          <img alt="{{ config.theme.language }}" class="twemoji" src="{{ alt.icon }}">
+          <img alt="{{ config.theme.language }}" class="twemoji" src="{{ alt.icon }}" width="20" height="20">
         </button>
       {% endif %}
     {% endfor %}
@@ -40,7 +40,7 @@
               hreflang="{{ alt.lang }}"
               class="md-select__link"
             >
-              <img alt="{{ alt.lang }}" class="twemoji" src="{{ alt.icon }}">
+              <img alt="{{ alt.lang }}" class="twemoji" src="{{ alt.icon }}" width="20" height="20">
               {{ alt.name }}
             </a>
           </li>

theme/partials/copyright.html

@@ -29,7 +29,7 @@
       <br />
       {{ copyright.note }}
       <br />
-      <a href='/license'>
+      <a href='/license' aria-label="More information about our website license.">
         {% for icon in copyright.license %}
           <span class="twemoji">{% include ".icons/" ~ icon ~ ".svg" %}</span>
         {% endfor %}

theme/partials/logo.html

@@ -23,5 +23,5 @@
 <img src="{{ 'assets/brand/logos/svg/logo/privacy-guides-rainbow-logo-notext.svg#only-light' | url }}" alt="logo">
 <img src="{{ 'assets/brand/logos/svg/logo/privacy-guides-rainbow-logo-notext-darkbg.svg#only-dark' | url }}" alt="logo">
 #} -->
-<img src="{{ 'assets/brand/logos/svg/logo/privacy-guides-logo-notext.svg#only-light' | url }}" alt="logo">
+<img src="{{ 'assets/brand/logos/svg/logo/privacy-guides-logo-notext.svg#only-light' | url }}" alt="logo" width="24" height="24">
-<img src="{{ 'assets/brand/logos/svg/logo/privacy-guides-logo-notext-darkbg.svg#only-dark' | url }}" alt="logo">
+<img src="{{ 'assets/brand/logos/svg/logo/privacy-guides-logo-notext-darkbg.svg#only-dark' | url }}" alt="logo" width="24" height="24">