From 8980fe398685dd2b20768caa7d7f6b77dcf5c0b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafael=20Gonz=C3=A1lez?= Date: Thu, 25 Aug 2022 08:03:59 -0500 Subject: [PATCH] Added netlify toml file --- netlify.toml | 8 +++ .../blog/optimizeing-shopify-theme-2.mdx | 56 +++++++++++-------- src/pages/index.astro | 2 +- 3 files changed, 43 insertions(+), 23 deletions(-) create mode 100644 netlify.toml diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 0000000..521da89 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,8 @@ +[dev] + framework = "astro" + +[[redirects]] + from="/blog/optimizeing-shopify-theme" + to="/blog/optimizeing-shopify-theme-1" + status=301 + force = true \ No newline at end of file diff --git a/src/pages/blog/optimizeing-shopify-theme-2.mdx b/src/pages/blog/optimizeing-shopify-theme-2.mdx index 5163e5d..8485e6f 100644 --- a/src/pages/blog/optimizeing-shopify-theme-2.mdx +++ b/src/pages/blog/optimizeing-shopify-theme-2.mdx @@ -37,7 +37,7 @@ 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. +theme, check out the [part 1](/blog/optimizeing-shopify-theme-1) of this series. #### Preconnecting to 3rd party servers and preloading known assets @@ -103,20 +103,20 @@ them by total time to load we can see the next result:
Lycklig Not Optimized Page Speed Insights Report - Lycklig Not Optimized Page Speed Insights Report + Lycklig JS Downloaded by Theme
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 ``` -All of themm are basic 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. +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.
Lycklig Not Optimized Page Speed Insights Report - Lycklig Not Optimized Page Speed Insights Report + Lycklig Modernizr Error
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 -larger prioblem we woud have gonne back to not removing the modernizr 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#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. diff --git a/src/pages/index.astro b/src/pages/index.astro index 2853faf..40411bd 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -38,7 +38,7 @@ for (let link of profileData.profesionalLinks) {
{personalLinks.map(perLink => ( - + ))}