style: Homepage performance improvements (#2806)

Author: jonaharagon

.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/[email protected]
         with:

docs/index.md

@@ -86,23 +86,23 @@ 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**
 
     ---
 
     Proton Mail is an email service with a focus on privacy, encryption, security, and ease of use. They have been in operation since 2013. Proton AG is based in Genève, Switzerland. The Proton Mail Free plan comes with 500MB of Mail storage, which you can increase up to 1GB for free.
 
     [: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**
 
     ---
 
     Mailbox.org is an email service with a focus on being secure, ad-free, and privately powered by 100% eco-friendly energy. They have been in operation since 2014. Mailbox.org is based in Berlin, Germany. Accounts start with up to 2GB storage, which can be upgraded as needed.
 
     [: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",
-            ]
-        - title:
-            !ENV [HOMEPAGE_RSS_STORIES_TITLE, "Privacy Guides Web Stories feed"]
-          link:
-            !ENV [
-              HOMEPAGE_RSS_STORIES_LINK,
-              "https://share.privacyguides.org/web-stories/feed/",
+              "https://www.privacyguides.org/articles/feed_rss_created.xml",
             ]
         - title:
             !ENV [
@@ -284,8 +277,10 @@ theme:
 extra_css:
   - assets/stylesheets/extra.css?v=20240802
 extra_javascript:
-  - assets/javascripts/randomize-element.js?v=20240801
-  - assets/javascripts/feedback.js?v=20240801
+  - path: assets/javascripts/randomize-element.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 @@ <h3>Latest discussions</h3>
   {% 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-darkbg.svg#only-dark' | 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" width="24" height="24">