Reduce mobile website load time

[DML73]

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/

[chadlly2003]

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.

[dbltoe]

https://pagespeed.web.dev/analysis/h..._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.

[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?

[lat9]

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.

[dbltoe]

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.

[DML73]

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

[Shop Suey]

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.

[DML73]

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.

[Shop Suey]

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.