Website speed or Optimize

[usaleem9876]

hey, 

I am working on the website, I try multiple ways to set the speed score or make it fast for the mobile user, but I haven't got success, even though I used multiple plugins as well. 

if any one have a better options then kindly share your thought with me. 

thanks in advance 

webiste: https://mashaltelecom.nl/

[oscprofessional]

@usaleem9876 ,

Hope you are doing well. 

Welcome to the Shopify Community.

I have gone through your store. It really looks nice. You have choosen the best-known e-commerce solution Shopify platform currently on the market.

Optimizing your Shopify store is time-consuming. Themes are made up of Liquid, HTML, CSS, and JavaScript code. When you edit or customize the themes, file sizes can increase and affect your store speed.

Google PageSpeed Insights is a free tool to help you find and fix issues slowing down your web application. Get your PageSpeed score and use PageSpeed suggestions to make your web site faster through our online tool.

I have checked your site in the page insight chrome tool. your website score is very low.

• You should remove the unused app code. It will be beneficial to your store. and makes your theme code easier to read.
• 3rd party apps & codes which take time to load and their size . They decrease the speed.
• 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.
• If you're removing an app, then consider removing code that was added as part of the app install process. Some apps help you with this process by wrapping their code in {% comment %} tags that mention the app name.
• Removing unused app code is a best practice that avoids running code for unused features, and makes your theme code easier to read.

You can refer this article :

https://www.oscprofessionals.com/blog/shopify-speed-optimization-reduce-impact-of-third-party-code/

One of the most common recommendations I found is “Defer offscreen images”. This is an indication that all of the site’s image assets are loading at once.

So you can use lazy load for these images.

• To defer loading of offscreen images in your Shopify site, you will have to modify your Theme (theme.liquid file) to leverage the lazySizes library. Here's how:
• Download the lazysizes Javascript library from here and upload it to your theme's /assets folder. 

• Note(once check ‘lazysizes Javascript library’ in assets repo. has available or not)

• Add the following lines to your theme.liquid just before the </head> tag:

<script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>

• Change the image tags in your theme by adding class "lazyload" to the image tags and changing the src attribute to data-src attribute. 
• te:

{% for img in product.images %}

 {% assign img_url = img | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

 <img class="lazyload" 

 src="{{ img | img_url: '300x' }}"

 data-src="{{ img_url }}"

 data-widths="[720, 1080]"

 data-aspectratio="{{ img.aspect_ratio }}"

 data-sizes="auto">

{% endfor %}

We’ve had the best success for our clients by working with our developers to implement the lazysizes, because it's quite complicated for non technical people.

You need to work on following points :

• Theme Upgrade if there is a scope and upgraded theme available
• Reduce JS Payload.
• Use Critical CSS .
• Replace GIFs With Static Images
• Reduce Large Image Sizes
• Migrate Tracking Codes To Google Tag Manager
• Compress Images
• Limit Third Party JavaScript & Shopify Apps
• Preload Web Fonts. 
• I would suggest limiting to one and using a standard web font.

By fixing these issues, your website speed score can definitely improve.

If you’re looking to improve your Shopify store’s site performance or SEO.

For more details please check the link below. 

https://www.oscprofessionals.com/blog/shopify-speed-optimization-guide/

If anything is missed out or unclear then don't hesitate to ask.  We will surely help you. 

Have a nice day !

[kazi]

@usaleem9876  Hello this website is not built with Shopify. I have checked the scores in google page speed  https://pagespeed.web.dev/report?url=https%3A%2F%2Fmashaltelecom.nl%2F&form_factor=desktop

Mobile is : 51

Try to fix the following issues 

Eliminate render-blocking resources
Reduce initial server response time
Reduce unused CSS
Reduce unused JavaScript
Serve images in next-gen formats
Properly size images

[usaleem9876]

do you have a proper solution for this one ? in which I can set the website speed.

[MS_WEB_DESIGNER]

Hi @usaleem9876 

I am Ani From MS Web Designer (Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore ) I helped 1000+ Shopify Store owners to Optimize their website loading speed for both mobile and desktop and increase their conversion rate.

Here are some proven steps that will improve your website speed dramatically for both mobile and desktop.

• Select a light Weight Shopify Theme ( OS 2.0 Compatible ) 
• Remove all Unwanted Shopify App ( That you have installed, but not using)
• Minify Javascript, CSS 
• Reduce the Large Image Size
• Eliminating the halting problem in Javascript
• Apply Lazy loading per section wherever required
• Replace Gifs with the Static Images
• Resize Products images using Shopify App ( for Bulk )
• Check Page Speed by Google page Insight and GTmetrix.

By fixing these issues, your website speed score can definitely improve
If you want a Free complete Website Optimization Audit Report ( All the Actionable steps for your store ), let me know. 

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?

Useful Resources for Speed Optimization :
10 Proven Steps that will Improve your Shopify Website Speed
https://blog.mswebdesigner.com/10-proven-steps-that-will-improve-your-shopify-website-speed/

How to Maintain Shopify Speed Post Optimization: A Quick Guidelinehttps://blog.mswebdesigner.com/how-to-maintain-shopify-speed-post-optimization-a-quick-guideline/

Good Luck!

Regards,
Ani

[Adarsh2030]

Hello @usaleem9876 
Greetings of the day!
Hope you are doing very well!

As I have checked your store speed, that is 56 on mobile which is quite poor and for the desktop, it is 83, which is also quite poor.
In order to improve your store speed, behind the scene, there are many pointers that affect your actual speed, that is known but not for everyone. 
I am going to share that points with you by which one who is good in technical terms can understand and boost the speed and make it smoother.

The following things would be done to optimize your store speed: -

1. Full speed optimization Audit.

2. Check and fix all halting Java scripts if any.

3. Check and remove apps' obsolete code if any.

4. Check and optimize all website assets (images, CSS, JS, etc.)

5. Images optimization & compression.

6. Optimize the video section to an optimized version if any.

7. Apply Lazy loading per section wherever required.

8. Check and defer scripts wherever required.

9. Improve liquid rendering time.

10. Improve Largest Contentful Paint LCP [Web Vitals] as per GT Metrix.

11. Improve Cumulative Layout Shift [Web Vitals] as per GT Metrix.

12. Improve TBT - Total blocking time as per GT Metrix.

13. Improve FID - First Input delay

14. Pre Load critical assets.

15. Handle third-party script [ app ].

16. Font loading.

17. Compress JS and CSS files.

18. Apply CDN where required.

19. Lazy-load images and I-frames.

20. Remove unused JavaScript from the theme.

21. Preload assets where required.

22. Optimize videos and Gif

23. Improve overall page loading time

24. Implement AMP pages if required.

25. Improver overall core web vitals score based on lighthouse policy.

So these are all the points by which you can improve your store speed and make it smoother as what you expect.

Further queries, let me know.

Thank you.

[flareAI]

Hello @usaleem9876,

By following the below steps, you can significantly speed up your Shopify store:

1. You can run the Shopify Theme Inspector for Chrome to identify the lines of code that are slowing down pages in your online store.
2. Image compression is important and a necessity for faster loading 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/.
3. Removing unused app code is a best practice that avoids running code for unused features and makes your theme code easier to read.
4. Using a theme that is optimized for performance means a theme that is responsive, fast, and takes minimal time to load the page.
If you choose a theme with numerous sliders, fancy animations, advanced navigation systems, etc., will affect your page speed. If your theme is loading slow, consider disabling the theme features you don't need.
5. Themes contain CSS, JS, and HTML which can increase and affect your store speed. So disable theme features you don't use.
6. Loading extra data your customers aren't using can impact your store speed without adding value.
7. Using slideshow, which are high-quality images combined with transitions, take time to load when the user clicks the link to the homepage. So instead you can use a single high-quality hero image.
8. 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.
9. Replace GIFs with static images
10. To reduce the initial load time, you can use Lazyload technique
11. Remove third-party JS scripts and Shopify App which you are no longer using
You should disable app features you don't use, or you can remove the app if you don't need it. If you are removing an app make sure to remove code that was added as part of the app install process.
12. Minimize HTTP requests. For example: Combine & inline your CSS scripts
13. Avoid unnecessary redirects and fix broken links
14. Use minified CSS and JS files
15. Don't add too many images on a page
Adding too many images on a page can be frustrating. It can significantly slow the load time of your website. Also, it can overwhelm visitors, which will ultimately result in a poor user experience, a high bounce rate, and a high probability of lower rankings in relative search results.
16. You can use Google PageSpeed Insights to view more detailed metrics for pages in your store.

If your website takes longer than 3 seconds to load, 40% of your traffic will be lost. Apart from speeding up your store, for getting better conversions, make sure your store products are Found on Google. When your customers search on Google, your product can be found only if your page is indexed. Note that once a URL gets indexed, customers will start finding your store through organic searches, you will start getting order conversions for virtually zero cost. Making it sustainable business growth. flareAI helps to get your new products found on Google. flareAI works every day for you. Get sales from Google and 20+ world's largest free sales channels, Single click start!

Hope this was helpful.

Gina
Add flareAI Shopify App today!