Reduce mobile website load time

How could I reduce mobile website load time? I know its probably a complex task, but are there any relatively easy/obvious ways that could help improve speed particularly on mobile devices? Speed on desktop devices is acceptable.

I'm using ZC v2.1.0 with Bootstrap template.
https://www.usconverters.com/

I would start by focusing on getting Accessibility and Best Practices up to a score of 100 — you’re very close already, nice job.

I suspect a plugin or script may be affecting your performance.

I’d recommend temporarily disabling some plugins and rerunning PageSpeed Insights. That should help pinpoint what’s causing the slowdown.

Overall though, your site runs well.

https://pagespeed.web.dev/analysis/https-www-usconverters-com/apzdhcadyo?form_factor=mobile

The two common denominators for your speed are Largest Contentful Paint (LCP) and First Contentful Paint (FCP) both wind up giving you a low score in Time to First Byte (TTFB)

If you look at both LCP and FCP for mobile, they are each .6 seconds slower than the desktop. Does that mean there's something wrong with the mobile code? Most likely, it's just that phones are not running the same speed as most desktops these days.

Your LCP is in the green on a desktop with the FCP almost in the green.

By its nature, any e-commerce site is throwing a lot of script, CSS, and images at the browser. The easiest of that bunch to wrangle are the images.

Notice under the Use efficient cache lifetimes that your slide images are significantly larger than the other images on your main page. I'm not sure that Zen Cart is the best at taking large files squashed into webp format, nor whether it does it before or during load.

Some items under Improve image delivery can be addressed as well.

There's not a lot you can do for CSS and JavaScript reduction but adding the explicit image width and height mentioned in diagnostics will help.

If you concentrate on getting the desktop performance as close to 100 as possible, you've done about all you can do to make the mobile faster as well.

Then you can get a name on that button and adjust that #336699 background color so the white texr gives you a 7:1 contrast ratio. That will get the Accessibility on track.

Thank you so much, now I have a better idea of what to work on. Particularly those bannerslides first.

I see that "Use efficient cache lifetimes" is mentioned in regards to bannerslides/images, I'm wondering if better cache control/expiration times could improve this parameter (?).

Regarding "Render blocking requests", I see that for example …css/stylesheet_365.css, css/stylesheet_364.css and css/stylesheet_373.css (used by Bootstrap) for some reason has much longer times than css/stylesheet.css, even these are much smaller files.
Could these files be combined in css/stylesheet.css ? or any ideas?

DML73:

Thank you so much, now I have a better idea of what to work on. Particularly those bannerslides first.

I see that "Use efficient cache lifetimes" is mentioned in regards to bannerslides/images, I'm wondering if better cache control/expiration times could improve this parameter (?).

Regarding "Render blocking requests", I see that for example …css/stylesheet_365.css, css/stylesheet_364.css and css/stylesheet_373.css (used by Bootstrap) for some reason has much longer times than css/stylesheet.css, even these are much smaller files.
Could these files be combined in css/stylesheet.css ? or any ideas?
Those are cache-busting stylesheets. Putting them at the bottom of the stylesheet.css might result in those updates not being loaded due to that file's caching.

As I stated before, the devs have done magic with what we have, and > There's not a lot you can do for CSS and JavaScript reduction, but ....

The thing about CSS files is that they are loaded in a specific sequence so that an item in stylesheet_360.css would be overridden if it were in stylesheet_361.css with a different setting. i.e., red font color for a warning in 360 being defined as blue in 361 would result in blue in the browser.

That's a real oversimplification of what's happening but you can better understand that things can really get messed up if you start moving things around or trying to combine them.

There's a free program at minifier at https://www.minifier.org that will compress CSS and JavaScript, but i(since you're using a bootstrap clone) if you look at stylesheet_booststrap.lightbox.css, you'll see that it is already minimized. Yet, stylesheet.css is not.

Minifying stylesheet.css would wipe out all the important comments while saving only a few bytes of size and probably just a few milliseconds of time.

Would you rather work with:

/** * Main Template CSS Stylesheet
 * 
 * BOOTSTRAP v3.4.0
 *
 */
.clearBoth {
   clear: both;
}
.forward {
    float: right;
}
.back {
    float: left;
}


/* This is used to re-size images */
img {
    max-width: 100%;
    height: auto;
    border: 0;
}


.qmix > br {
    display: none;
}


.normalprice, .productSpecialPriceSale {
    text-decoration: line-through;
}


#back-to-top {
    position: fixed;
    bottom: 5rem;
    right: 1rem;
    z-index: 1;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s ease-out;
    opacity: 0;
}


#back-to-top.show {
    opacity: 1;
    z-index: 1;
}


/* set height of scrollable area in mobile menu */
div#navbarSupportedContent {
    max-height:90vh;
    overflow-y:auto;
}


.zca-banner {
    text-align: center;
}


.ot-title {
    text-align: right;
}
.ot-text,
.totalCell {
    text-align: right;
}


.centeredContent {
    text-align: center;
    padding: 1rem;
}


table.tabTable td {
    padding: 0.5rem;
}
#indexProductList-cat-wrap {
    margin-bottom: 1rem;
}
#productsListing-bottomRow {
    margin-top: 1rem;
}


.sideBoxContent select {
    margin-bottom: 1rem;
}
#navCatTabs a,
#navCatTabs a:hover {
    border: 0.125rem solid #007faf;
}


/* These CSS media queries control how many columns of cards display on the login, checkout_shipping, checkout_payment & checkout_confirmation pages */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
.card-columns {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}
}


/*  Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
.card-columns {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}
}


/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
.card-columns {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}
}


/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
.card-columns {
  -webkit-column-count: 2;
  -moz-column-count:2;
  column-count: 2;
}
}

Or the hard to read

.clearBoth{clear:both}.forward{float:right}.back{float:left}img{max-width:100%;height:auto;border:0}.qmix>br{display:none}.normalprice,.productSpecialPriceSale{text-decoration:line-through}#back-to-top{position:fixed;bottom:5rem;right:1rem;z-index:1;text-align:center;cursor:pointer;transition:opacity 0.2s ease-out;opacity:0}#back-to-top.show{opacity:1;z-index:1}div#navbarSupportedContent{max-height:90vh;overflow-y:auto}.zca-banner{text-align:center}.ot-title{text-align:right}.ot-text,.totalCell{text-align:right}.centeredContent{text-align:center;padding:1rem}table.tabTable td{padding:.5rem}#indexProductList-cat-wrap{margin-bottom:1rem}#productsListing-bottomRow{margin-top:1rem}.sideBoxContent select{margin-bottom:1rem}#navCatTabs a,#navCatTabs a:hover{border:.125rem solid #007faf}@media (min-width:576px){.card-columns{-webkit-column-count:1;-moz-column-count:1;column-count:1}}@media (min-width:768px){.card-columns{-webkit-column-count:1;-moz-column-count:1;column-count:1}}@media (min-width:992px){.card-columns{-webkit-column-count:2;-moz-column-count:2;column-count:2}}@media (min-width:1200px){.card-columns{-webkit-column-count:2;-moz-column-count:2;column-count:2}}

Stick to adjusting things that are not vital to operation itself like the slider images.

Although Cloudflare has had some problems of late, one of their free accounts could be the final step once you've handled all the images. It's caching system is like having your site sitting ready in thousands of places around the internet. That caching could be the finishing touch to your goal.

Thanks a lot, that makes sense, I will stick to the images and see how that goes.

I/O performance is most important.

You don't need to care about those CSS files.
JS is much worse but if you didn't add any additional JS it is as it is unfortunately.

The slides are too large. That's why your site is 1MB.
You could exchange social icons with font icons.

-> use dedicated hosting
-> optimize the three slides
-> exchange icons

Dedicated hosting will increase the processing performance significantly.
Optimizing the slides will reduce bandwith limitations for mobile users with 4G (or slower) significantly.
The icons are just on top. Part of a clean setup.

If you like you can compare it with my shop.

Mine: Dulles -> Berlin (4.100 mi) on iPhone 14 Pro / 4G -> https://www.roller-aus-blech.de -> TTFB: 1.6s / Speed Index 4.4s
Mine: Dulles -> Kasnas City (1.100 mi) on iPhone 14 Pro / 4G -> https://www.usconverters.com/ -> TTFB: 3.1s / Speed Index 4.7s

Are you using Google Ads? If not then remove gtag code.
Though it is processed in the background it still creates heavy load.
If you have limited server performance the it will affect general performance.
If you nee it it as it is.
If you don't need it remove it. Simple as is.

Send me a PN if you like to have some detailed insights.

Wow thank you so much, I now realize that there are actually a lot of things I can do to optimize load time.

Regarding the 3 slides, these are already webp files, which I believe is the smallest/most efficient way. Are there any other better ways to optimize them? other than make them smaller in size.

Replace with the one from the attachment. It will reduce image size from 284Kb to 24Kb
It's a zip to prevent image reprocessing here at the forum.

Great! How did you get it that small?

I’m glad it’s helpful to you.
The quality is slightly worse, but in my opinion it’s absolutely fine and still very close to the original.

If you start with a really good original, there are many possible approaches. The most important technical aspect, in my view, is psychovisual optimization. This is comparable to psychoacoustics in audio (CD vs. MP3): you reduce the data to what people actually perceive.

If you’re interested in reading more about this, I’ve written about it on my wiki:
https://webconcept.one/en/posts/webp/

I took another look i see that you fix the home page accessibility and SEO. I would recommend doing that for the other pages on your website.

Your issue is simple to solve looking at google page insight. Just for kicks watch what happens when you disable google tag manager. You numbers will be exactly where you want them.

Thanks but I'm using Google Ads so unfortunately I can't remove the Google Tag. I'm hoping the other optimizations will do the job. Still working on it :smile:

There are a BUNCH of admin settings you can turn off if you're not using them to improve I/O

Admin >> Configuration > My Store
Wholesale Pricing
Include meta-tags in product search?
Server Uptime (also security)
Show Category Counts
Show Category Counts - Admin

Admin >> Configuration > Maximum Values
New Products Centerbox - Less is faster or off if not using
Upcoming Products Centerbox - Less is faster or off if not using
Manufacturers List - Verify Product Exist - Less is faster or off if not using
Random Product Reviews for SideBox - Less is faster or off if not using
Random New Products for SideBox - Less is faster or off if not using
Random Products On Special for SideBox - Less is faster or off if not using
Best Sellers For Box - Less is faster or off if not using
Also Purchased Products - Less is faster or off if not using
Random Featured Products for SideBox - Less is faster or off if not using
Products on Special Centerbox - Less is faster or off if not using
New Product Listing - Limited to ... (CHOOSE A NUMBER, NEVER Choose 0= All Products)

Admin >> Configuration > Product Listing
Include Product Listing Alpha Sorter Dropdown (off)
Display Product Description (0 to make product listings faster)

Admin >> Configuration > Attribute Settings
Enable Downloads - off if not in use
Enable Price Factor - off if not in use
Enable Qty Price Discount - off if not in use
Enable Text Pricing by word or letter - off if not in use

Admin >> Configuration > GZip Compression
Enable GZip Compression - 1= on

Admin >> Configuration > Product Info
Previous Next - Navigation Includes Category Name and Image Status - Category name only

Admin >> Configuration > Layout Settings
Customer Greeting - Show on Index Page - off
Categories - Always Show on Main Page - off (default)
Footer - Show IP Address status - off
Category Header Menu ON/OFF - off

Admin >> Configuration > Index Listing
Show New Products on Main Page - off if not needed
Show Featured Products on Main Page - off if not needed
Show Special Products on Main Page - off if not needed
Show Featured Categories on Main Page - off if not needed
Show Upcoming Products on Main Page - off if not needed
Show New Products on Main Page - Category with SubCategories - off if not needed
Show Featured Products on Main Page - Category with SubCategories - off if not needed
Show Special Products on Main Page - Category with SubCategories - off if not needed
Show Upcoming Products on Main Page - Category with SubCategories - off if not needed
Show New Products - below Product Listing - off if not needed
Show Featured Products - below Product Listing - off if not needed
Show Special Products - below Product Listing - off if not needed
Show Upcoming Products - below Product Listing - off if not needed

Admin >> Configuration > Define Page Status
Set any not in use to 3 = Link OFF, Define Text OFF

Admin >> Configuration > EZ-Pages Settings
EZ-Pages Display Status - HeaderBar - off if not in use
EZ-Pages Display Status - FooterBar - off if not in use
EZ-Pages Display Status - Sidebox - off if not in use

Catalog >> Product Types > (your type)
Many of these are NOT needed - disable any you can such as:
Weight
Attribute Weight
Date Available
Date Added

Admin >> Modules > Order Total
Discount Coupon, Turn off Gift Certificates, Group Discount, Low Order Fee turned off if not in use

Admin >> Tools > Banner Manager
Disable/delete all banners not in use

Admin >> Tools > EZ-Pages
Disable/delete all ez pages not in use

Admin >> Tools > Layout Boxes Controller
Disable/switch off ALL boxes not in use

This is not an exhaustive list, but it's a great deal of speed to gain =)
The theory I have always used it that "less is more". Not only do unused features require processing power, but they can be "too much" for the user... Harder to navigate, especially if your website is also behaving slowly.

There are a bunch more optimizations that can be done such as htaccess rules, database optimizations etc, image optimization (try Image Handler).... but every Zenner can turn off unused PHP plugins/features.

~Melanie

On a test 2.2.0 Alpha, doing these changes resulted in a 6-point increase in Performance.

I do notice a new problem associated with FontAwesome. They are using CloudFlare, and (whether or not their current problems are a part of it), Lighthouse is showing a 60ms delay in the LCP area.

Perhaps this needs to be opened as a discussion for default changes in 2.2.0

Thanks a lot, I did the list of changes which resulted in a 2 point performance increase.
I'm still struggling with two issues:

Any ideas of how to get rid of these?
I tried changing class="mx-auto d-block" to class="responsive", but that didn't make any changes.

You're not going to be able to change the Cloudflare situation unless they give you access to their file to change it. Same with FontaAwesome.

If you have cPanel and your host has not hidden the function, you can go to the Files section and click on Images. From there, you can click on Scaler. Find the file you need to scale and make the changes there. The only concern is that, in scaling, you collapse the image more in one direction or the other.

i.e., if an image is 1600 x 800 and you resize it to 800 x 600, it won't look good. However, if the image was set to display at 800 x 600, the better solution might be to resize the image to 800 x 400 and change the image's display settings to 800 x 400 in the file. If cropping the image is the answer, IloveIMG.com can do a crop online. It does not support the WebP format. I think Canva.com may support WebP. You can also download GIMP, a free alternative to Photoshop. It's more power than you may need, but it's better to have features you don't use than not have features you may need.

Don't get mired in fixing the load time and forget the general display. Your current main page settings cause category titles to wrap and the information in your search block to be truncated. Your bootstrap grid.css is apparently not considering any screen size larger than 1200. That's less than a third of the available width in computer monitors.

Yeah, cloudflare results are out of your hands, not much you can do about that unless you want to host the script yourself.

Image delivery CAN be improved - I got a major score increase on one of the sites I built by switching over to webP and srcset with images "prepared" for different screen sizes. See here: https://web.dev/articles/responsive-images#relative_sized_images
You'll need to write the code for it because there's nothing made available, but the idea is that you take your original image and resize it to several different dimensions (standard) and then have all versions on your server and offer all versions to the browser. Browser will then decide which image to download based on the screen size.
If your image is 1200px in width and someone is using a mobile phone with ie 600px screen size, you're wasting their resources if they're downloading the large image - you need to allow then to download the smaller size. You can decide on these widths yourself based on where and how you're displaying the images, but try to make it as close to reality as possible with 4-5 different sizes available.

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

balihr:

Yeah, cloudflare results are out of your hands, not much you can do about that unless you want to host the script yourself.

Image delivery CAN be improved - I got a major score increase on one of the sites I built by switching over to webP and srcset with images "prepared" for different screen sizes. See here: https://web.dev/articles/responsive-images#relative_sized_images
You'll need to write the code for it because there's nothing made available, but the idea is that you take your original image and resize it to several different dimensions (standard) and then have all versions on your server and offer all versions to the browser. Browser will then decide which image to download based on the screen size.
If your image is 1200px in width and someone is using a mobile phone with ie 600px screen size, you're wasting their resources if they're downloading the large image - you need to allow then to download the smaller size. You can decide on these widths yourself based on where and how you're displaying the images, but try to make it as close to reality as possible with 4-5 different sizes available.

<img src="lighthouse-200.jpg" sizes="50vw" srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w, lighthouse-400.jpg 400w, lighthouse-800.jpg 800w, lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w, lighthouse-1800.jpg 1800w" alt="a lighthouse">

Interesting, and where would I need to insert that code? 
Would it go into ../includes/templates/bootstrap/templates/tpl_index_slider.php ?