Shopify APIs and SDKs

Jackson_Cunnin2 · ‎08-09-2016

https://developers.google.com/speed/pagespeed/insights/?url=vivomasks.com&tab=mobile

Some of these issues seem like Shopify issues rather than my specific store. After looking at page speed insights for a few Shopify stores, I haven't seen any with perfect scores. Any idea on how to fix, or is it impossible?

Mircea_Piturca · ‎08-09-2016

It is possible to increase the score but I had not seen 100. And this is because there are some assets injected by Shopify and 3rd party APPs that you do not have access to.

The overall score is not really the goal but having a low initial render time.

Finally—Add variant descriptions to your products

Jackson_Cunnin2 · ‎08-09-2016

Thanks! Can you recommend a good tool to calculate initial render time?

Mircea_Piturca · ‎08-09-2016

I usually use https://www.webpagetest.org.

You can set up various performance test that are performed on selected 3rd party servers.

Here is a load test: https://www.webpagetest.org/video/compare.php?tests=160809_D2_RPB-r:1-c:0

The test is performed on California USA - EC2 - Chrome - 3GFast

On the waterfall you will see what is loaded and the time that takes.

Finally—Add variant descriptions to your products

Pixus · ‎07-29-2021

Yes it is possible - we have Collection pages with 40 products, colour swatches, overlay images scoring 90. CMS pages scoring 91 to 95 and homepage with a good level of content scoring in the 85 / 89.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fpixusbase.myshopify.com%2F...

Takes a lot of code work and any apps will effect performance metrics so split and test so you know the hit every single app has on your site.

Test on lighthouse and google page speed and pay close attention to the weighting ( CTBT (Total Blocking Time) is 30% and LCP (Largest Contentful Paint) 35% so improvements to these areas will give the biggest impact with the least work. Some tips below:

Use Chrome dev tools - lighthouse - but test in incognito as this stops your browser apps from running so scores are more accurate
Use Google page speed also - but you’ll get more information from Lighthouse
Run several tests and take the average scores - ensure all your site apps are turned off
Test all key templates ( home, collections, product and cms) and ensure each has a realistic level of content - eg Collections with 40 products
You will see a shift in scores based on shopify server response times and this can deviate around 8 to 10% at times so ensure testing with apps on and off are done in quick succession.
Turn all apps off - test several times and take the average scores
Turn each app on and test - again do this several times on and off in quick succession to fully understand the impact of each app on your performance.
Report performance issues to the app developer - good developers will implement fixes so we will always report ideas and issues to the app developers.
Consider replacing poorly performing apps -0 again benchmark the hit on performance of all key apps so you are aware of the score drop
Test each template Home, Collections, Product page - some apps for product pages will have poorly constructed code and hit performance on the homepage.
Use DNS prefetch and Preload on external domains
Defer javascript where possible - but test to ensure functionality is not impacted
Split CSS to only load above the fold content elements.