From ef99356330a0e1b7d8cd57895054d6551743a36f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafael=20Gonz=C3=A1lez?= Date: Fri, 19 Aug 2022 13:04:20 -0500 Subject: [PATCH] Added new article --- src/pages/blog/optimizeing-shopify-theme.mdx | 154 ++++++++++++++++++- src/styles/base.css | 49 +++++- 2 files changed, 200 insertions(+), 3 deletions(-) diff --git a/src/pages/blog/optimizeing-shopify-theme.mdx b/src/pages/blog/optimizeing-shopify-theme.mdx index ecaa3d6..018bdd0 100644 --- a/src/pages/blog/optimizeing-shopify-theme.mdx +++ b/src/pages/blog/optimizeing-shopify-theme.mdx @@ -15,6 +15,7 @@ image: https://images.unsplash.com/photo-1506818144585-74b29c980d4b?crop=entropy Optimizing an old Shopify ThemeLycklig Party Shop 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. +calles Lycklig Party Shop +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. Web Page Test is a professional tool +for those looking to optimize in depth their site. + +Webpage Test Report: +[Report](https://www.webpagetest.org/result/220819_BiDc6R_B5K/). + +PageSpeed Insights Report: + +
+ Lycklig Not Optimized Page Speed Insights Report + Lycklig Not Optimized Page Speed Insights Report +
#### 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 + + + + + + + +``` + +#### 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: + +
+ Lycklig Not Optimized Page Speed Insights Report + Lycklig Not Optimized Page Speed Insights Report +
+ +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 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. + +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 +
+ +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. diff --git a/src/styles/base.css b/src/styles/base.css index 42f5258..171cb2a 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -24,6 +24,10 @@ @apply list-decimal mb-8 ml-8; } + main.blog ul { + @apply list-disc mb-8 ml-8; + } + main.blog li:not(:last-child) { @apply mb-4; } @@ -36,7 +40,50 @@ @apply mb-8; } - main.blog img { + main.blog img.cover { @apply w-full mb-8 aspect-[5/2] object-cover; } + + main.blog .image__container { + @apply w-full md:w-1/2 mx-auto mb-8 object-cover; + } + + main.blog .image__container img { + @apply w-full object-cover; + } + + main.blog .image__container small { + @apply text-xs; + } + + main.blog pre { + color: #f8fafc; + background-color: var(--tw-prose-pre-bg); + overflow-x: auto; + font-weight: 400; + font-size: .875em; + line-height: 1.7142857; + margin-top: 1.4285714285714286em; + margin-bottom: 2.2857142857142856em; + border-radius: 0.75rem; + padding: 1.25rem; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%); + display: flex; + } + + main.blog p code { + background-color: #0d1117; + color: #c9d1d9; + border-radius: 0.1rem; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%); + @apply p-1; + } + + main.blog pre .language-id { + @apply hidden; + } + + main.blog pre .language-id { + @apply w-full; + } } \ No newline at end of file