rafaremo/rafa-links
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrated to Astro 2.0

Browse Source
This commit is contained in:
Rafael González
2023-02-22 22:35:07 -06:00
parent d7845ad4aa
commit a73a6220f5
12 changed files with 3955 additions and 4210 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/blog/[slug].astro
+16
View File
@@ -0,0 +1,16 @@
---
import { getCollection } from 'astro:content';
// 1. Generate a new path for every collection entry
export async function getStaticPaths() {
const blogEntries = await getCollection('blog');
return blogEntries.map(entry => ({
params: { slug: entry.slug }, props: { entry },
}));
}
// 2. When it's time to render, you can get the entry directly from the prop
const { entry } = Astro.props;
const { Content } = await entry.render();
---
<Content />
src/pages/blog.astro → src/pages/blog/index.astro
+12 -9
View File
@@ -1,12 +1,15 @@
---
import MainLayout from "../layouts/main.astro";
const posts = await Astro.glob("../pages/blog/*.mdx");
import MainLayout from "../../layouts/main.astro";
import {getCollection} from "astro:content";
const posts = await getCollection("blog");
console.log(posts[0].slug);
const postByDate = posts
.sort((a, b) => {
return (
new Date(b.frontmatter.date).getTime() -
new Date(a.frontmatter.date).getTime()
new Date(b.data.date).getTime() -
new Date(a.data.date).getTime()
);
})
.reverse();
@@ -21,18 +24,18 @@ const postByDate = posts
<section class="grid grid-cols-2 md:grid-cols-4 gap-4">
{
postByDate.map((post) => (
<a href={`${post.url}`} class="">
<a href={`/blog/${post.slug}`} class="">
<article class="border-2 border-gray-800 dark:border-gray-200 dark:text-gray-200 dark:hover:text-white text-gray-800 hover:text-black">
<img src={post.frontmatter.image} />
<img src={post.data.image} />
<div class="p-4">
<h3 class="mb-4 uppercase">
{post.frontmatter.title}
{post.data.title}
</h3>
<p class="text-s mb-2">
{post.frontmatter.exerpt}
{post.data.exerpt}
</p>
<p class="text-s text-gray-600 dark:text-gray-400 text-sm">
{new Date(post.frontmatter.date).toLocaleDateString("es-US")}
{new Date(post.data.date).toLocaleDateString("es-US")}
</p>
</div>
</article>
src/pages/blog/optimizeing-shopify-theme-1.mdx
-166
View File
@@ -1,166 +0,0 @@
---
layout: ../../layouts/main.astro
date: 2022-08-18
title: Optimizing performance of an old Shopify Theme (Part 1)
description:
Some tips and recommendations for optimizing and boosting performance of an
old Shopify theme.
exerpt:
Some tips and recommendations for optimizing and boosting performance of an
old Shopify theme.
image: https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=350&ar=16:9&fit=crop
---
# Optimizing an old Shopify Theme (Part 1)
<img
alt="Optimizing an old Shopify Theme"
class="cover"
src="https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=300&ar=5:2&fit=crop"
srcset="https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=300&ar=5:2&fit=crop 300w,
https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=500&ar=5:2&fit=crop 500w,
https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=800&ar=5:2&fit=crop 800w,
https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=1024&ar=5:2&fit=crop 1024w"
sizes="(max-width: 310px) 300px,
(max-width: 510px) 500px,
(max-width: 810px) 800px,
1024px"
/>
## Some tips and recommendations for optimizing and boosting performance of an old Shopify theme.
At <a href="https://acromatico.dev" target="_blank">Acromático Development</a>
we are always helping our clients optimize their Shopify stores, not only the UX
and UI, but also the performance and speed of the site. Optimizing a Shopify
theme is not a simple task, it has been a long learning path that continues
evolving and improving as we test and try new methodologies.
In this first blog post I want to share some of the things I've learned during
this process, that way maybe I can help other jump through some of the hard
parts of successfully optimizing a Shopify theme.
### Web Vitals and Shopify Themes
If you are reading this post it is because you’ve probably been trying to find
ways to optimize your store theme or a client theme. Shopify shows an average
score for the theme by running three pages through Google Lightspeed daily,
these three pages are the home page, product page and collection page.
If you run these pages via pagespeed.web.dev you’ll notice that the score is
given by the result of some Google indicators called Web Vitals, the most
important Web Vitals are:
1. **Largest Contentful Paint (LCP):** Is an important, user-centric metric for
measuring perceived load speed because it marks the point in the page load
timeline when the page's main content has likely loaded—a fast LCP helps
reassure the user that the page is useful.
[Philip Walton. “Largest Contentful Paint” web.dev, Aug 17, 2022.](https://web.dev/i18n/en/lcp/)
2. **Cumulative Layout Shift (CLS):** Is a measure of the largest burst of
layout shift scores for every unexpected layout shift that occurs during the
entire lifespan of a page.
[Philip Walton. “Cumulative Layout Shiftt” web.dev, Aug 17, 2022.](https://web.dev/i18n/en/cls/)
3. **First Contentful Paint (FCP):** Is an important, user-centric metric for
measuring perceived load speed because it marks the first point in the page
load timeline where the user can see anything on the screen—a fast FCP helps
reassure the user that something is happening.
[Philip Walton. “First Contentful Paint” web.dev, Aug 17, 2022.](https://web.dev/i18n/en/fcp/)
4. **Time to First Bite (TTFB):** Is a foundational metric for measuring
connection setup time and web server responsiveness in both the lab and the
field. It helps identify when a web server is too slow to respond to
requests. In the case of navigation requests—that is, requests for an HTML
document—it precedes every other meaningful loading performance metric.
[Jeremy Wagner. “Time to First Byte” web.dev, Jul 26, 2022.](https://web.dev/ttfb/)
Some of these metrics can be optimized by making changes in the theme code, some
others like TTFB have to do with the server, how fast it renders and sends the
initial HTML to the client.
### Initial Analysis
Let's start by (in a really broad sense) diferenciating the optimizations that
can be done on a Site. We started by separating them in two main areas:
1. **Optimizing the Server:** Changes that have to do with where you are hosting
the page, things like having a fast and reliable CDN, having all the correct
catching policies, how fast the server responds, how near to the end user the
server is located, etc. This part is nearly imposible to optimize for a
Shopify theme since all this part is controlled by Shopify itself.
As well the amount of Liquid code the server has to render can affect the
speed of response of the server, if there's one thing to take care of in this
section is the amount of complicated liquid code you are using in your theme.
2. **Optimizing the Code:** Changes that have to be done on the code of the
theme, here's where most of our efforts will be focused. Things like
preconnecting to 3rd party servers, preloading assets, removing unused code,
optimizing images and orchestating CSS and JavaScript loading times are the
things we are going to focus on this section.
### Optimizing the Code
I know there are many ways to aproach the optimization of the differents parts
of the code, but this is the process I follow, I hope that it makes sense for
the mayority of the cases. For this example I will use one of our client's
themes (we have previus authorisation to use this theme as an example), the
store is called <a href="https://lycklig.com.mx" target="_blank">Lycklig Party
Shop</a> and they sell party supplies. They have been in Shopify since 2016 and
the theme has been the same sinse the start of the store.
#### Running the first control tests
I use two tools to measure the progress that was achieved with the optimization.
Google Page Speed Insights and Web Page Test. Both tools are great, Google Page
Speed Insights is required since one of the main goals of optimizing a Shopify
store is to rank better in Google searches by having better Web Vitals. Web Page
Test is a professional tool for those looking to have a deeper look into
optimizing a site.
Webpage Test Report:
[Report](https://www.webpagetest.org/result/220819_BiDc6R_B5K/).
PageSpeed Insights Report:
<div class="image__container">
<img
alt="Lycklig Not Optimized Page Speed Insights Report"
style="aspect-ratio: 968/895;"
src="https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_300/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png"
srcset="https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_300/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 300w,
https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_500/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 500w,
https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_760/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 760w,
https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_968/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 968w"
sizes="(max-width: 310px) 300px,
(max-width: 510px) 500px,
(max-width: 768px) 760px,
(max-width: 1024px) 500px,
968px"
/>
<small>Lycklig Not Optimized Page Speed Insights Report</small>
</div>
We can see in both cases the theme is not as badly optimized, by looking at the
main Web Vitals we can see that the main areas of opportunity are the LCP and
CLS, as mentioned before this has to do mostly with all the heavy assets the
site has to download and render or execute, as well the CLS has to do with the
way the page renderes eather the images or dynamic stuff loaded with JavaScript.
Most Shopify themes have the same or similar problems and the main area where
the templates suffer is the LCP and CLS. Some others have bad FCP nad TTFB
because of the bad ussage of liquid when building the theme, there is too much
liquid that takes long to render in the server and the usage of legacy liquid
code like `{% include 'name_of_file' %}` instead of
`{% render 'name_of_file' %}` slow down the initial response time.
Shopify has a CDN layer that catches the pages, but the catching policy can not
be too long since theres a lot of dynamic content in an e-commerce site.
This is Part 1 of these blog series, if you want to learn abot the practical
steps to optimize a Shopify theme read
[part 2](/blog/optimizeing-shopify-theme-2) of this blog entry.
src/pages/blog/optimizeing-shopify-theme-2.mdx
-243
View File
@@ -1,243 +0,0 @@
---
layout: ../../layouts/main.astro
date: 2022-08-18
title: Optimizing performance of an old Shopify Theme (Part 2)
description:
Some tips and recommendations for optimizing and boosting performance of an
old Shopify theme.
exerpt:
Some tips and recommendations for optimizing and boosting performance of an
old Shopify theme.
image: https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=350&ar=16:9&fit=crop
---
# Optimizing an old Shopify Theme (Part 2)
<img
alt="Optimizing an old Shopify Theme"
class="cover"
src="https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=300&ar=5:2&fit=crop"
srcset="https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=300&ar=5:2&fit=crop 300w,
https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=500&ar=5:2&fit=crop 500w,
https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=800&ar=5:2&fit=crop 800w,
https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzNTMzMzl8MHwxfGFsbHx8fHx8fHx8fDE2NjA3OTI2NjA&ixlib=rb-1.2.1&q=80&w=1024&ar=5:2&fit=crop 1024w"
sizes="(max-width: 310px) 300px,
(max-width: 510px) 500px,
(max-width: 810px) 800px,
1024px"
/>
## Some tips and recommendations for optimizing and boosting performance of an old Shopify theme.
At <a href="https://acromatico.dev" target="_blank">Acromático Development</a>
we are always helping our clients optimize their Shopify stores, not only the UX
and UI, but also the performance and speed of the site. Optimizing a Shopify
theme is not a simple task, it has been a long learning path that continues
evolving and improving as we test and try new methodologies.
This is a continuation of the Optimizing an old Shopify Theme series, if you
want to read about the initial analysis done to know what to look for in a
theme, check out the [part 1](/blog/optimizeing-shopify-theme-1) of this series.
#### Preconnecting to 3rd party servers and preloading known assets
One of the easiest and most effective things to do when optimizing a Shopify
theme is to make sure that the site has the basic servers preconnected and ready
to be used by the files and assests that will be downloaded.
Using the experiments tab on the WebPage test app we found out the next servers
could be preconnected:
- fonts.gstatic.com
- cdn.shopify.com
- fonts.shopifycdn.com
As well we found out there were 2 filles that could be preloaded:
```text
- https://a.klaviyo.com/media/js/onsite/onsite.js
- https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js (Yes, this site still uses JQuery)
- https://fonts.googleapis.com/css?family=Lora:700
- https://fonts.googleapis.com/css?family=Open+Sans:400
```
We added the next lines to the head of the theme:
```html
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="preconnect" href="https://cdn.shopify.com" />
<link rel="preconnect" href="https://fonts.shopifycdn.com" />
<link
rel="preload"
href="https://a.klaviyo.com/media/js/onsite/onsite.js"
as="script"
/>
<link
rel="preload"
href="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"
as="script"
/>
<link
rel="preload"
href="https://fonts.googleapis.com/css?family=Lora:700"
as="style"
/>
<link
rel="preload"
href="https://fonts.googleapis.com/css?family=Open+Sans:400"
as="style"
/>
```
#### Removing unused and slow scripts
This next step is super easy and can help a lot when optimizing a Shopify theme.
Normally a merchant will install apps or manually add code for certain
functionality they needed. If it is an old theme it is super easy to forget you
installed apps or added code that you are not longer using. In the best scenario
it will be code that gets downloaded and slows down the site, in the worst
scenario, it will generate errors.
By going to the console and the network tab we filter the JS Files and order
them by total time to load we can see the next result:
<div class="image__container">
<img
alt="Lycklig JS Download"
style="aspect-ratio: 4/3;"
src="https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_300/v1661395344/Rafa%20Blog/lycklig-js-download_siplp5.png"
srcset="https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_300/v1661395344/Rafa%20Blog/lycklig-js-download_siplp5.png 300w,
https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_500/v1661395344/Rafa%20Blog/lycklig-js-download_siplp5.png 500w,
https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_760/v1661395344/Rafa%20Blog/lycklig-js-download_siplp5.png 760w,
https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_968/v1661395344/Rafa%20Blog/lycklig-js-download_siplp5.png 968w"
sizes="(max-width: 310px) 300px,
(max-width: 510px) 500px,
(max-width: 768px) 760px,
(max-width: 1024px) 500px,
968px"
/>
<small>Lycklig JS Downloaded by Theme</small>
</div>
There are 5 super slow scripts:
```text
- https://cdn.shopify.com/shopifycloud/shopify/assets/shop_events_listener-65cd0ba3fcd81a1df33f2510ec5bcf8c0e0958653b50e3965ec972dd638ee13f.js
- https://cdn.shopify.com/s/files/1/1866/3075/t/8/assets/modernizr.min.js?v=21391054748206432451628529599
- ttps://cdn.shopify.com/shopifycloud/boomerang/shopify-boomerang-1.0.0.min.js
- https://cdn.shopify.com/s/files/1/1866/3075/t/8/assets/theme.js?v=95155629628367876391628529613
- https://cdn.shopify.com/s/trekkie.storefront.ebdc6f6e0c97d8f5d6a7dac9bc6ab298fff7cf1b.min.js
```
All of themm are essential scripts with the exception of modernizr. Lets go
ahead and remove modernizr file from the `theam.liquid` file and check that
there are no errors.
We got an error in the `theme.js` file. Lets see if we can fix it by removing
any reference to modernizr.
<div class="image__container">
<img
alt="Lycklig Modernizr Error"
style="aspect-ratio: 22/5;"
src="https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_300/v1661395373/Rafa%20Blog/lycklig-modernizr_mcanhk.png"
srcset="https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_300/v1661395373/Rafa%20Blog/lycklig-modernizr_mcanhk.png 300w,
https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_500/v1661395373/Rafa%20Blog/lycklig-modernizr_mcanhk.png 500w,
https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_760/v1661395373/Rafa%20Blog/lycklig-modernizr_mcanhk.png 760w,
https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_968/v1661395373/Rafa%20Blog/lycklig-modernizr_mcanhk.png 968w"
sizes="(max-width: 310px) 300px,
(max-width: 510px) 500px,
(max-width: 768px) 760px,
(max-width: 1024px) 500px,
968px"
/>
<small>Lycklig Modernizr Error</small>
</div>
We found a `Modernizr` instance being referenced in diferent parts of the file.
We just carefully deleted them and the error was gone. The problem was that all
the icons of the theme changed to text 👎. This has become a larger prioblem so
we will go back to not removing the modernizr file.
#### Images Optimization and Elements with Layout Shifts
By looking at the
[Web Vitals Webpage Test Report](https://www.webpagetest.org/vitals.php?test=220819_BiDc6R_B5K&run=3#cls)
we can see diferent elements that produce layout shifts. The main one is the
announcement bar. Lets add a fix height to the announcement bar to fix that
issue.
As well the main logo appears from no where and moves the size of the header. We
can add an aspect ratio property to the logo to fix that by adding
`aspect-ratio: 10/3;` to the logo style tag.
Something we noted in the code was that all the images of the theme have lazy
loading added, even the initially rendered ones. We removed all the lazuy
loading added to the initial images. as well we added a `srcset` attribute and a
`sizes` attribute to the images and even some images where still rendered with
the CSS `background-image` property, we changed that to be an `img` tag.
This is the code to render the images of the slider before the changes:
```html
<style>
@media screen and (max-width: 1024px) and (max-height: 768px) {
.hero__image--{{ block.id }} {
background-image: url('{{ block.settings.image | img_url: '1024x1024' | format: 'jpg' }}');
}
}
@media screen and (min-width: 1025px), screen and (min-height: 769px) {
.hero__image--{{ block.id }} {
background-image: url('{{ block.settings.image | img_url: '2048x2048' | format: 'jpg' }}');
}
}
</style>
<div
class="hero__image hero__image--{{ block.id }}"
data-image="{{ block.settings.image | img_url: '1024x1024' | format: 'jpg' }}"
></div>
```
After we changed the code it looked like this:
```html
<div class="hero__image hero__image--{{ block.id }}">
<img
srcset="{{ block.settings.image | img_url: '320x320' }} 320w,
{{ block.settings.image | img_url: '480x480' }} 480w,
{{ block.settings.image | img_url: '800x800' }} 800w,
{{ block.settings.image | img_url: '1024x1024' }} 1024w,
{{ block.settings.image | img_url: '2048x2048' }} 2048w"
sizes="(max-width: 320px) 320px,
(max-width: 480px) 480px,
(max-width: 800px) 800px,
(max-width: 1024px) 1024px,
2048px"
src="{{ block.settings.image | img_url: '2048x2048' }}"
loading="lazy"
width="2048"
height="2048"
alt="{{ block.settings.image.alt | escape }}"
class=""
/>
</div>
```
### The Final Results
Over all we think the theme was all ready well optimized, changes where minor
and the most relevant change had to do with the slider images. There are other
areas of improvement like removing modernizr and jquery from the base libraries
the theme uses but that is considered a huge change in which case it would be
better to consider migrating to a newer theme.
The final reports made in Web Page Test ands Google Page Speed Insights are
available here:
- [Web Page Test Report](https://www.webpagetest.org/result/220825_BiDc5H_AXN/)
- [Google Page Speed Insights](https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.lycklig.com.mx%2F)
Hope this entry helps you optimizing your Shopify Themes, this same concept can
be applied to any web page with the difference of the usage of liquid and maybe
having more control over the scripts that are being loaded in the page.