Applying New ReadyTheme: Suivant to Shadows

[Jim Cockerham]

Jim Cockerham No, Client Dimensions was an experiment included in the early ReadyThemes. Shadows does not include it nor can I recommend adding it with the improved functionality of current browsers.

Thanks for the info. I never really knew exactly what it did. I am redesigning our site with Shadows and it was assigned by default to many page in the new branch, probably because it was assigned to the old version of the pages.

[Matt Zimmermann]

Jim Cockerham No, Client Dimensions was an experiment included in the early ReadyThemes. Shadows does not include it nor can I recommend adding it with the improved functionality of current browsers.

[Jim Cockerham]

So is the client dimensions module needed anymore when using the Shadows Theme?

[SidFeyDesigns]

Thanks Matt.

[Matt Zimmermann]

Taken care of.

[SidFeyDesigns]

I am also thinking that this thread should probably be moved to the suivant readytheme section of the forum since a lot of these optimizations are directly related to suivant.

Can anybody help me get it moved? I have never moved a thread before.

Thanks

[SidFeyDesigns]

Also another thing I forgot to mention was analyzing the fonts being used on the site. Primarily different font weights and the icon fonts.

Font Weights

For each font weight css class a whole new font file needs to be served.

We host our google font locally but I'm pretty sure this applies to locally hosting the font or using google's cdn (For Suivant: <link href="https://fonts.googleapis.com/css?family=Maven+Pro:400,500,700,900|Playfair+Disp lay:400,400italic,700italic" rel="stylesheet" data-norem="">)

So I started with our image heavy page templates (SFNT, CTGY, PROD, PLST, SRCH)

I made sure that only two font weight css classes were being used. normal (400) and bold (700)

There were a couple of spots where css classes medium (500) and ultrabold (900) were only being used once on each page and they were causing two more font file requests to be made to style a total of 3 or four words. The shopping cart link in the global header for desktop screens was one of them.

I also just did away with playfair all together since it was only being used in the Pre header promo area in the readytheme content section for the global header.

The efforts above alone reduced 5 render blocking http requests with pretty minimal effort which also shaved off some load time and moved our google page speed score up.

Icon Fonts

This was a bit more involved and I would recommend doing it in a test environment if possible unless you don't mind icons not showing up correctly while working on this. This could be bad for mobile unless there are words describing what the icon represents (ex. account icon says "Account" underneath it)

For me, I have a "wholesale version" of our site that you can only access with an account assigned to the wholesale availability group.

Although its technically live, we haven't made an official launch for it yet so this was the perfect place to test out using a custom icon font.

The Basic of This "Exploration":

Between the Elegant Icons and the Custom Suivant icon fonts that ship out with suivant, only about 44 out of the 500-ish icons were being used.

Now if your thinking "why Miva does this?", my guess would be because it makes it very easy to customize the icons to suit the needs for just about any online business out there. This makes the ready themes much more flexible for any kind of online business.

So just to make this clear I am not bashing Miva in anyway. Icons have become a standard and I don't see them going away anytime soon. I'm just pointing out possible solutions to help page load speed and the icon fonts are a great opportunity if you use a small portion of what is actually available.

That being said, if hundreds of icons are being used on your site then doing this may not be worth the effort.

First things First... BROWSE YOUR SITE... On mobile, tablet and desktop.

Browse every page template you can including account pages. Make an account through your site for yourself if you haven't already.

Also pay close attention to your global header and footer on all devices and check your mobile navigation as well.

Make a physical list of every icon used on your site. (old fashioned pen and paper will do or type up a list in a text or word doc)

Once you are 100% sure you've gathered the full list of icons used go to this site:

https://icomoon.io/app/#/select

This app is fantastic and allows you to build your own custom icon font that only contains the icons that are actually being used on your site.

Once you've built your new icon font download the zip file.

You then need to add the font files to your server via ftp unless you have direct access to the server.

I chose to put the font files in the readytheme directory and created a new folder called fonts:

yourdomain.com/mm5/themes/suivant/fonts/

Then you need to call in the font files via the fonts.css file using @font-face. Before making any changes I would save the original file as fonts-original.css or something like that so you can easily have a copy to revert back if you need to.

I put the new custom icon font css code at the very end of the file so that any elegant icons being used would still work and only the custom suivant icons would be effected.

Ex:

/* ------------------------ Custom Icomoon Icon Font ------------------------ */
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?je2bbj');
  src:  url('../fonts/icomoon.eot?je2bbj#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?je2bbj') format('truetype'),
    url('../fonts/icomoon.woff?je2bbj') format('woff'),
    url('../fonts/icomoon.svg?je2bbj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

[class^="rt-icon-"], [class*=" rt-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon', sans-serif;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-rt-icon]:before {
    content: attr(data-rt-icon);
    font-family: 'icomoon', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    speak: none;
    text-transform: none;
}

.rt-icon-address-card-o:before {
  content: "\f2bc";
}
.rt-icon-vcard-o:before {
  content: "\f2bc";
}
.rt-icon-amazon:before {
  content: "\f270";
}
.rt-icon-angle-double-up:before {
  content: "\f102";
}
.rt-icon-angle-left:before {
  content: "\f104";
}
.rt-icon-angle-right:before {
  content: "\f105";
}
.rt-icon-apple:before {
  content: "\f179";
}
.rt-icon-bars:before {
  content: "\f0c9";
}
.rt-icon-navicon:before {
  content: "\f0c9";
}
.rt-icon-reorder:before {
  content: "\f0c9";
}
.rt-icon-caret-down:before {
  content: "\f0d7";
}
.rt-icon-caret-left:before {
  content: "\f0d9";
}
.rt-icon-caret-right:before {
  content: "\f0da";
}
.rt-icon-caret-up:before {
  content: "\f0d8";
}
.rt-icon-cc-amex:before {
  content: "\f1f3";
}
.rt-icon-cc-discover:before {
  content: "\f1f2";
}
.rt-icon-cc-mastercard:before {
  content: "\f1f1";
}
.rt-icon-cc-paypal:before {
  content: "\f1f4";
}
.rt-icon-cc-visa:before {
  content: "\f1f0";
}
.rt-icon-close:before {
  content: "\f00d";
}
.rt-icon-remove:before {
  content: "\f00d";
}
.rt-icon-times:before {
  content: "\f00d";
}
.rt-icon-cog:before {
  content: "\f013";
}
.rt-icon-gear:before {
  content: "\f013";
}
.rt-icon-credit-card:before {
  content: "\f09d";
}
.rt-icon-envelope:before {
  content: "\f0e0";
}
.rt-icon-facebook:before {
  content: "\f09a";
}
.rt-icon-facebook-f:before {
  content: "\f09a";
}
.rt-icon-feed:before {
  content: "\f09e";
}
.rt-icon-rss:before {
  content: "\f09e";
}
.rt-icon-file-text-o:before {
  content: "\f0f6";
}
.rt-icon-globe:before {
  content: "\f0ac";
}
.rt-icon-heart:before {
  content: "\f004";
}
.rt-icon-home:before {
  content: "\f015";
}
.rt-icon-instagram:before {
  content: "\f16d";
}
.rt-icon-lock:before {
  content: "\f023";
}
.rt-icon-minus:before {
  content: "\f068";
}
.rt-icon-phone:before {
  content: "\f095";
}
.rt-icon-pinterest-p:before {
  content: "\f231";
}
.rt-icon-plus:before {
  content: "\f067";
}
.rt-icon-question:before {
  content: "\f128";
}
.rt-icon-repeat:before {
  content: "\f01e";
}
.rt-icon-rotate-right:before {
  content: "\f01e";
}
.rt-icon-search:before {
  content: "\f002";
}
.rt-icon-shopping-cart:before {
  content: "\f07a";
}
.rt-icon-trash:before {
  content: "\f1f8";
}
.rt-icon-truck:before {
  content: "\f0d1";
}
.rt-icon-twitter:before {
  content: "\f099";
}
.rt-icon-unlock-alt:before {
  content: "\f13e";
}
.rt-icon-user:before {
  content: "\f007";
}
.rt-icon-youtube-play:before {
  content: "\f16a";
}

Now comes the time consuming part:

Once your font is set up and hosted locally on your server you need to start editing all page templates and global sections using icons.

I started with the global header and footer, then moved to the mobile navigation. Then I did the checkout pages and account pages.

You need to look for a couple different snippets of code.

Here are examples of what to look for and what to change in the code.

Elegant Icon font data attribute and icon classes:

Changing the unicode for the data attributes. The unicode are the letter and numbers listed in the classes in the css code example above

The unicodes might be different for you because they are assigned when building your custom icon font.

Yes the &#x in the beginning and the ; at the end are required in the data-icon html snippets below.

<span data-icon="&#xe090;"></span> needs to be changed to <span data-rt-icon="&#xf095;"> (Contact Icon)

Changing icon classes. The classes are listed in the css code example above.

The classes might be different for you because they are assigned when building your custom icon font.

<span class="color-black icon-icon_cog"></span> needs to be changed to <span class="color-black rt-icon-cog"></span> (Settings Icon ACLN)

Custom Suivant Icon font data attribute and icon classes:

Changing the unicode for the data attributes. The unicode are the letter and numbers listed in the classes in the css code example above

The unicodes might be different for you because they are assigned when building your custom icon font.

Yes the &#x in the beginning and the ; at the end are required in the data-rt-icon html snippets below.

<span data-rt-icon="&#x61;"></span> needs to be changed to <span data-rt-icon="&#xf007;"> (Account Icon)

Changing icon classes. The classes are listed in the css code example above.

The classes might be different for you because they are assigned when building your custom icon font.

<span class="color-black rt-icon-basket"></span> needs to be changed to <span class="color-black rt-icon-shopping-cart"></span> (Basket Icon)

Mobile Navigation Icon:

This is slightly different and for the Suivant Theme since the mobile navigation is moved from the navbar to the slide out menu via javascript based on screen size.

You should only have to change one snippet of code in your plugins.js file and you may want to save the original file to plugins-original.js in case you want to revert back to the original icon fonts.

In the // ---- Mobile Navigation Functions ---- // section: again, the unicodes might be different for you because they are assigned when building your custom icon font.

.append('<span data-name="'+a+'" data-rt-icon="&#x64;" class="next"></span>') needs to be changed to .append('<span data-name="'+a+'" data-rt-icon="&#xf105;" class="next"></span>')



Once you have done all the dirty work and have confirmed that all icons being served are indeed the New custom icon font, you can remove the elegant icon and custom suivant icon css code from the fonts.css file.

You've successfully removed yet another http font request.



All of the above efforts have not only reduced http requests, but it also significantly reduced the size of the icon font.

Instead of possibly up to 9 http font requests it should now be down to 3.

Instead of a 65kb in icon fonts its now down to 13.5kb (in the case of 44 icons instead of 500 icons) It may not seem like much but every byte counts, especially during any high traffic periods.



Sorry this was long winded, but I just thought it might be another helpful piece of information for any fellow speed enthusiasts ;)

Thanks for reading if you have stumbled upon this thread.

-Nick Harkins

[SidFeyDesigns]

Haha "super" powers can be very handy. And not a problem. Glad to have posted something helpful to the Miva community.

[lesliekirk]

Thank YOU! I wasn't sure if you could still edit the post so I was going to use my "super" powers to edit on your behalf. These are the types of posts that can help so many people!

[SidFeyDesigns]

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

Glad this post can be of some help!

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

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

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

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.

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