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

Added netlify toml file

This commit is contained in:
Rafael González 2022-08-25 08:03:59 -05:00
parent 21cc79ea7a
commit 8980fe3986
3 changed files with 43 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
netlify.toml Normal file
View File

@ -0,0 +1,8 @@
[dev]
framework = "astro"
[[redirects]]
from="/blog/optimizeing-shopify-theme"
to="/blog/optimizeing-shopify-theme-1"
status=301
force = true

54
src/pages/blog/optimizeing-shopify-theme-2.mdx
View File

@ -103,20 +103,20 @@ them by total time to load we can see the next result:
<div class="image__container"> <div class="image__container">
<img <img
alt="Lycklig Not Optimized Page Speed Insights Report" alt="Lycklig JS Download"
style="aspect-ratio: 968/895;" style="aspect-ratio: 4/3;"
src="https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_300/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png" 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/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 300w, 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/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 500w, 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/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 760w, 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/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 968w" 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, sizes="(max-width: 310px) 300px,
(max-width: 510px) 500px, (max-width: 510px) 500px,
(max-width: 768px) 760px, (max-width: 768px) 760px,
(max-width: 1024px) 500px, (max-width: 1024px) 500px,
968px" 968px"
/> />
<small>Lycklig Not Optimized Page Speed Insights Report</small> <small>Lycklig JS Downloaded by Theme</small>
</div> </div>
There are 5 super slow scripts: There are 5 super slow scripts:
@ -129,31 +129,43 @@ There are 5 super slow scripts:
- https://cdn.shopify.com/s/trekkie.storefront.ebdc6f6e0c97d8f5d6a7dac9bc6ab298fff7cf1b.min.js - https://cdn.shopify.com/s/trekkie.storefront.ebdc6f6e0c97d8f5d6a7dac9bc6ab298fff7cf1b.min.js
``` ```
All of themm are basic scripts with the exception of modernizr. Lets go ahead All of themm are essential scripts with the exception of modernizr. Lets go
and remove modernizr file from the `theam.liquid` file and check that there are ahead and remove modernizr file from the `theam.liquid` file and check that
no errors. there are no errors.
We got an error in the `theme.js` file. Lets see if we can fix it by removing We got an error in the `theme.js` file. Lets see if we can fix it by removing
any reference to modernizr. any reference to modernizr.
<div class="image__container"> <div class="image__container">
<img <img
alt="Lycklig Not Optimized Page Speed Insights Report" alt="Lycklig Modernizr Error"
style="aspect-ratio: 968/895;" style="aspect-ratio: 22/5;"
src="https://res.cloudinary.com/acromatico-development/image/upload/c_scale,f_auto,w_300/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png" 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/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 300w, 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/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 500w, 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/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 760w, 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/v1660926662/Rafa%20Blog/lycklig-initial-test_jz8jly.png 968w" 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, sizes="(max-width: 310px) 300px,
(max-width: 510px) 500px, (max-width: 510px) 500px,
(max-width: 768px) 760px, (max-width: 768px) 760px,
(max-width: 1024px) 500px, (max-width: 1024px) 500px,
968px" 968px"
/> />
<small>Lycklig Not Optimized Page Speed Insights Report</small> <small>Lycklig Modernizr Error</small>
</div> </div>
We found a `Modernizr` instance being referenced in diferent parts of the file. We found a `Modernizr` instance being referenced in diferent parts of the file.
We just carefully deleted them and the error was gone. If this had become a We just carefully deleted them and the error was gone. The problem was that all
larger prioblem we woud have gonne back to not removing the modernizr file. 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#lcp-full)
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.
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.