Applying New ReadyTheme: Suivant to Shadows

[SidFeyDesigns]

I believe I have hit a plateau as far as site speed goes for the Suivant ReadyTheme

I'm looking into perhaps switching to the Shadows ReadyTheme. It has all the functionalities that I'd prefer and seems to be a faster loading framework out of the box (maybe I'm wrong).

Anyone have any input on their experience with this ReadyTheme?

Also, is there a specific course of action when switching ReadyThemes?

We have about 6 or 7 custom page templates (ex. CTGYW, PRODW, etc.)

Our account pages have conditionals to check if a customer is in the wholesale availability group and will display a different header and footer using the mvt do below within the availability conditional. It displays a custom page template that is just a modified version of the global header or footer.

<mvt:do name="l.result" file="g.Module_Feature_TUI_MGR" value="TemplateManager_Render_Page( 'WGHDR' )" />

We also have modified the product attribute template quite a bit.

Thanks in advance for any input.

[Matt Zimmermann]

I would recommend reading through the Elements [https://docs.miva.com/elements/index.html] and Shadows [https://docs.miva.com/readytheme-shadows/index.html] documentation so you are familiar with the code changes you will need to make to your custom pages as well as your product attribute template. Additionally, I would build in a development environment until you are happy with the layout.

[Bruce - PhosphorMedia]

...in other words, it's basically a rewrite of the site :) although at least you've probably worked out the custom changes needed. you might consider taking a crack at having someone else see if your Suivant based site can't be speed up enough. Though 'heavier' than Shadows, I don't see why you can't get acceptable speeds out of Suivant. I know we have.

You might try looking at some of the 'sharing' or 'tracking' apps loading as they can kill performance. If you use one of these apps, see if they have/can support a "defer loading" method. If not, you can work around that by ajax loading them from a separate template AFTER the page has loaded (i.e., document.ready())

[SidFeyDesigns]

Yeah I kind of figured that. But I do like the idea of the 'lighter' code.

I'm also not a big fan of the conformity plugin for the subcategory listings and category product listings. Often, if a user scrolls before everything has loaded, products and subcategories won't be where they should be base on screen size until that plugin calculates the div heights.

I will look into your recommendations for the sharing and tracking though. Would be helpful to implement no matter what we end up doing ReadyTheme wise.

We use the ShareThis inline Share buttons and GDPR compliance tool and they do effect performance. Perhaps deferring them or ajax loading them will help for now until a decision is made on switching ReadyThemes or not.

Thank you for the recommendations!

[SidFeyDesigns]

So, I found a much lighter and faster solution for the social share buttons and switched to that for our product pages. I removed the social share buttons all together from our category pages since they weren't really being used on those pages. I also switched to the GDPR compliance from https://cookieconsent.insites.com/ as suggested on this forum and both these together moved me up a contsistent 8-10 points in the lighthouse extension in chrome. We also made some good progress on gtmetrix.

So thank you Bruce for the tip on lookin into that.

One thing I did notice on the waterfall view for gt metrix is that the html, css, and fonts (hosted locally) get loaded twice. It seems to add a considerable amount of time to the overall page load.

Is this because of the client dimensions module?

If so can this module be removed?

If it makes more sense to start a new thread on that topic I'm happy to do so.

Thanks

[Matt Zimmermann]

Client Dimensions can cause issues, however I don't think I've ever heard of it causing a double loading one. If you choose to remove it, make sure to check your page layouts, especially PROD, as it may have been used to change the display based on the size.

[SidFeyDesigns]

I'll start by just removing it from the category page template and add a conditional in the global head to not include that item for CTGY and see if that is in fact the cause of the double loading.

Thanks Matt

[SidFeyDesigns]

That knocked almost two seconds off the overall load time.

Also the google pagespeed insights is now working properly. It used to give me an error with no pagespeed score and it also showed that I had twice as many requests as there should have been on the page.

Wish I had known about this much sooner.

Our organic search rankings have suffered since upgrading to miva 9 and choosing the suivant theme in June of 2018.

Just before the google pagespeed update and mobile-first indexing update.

The drop in rankings caused a huge drop in traffic and in turn an almost $8,000 decrease in in sales for our busiest season (Valentine's Day).

I think the issue should either be addressed with that module or a sticky thread should be made (if there isn't one already) on how to remove it for anyone using the module who relies on faster load times and organic search results (which I would assume would be a lot of ecommerce businesses)

[SidFeyDesigns]

And it was the cause of the double loading. Forgot to mention that

[Leanne]

Thank you! I have a site that has had slow page loads, the same double loading issue, and is also using clientdimensions. I am very glad to have a possible fix to work with.

[SidFeyDesigns]

It definitely made a significant difference in speed after removing the client dimensions module.

And for the suivant readytheme it was only used on the PROD page, yet it was assigned to almost all other page templates.

We are also starting to crawl back up in our organic rankings.

I did a bunch of other speed optimizations as well such as adding lazyloading for images (added the lazysizes plugin to plugins.js), and removed sliders (Used overflow-x:auto and some other css to make the items within the wrapper swipeable on mobile where sliders were necessary to save screen real estate)

I also took it to another level and took the css.php and scripts.js files and created new versions that only served what was needed for our important page templates

Ex: sfntcss.php, sfntscripts.js, ctgycss.php, ctgyscripts.js, prodcss.php, prodscripts.js

Within each of the css php files I only needed to make new pages.css files (sfntpages.css, prodpages.css, ctgypages.css)

Then within each new php file I only served what was necessary (removed magnificpopup.css for sfnt and ctgy, removed slider.css for all)

went another step further and created minified versions after testing them (Every byte counts right? haha)

I conditionally served the new css and js in the global head tag and global footer

Head Tag

<mvt:if expr="l.settings:page:code EQ 'CTGY'">
<link rel="canonical" href="&mvte:category:link;" />
<mvt:item name="prodctgy_meta" param="combined" />
<link href="&mvte:global:theme_path;/css/ctgycss.min.php" rel="stylesheet" />
<mvt:elseif expr="l.settings:page:code EQ 'SFNT'">
<link rel="canonical" href="https://&mvt:global:domain:name;/" />
<mvt:item name="prodctgy_meta" param="combined" />
<link href="&mvte:global:theme_path;/css/sfntcss.min.php" rel="stylesheet" />
<mvt:elseif expr="l.settings:page:code EQ 'PROD' OR l.settings:page:code EQ 'PATR'">
<link rel="canonical" href="&mvte:product:link;" />
<mvt:item name="prodctgy_meta" param="combined" />
<link href="&mvte:global:theme_path;/css/prodcss.min.php" rel="stylesheet" />
<mvt:else>
<link rel="canonical" href="&mvte:urls:_self:auto;" />
<mvt:item name="prodctgy_meta" param="combined" />
<link href="&mvte:global:theme_path;/css/css.min.php" rel="stylesheet" />
</mvt:if>



Global Footer:

<mvt:if expr="l.settings:page:code EQ 'CTGY'">
<script src="&mvte:global:theme_path;/js/ctgy-sfnt-plugins.min.js"></script>
<script src="&mvte:global:theme_path;/js/ctgyscripts.min.js"></script>
<mvt:elseif expr="l.settings:page:code EQ 'SFNT'">
<script src="&mvte:global:theme_path;/js/ctgy-sfnt-plugins.min.js"></script>
<script src="&mvte:global:theme_path;/js/sfntscripts.min.js"></script>
<mvt:elseif expr="l.settings:page:code EQ 'PROD' OR l.settings:page:code EQ 'PATR'">
<script src="&mvte:global:theme_path;/js/plugins.min.js"></script>
<script src="&mvte:global:theme_path;/js/prodscripts.min.js"></script>
<mvt:else>
<script src="&mvte:global:theme_path;/js/plugins.min.js"></script>
<script src="&mvte:global:theme_path;/js/scripts.min.js"></script>
</mvt:if>


If you decide to do any of that, be sure to really carefully asses what css and js can be removed for each new css and js file you create.

All of these techniques got us into the green on google's page speed insights tool, and we are also looking good on gtmetrix.com and webpagetest.org

Reason we needed to go this route is because we can't upgrade to a faster hosting and we have a decent amount of analytics tracking and PPC scripts that we couldn't remove.

Page speed optimization can be frustrating but unfortunately its necessary with google's mobile first indexing update.

Hopefully you can find something useful with this information.

Good luck to you.

[SidFeyDesigns]

Only thing left I would like to do for our CTGY, SRCH and PLST pages is find a different solution for the conformity plugin that makes the grid for the product lists work.

I'm hoping I can convert it to flexbox but that project may have to wait. Have some much needed product photography to update.

[SidFeyDesigns]

Another item that was not used for the suivant theme was the cmp-cssui-searchfield item which injected a js file (or two) in the head of all page templates it was assigned to.

I tested removing the item on a low traffic page template such as PRPO (privacy policy) to make sure our search box input in the global header still worked.

Indeed after removing the item it still functioned.

Removing this item from all page templates also saved a significant amount of time on the overall page load

[lesliekirk]

It definitely made a significant difference in speed after removing it.

Your post is extremely helpful and very beneficial. For search and archival purposes, may I change

speed after removing it.

to

speed after removing the client dimensions module.

I started reading this thread from the end of it and needed to scroll back to the top to confirm what "it" is.

Many thanks, Leslie

[SidFeyDesigns]

Thank you for pointing that out. I already made the change for you.

Glad this post can be of some help!