Migrated to Astro 2.0
This commit is contained in:
Rafael González
@@ -0,0 +1,166 @@
|
||||
---
|
||||
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.
|
||||
@@ -0,0 +1,243 @@
|
||||
---
|
||||
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.
|
||||
@@ -0,0 +1,16 @@
|
||||
import { z, defineCollection } from "astro:content";
|
||||
|
||||
const blogCollection = defineCollection({
|
||||
schema: z.object({
|
||||
layout: z.enum(['../../layouts/main.astro']).optional(),
|
||||
date: z.date(),
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
exerpt: z.string(),
|
||||
image: z.string()
|
||||
}),
|
||||
});
|
||||
|
||||
export const collections = {
|
||||
'blog': blogCollection,
|
||||
};
|
||||
Reference in New Issue
Block a user