Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hello,
I received an 89 for desktop but only a 45 on mobile site speed diag. I am hoping to get some assistance really increasing the speed to something much better.
This is what I have shown. I would love some direction or if someone thinks they could speed up my site by a lot for a reasonable price I am willing to pay. Id love to just be able to take the suggestions in the diag but I fear without proper directions I would mess something up more than help. Thanks!
Hi,
You have many script in <head>. While those scripts not executed user can't see page content. On the slow devices scripting can be long time. So you have bad Lightspeed score.
Try to move some scripts from <head> immediately after <body> tag. I believe you get better page speed score after.
You can try add async="async" attribute to scrips what load form cdn as well.
Couple of examples below.
I will look into that thank you
Hi @BoogieThreads
Welcome to the Shopify Community!
I'm Ani from MS Web Designer. I assisted over 1000 Shopify Store owners in optimizing their website loading speed for mobile and desktop and increasing their conversion rate. I will love to help you with some expert feedback here.
- Kindly Provide your Store Url,
- Also, Mention Which Shopify theme you are using
- How many Apps are you using?
Note: If your store is protected with a ‘store Font password,’ please Send it here or DM me.
If you have any concerns feel free to ask me!
Pro Tips :
Proven Shopify App to Improve and Sales Conversion Dramatically
Coupon Discount Popup in Cart :
https://apps.shopify.com/available-discount-coupon-list-on-cart-page
- Show Selected Coupons on Cart
- Show Saving on Cart Value
- Boost Conversion Rate & AOV
Elegant Sticky Add to Cart, Floating Cart, Sticky Checkout
https://apps.shopify.com/cart2sale
Recover abandoned carts and market better with web push
https://apps.shopify.com/pushowl?
Regards,
Ani
Hey thanks Ani!
- Kindly Provide your Store Url,
- Also, Mention Which Shopify theme you are using
Venture theme (I found out today I am on an older version V11, so after I can switch everything to the updates V12 hopefully some improvements happen)
- How many Apps are you using?
about 15-20 various apps
please let me know if you have any more questions. Thanks!
Hello @BoogieThreads,
Here are some tips that you should consider for improving the page speed of your product page.
Although we advise you to follow these guidelines only if you have knowledge about liquid.
1-) Reduce the impact of third-party code: There are a few third-party codes that reduce page speed while loading the page like Facebook, Instagram, etc we can make the theme execute after some time when the whole page gets displayed.
2-) Use passive listeners to improve scrolling performance: Passive listeners enable developers to opt-in to better scroll performance by eliminating the use of mouse wheel scroll or touch scroll when not needed with event listeners.
3-) Minimize main-thread work: Removing third-party JavaScript, and reducing the complexity of your styles and layouts can help you optimize the page speed.
4-) Avoid an excessive DOM(Document Object Model): Reducing the DOM size can help Increase the speed of your website.
5-) First Contentful Paint: The First Contentful Paint (FCP) metric measures the time difference between a page load start time to the page's first content appearance. According to lighthouse, FCP must Be Below 1.2.
6-) Reduce JavaScript execution time: Javascript code must be optimized and compressed for better page speed.
7-) Serve static assets with an efficient cache policy: Serving static assets with an efficient cache policy helps improve page load times on repeat visits by storing these files locally in the user's browser.
8-) Avoid chaining critical requests: Chaining critical requests is a sequence of requests that depends on each other and are crucial for generating content on the web page. The “avoid chaining critical requests” warning means that the critical resources that load the web page are excessively large.
9-) Largest Contentful Paint element
Largest Contentful Paint (LCP) is a Core Web Vitals metric, that ensures how fast the main content of a web page loads. A good website must have an LCP of 2.5 seconds or less for at least 75% of page visits.
10-) Avoid large layout shifts: Large layout shifts can affect your page speed. It can be reduced by using a media query and fixing the image by assigning the width and height of images thus helping to better page load speed.
You can also reach to our team of experts who can help you with fixing this issue, if you are not well versed with technical aspects of your shopify store..
Hope it helps
Regards,
CedCommerce
Hello @BoogieThreads,
Please share your store URL.
I have a few tips you can consider to speed up your store.
1. Removing unused app code
Remove the Shopify apps to avoid running code for unused features, and makes your theme code easier to read. Also, consider removing the code that was added as part of the app install process.
2. Use a theme that is optimized for performance
Choose a theme that is responsive, fast, and takes minimal time to load the page. Themes with numerous sliders, fancy animations, advanced navigation systems, etc., will affect your page speed.
3. Disable theme features you don't use as themes contain CSS, JS, and HTML which can increase and affect your store speed
4. Loading extra data your customers aren't using can impact your store speed without adding value.
5. Avoid unnecessary redirects and fix broken links
6. Consider using a system font
Use a System font which is a font that is already installed on most computers. For example Segoe UI, Times New Roman. If you use a font that does not yet exist on your customer's computer, then the font has to be downloaded before your text can be displayed. This impacts the time that your store takes to load.
7. Reduce the use of large-sized images
Image compression is important and a necessity for faster loading of web pages. Make sure your images are of good quality and do not add too many images on a single page. You can try some tools like https://tinyjpg.com/.
8. Use minified CSS and JS files
9. Replace GIFs with static images
10. To reduce the initial load time, you can use Lazyload technique
11. Minimize HTTP requests. For example: Combine & inline your CSS scripts
Hope that the above tips will help you decrease the load on your web pages.
Gina
flareAI: Generate Sales from Google Search, on Autopilot
Hey thanks Gina!
My url is www.boogiethreads.com
thank you for the suggestions I will look into them. Most of it is probably too advanced for my knowledge of liquid. Is this something you would be willing to offer?
Thank you,
Damen
Hello @BoogieThreads,
At first, you should properly analyze your online store speed with one of these tools: Google PageSpeed Insights, GTmetrix, DevTools Google Chrome, and WebPageTest. Then, you will get a detailed test result with all the issues detected on both the front and back-end of your website. With that information in hand, you can follow these steps to improve your Shopify store speed and performance:
revise the installed apps
optimize images
use Lazy Load
find an alternative to the homepage hero slider
reduce the number of HTTP requests
enhance the mobile performance with AMP
minimize redirects and get rid of broken links
upgrade your Shopify plan
I suggest you should take a look at this article https://whidegroup.com/blog/shopify-performance-optimization/ to find out more details about how to optimize a Shopify store speed.
HI @BoogieThreads,
When it comes to site speed, please note that there are several factors impacting your online store speed, some of which you can control, others you cannot.
Factors you can't control
Your customer's device, network, and location
Shopify infrastructure
Content delivery network (CDN)
Local browser cache
Server-side page cache
The assets inside the content_for_header Liquid tag
Factors you can control
When you add apps to change the functionality or appearance of your online store, they add code into the theme so they can run. Some code can be removed or reordered to improve your online store's performance. If you're not using an app, then you can remove it.
Themes are made up of Liquid, HTML, CSS, and JavaScript code. When you edit or customize themes, file sizes can increase and affect your store speed.
You can edit almost all of the Liquid that is used to render your store. There are efficient and inefficient ways of writing Liquid code. Doing complex operations repeatedly can increase your Liquid render time, which impacts your overall store speed.
High-resolution images usually require large files and therefore slow down page loading times.
If you use a font that does not yet exist on your customer's computer, then the font has to be downloaded before your text can be displayed.
I suggest you try AVADA SEO Suite which has great features that can help you with improving site speed such as Image Optimization, Speed Up, Lazy Loading, and Minification (removes unnecessary information from the source code).
You can also refer to this Shopify post about Improving Speed.
Hope my answer can help you achieve your goals.
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024