On a casual observation, noticed the site could achieve a couple enhancements around performance and SEO through
leveraging a couple Greenwood features.
Prerendering
Being able to prerender custom elements means that for example, the header and footer instead of just rendering out initially as just the tag
<app-header></app-header>
can now (pre) render out their entire HTML, generated at build time (you can check this out by viewing source in the browser for the sent HTML)
<app-header>
<header class="bg-white shadow-lg">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between">
<div class="flex space-x-5">
<div>
<a href="/" class="flex py-4 px-2">
<span class="text-black-500 text-xl">Cloud RI</span>
</a>
</div>
<nav class="space-x-1 pt-5">
<a href="/content/code-of-conduct/" class="py-4 px-2 text-gray-500 hover:text-green-500 transition duration-300">Code of Conduct</a>
<a href="/content/join/" class="py-4 px-2 text-gray-500 hover:text-green-500 transition duration-300">Join</a>
</nav>
</div>
</div>
</div>
</header>
</app-header>
This can be achieved with this setting
// greenwood.config.js
export default {
prerender: true
}
Static Optimization
For things like the header and footer that are just static and have no interactivity, we can optionally strip these tags away so there doesn't have to be any JavaScript loaded for these files
![Screenshot 2023-11-05 at 1 24 54 PM](https://private-user-images.githubusercontent.com/895923/280546864-0530f9bf-3e8b-424d-82f1-8c850fb60e11.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUyMjI5ODcsIm5iZiI6MTcyNTIyMjY4NywicGF0aCI6Ii84OTU5MjMvMjgwNTQ2ODY0LTA1MzBmOWJmLTNlOGItNDI0ZC04MmYxLThjODUwZmI2MGUxMS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQyMDMxMjdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hOGE3OWY1ZGRkMWJjNDdmMzgyNWRmOWIxYzI5NDkxYTRlMzg0ODEzYmU1Mjk5ZTdkMGMzM2QxODg5NjcyMGQ4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.XqyzTlBDdERqt0DX3sZWKItxIO2KGv1zQZfXehW3Ksg)
We can achieve this through by adding this attribute to the header and footer <script>
tags in app.html
<script type="module" src="/components/header.js" data-gwd-opt="static"></script>
So combined with prerender: true
we can now get fully static HTML and not have to load any JS! 🎉
![Screenshot 2023-11-05 at 1 28 42 PM](https://private-user-images.githubusercontent.com/895923/280547067-7d9645e4-3cad-46c7-bf68-927d45c1e726.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUyMjI5ODcsIm5iZiI6MTcyNTIyMjY4NywicGF0aCI6Ii84OTU5MjMvMjgwNTQ3MDY3LTdkOTY0NWU0LTNjYWQtNDZjNy1iZjY4LTkyN2Q0NWMxZTcyNi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQyMDMxMjdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zOGVlNGUxOGVjNWYxMDMyZmZjNGJjMmQyMzIxNTU0MWZlZTVlZjhhMDA0MDBiMGFkM2YyNThkNDFiZWZmZWRlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.ueDN6V8zaRJ4GiC73G2B2VFBFSNVcqXUe0lH45nZj3I)
Anyway, just some thoughts to share