Reduce mobile website load time

[DML73]

Great! How did you get it that small?

[Shop Suey]

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/

[chadlly2003]

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.

[DML73]

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

[mprough]

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

[dbltoe]

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

[DML73]

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.

[dbltoe]

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.

[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-...e_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">

[DML73]

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-...e_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 ?