Announcement

**NormanRouxel** · 08-Jun-2020, 11:44 AM

JQuery is used by most of the SellerDeck scripts (and many add-ons) so needs to be available before them.

The appalling one is actinic.css (which as we've just seen needs to be loaded early). It's a ridiculous 172Kb of bloat. News.bbc.co.uk 45Kb, johnlewis.co.uk 54Kb.

Swift is worse! There, actinic.css is 116Kb but new files bootstrap.min.css (145Kb) and webslidemenu.css (44.7Kb) take the total CSS load to be a whopping 344Kb,
And the JavaScript load is also worse because of the code needed for the above new features. And they called it Swift!

**Buzby** · 08-Jun-2020, 04:45 PM

I touched on this on this thread https://community.sellerdeck.com/for...ns-about-swift

Swift is a slow design, Sellerdecks own developed sites are very slow.

When I asked about this on the above thread I received the sales fob

"Put simply, if it takes you ten minutes to run a mile, then a 20% improvement is significant. If you're already a sub-four minute miler, then it makes much less difference in the race." from Bruce

I am just making variables to turn things on and off on a page to try and speed it up.

**Buzby** · 09-Jun-2020, 11:00 AM

I am presuming that everything here is needed and can't be delayed in loading, or turned off on unused pages?

Attached Files

js.JPG (97.6 KB, 299 views)

**Mike Hughes** · 09-Jun-2020, 12:35 PM

I am presuming that everything here is needed and can't be delayed in loading, or turned off on unused pages?

Apart from actinicsearch, which I'm sure can be loaded from the bottom of the page, everything in your image looks essential to me.

**Mike Hughes** · 09-Jun-2020, 12:45 PM

JQuery is used by most of the SellerDeck scripts (and many add-ons) so needs to be available before them.

OK. So JQuery needs to be loaded up front.

The appalling one is actinic.css (which as we've just seen needs to be loaded early). It's a ridiculous 172Kb of bloat. News.bbc.co.uk 45Kb, johnlewis.co.uk 54Kb.

I agree. As far as I know it's pretty much all the sellerdeck css for all the layouts in one place so there's lots of unused css in there. I've looked at a couple of tools such as unusedcss and they're saying between 65-75% of the css in actinic.css is unused on my site. I'm reluctant to go all in on something like this as I suspect there might be some pages like the checkout pages that have unique css and won't have been scanned. Still cutting actinic.css down by something like 70% would be a major improvement.

**Buzby** · 09-Jun-2020, 03:55 PM

Originally posted by Mike Hughes View Post

I agree. As far as I know it's pretty much all the sellerdeck css for all the layouts in one place so there's lots of unused css in there. I've looked at a couple of tools such as unusedcss and they're saying between 65-75% of the css in actinic.css is unused on my site. I'm reluctant to go all in on something like this as I suspect there might be some pages like the checkout pages that have unique css and won't have been scanned. Still cutting actinic.css down by something like 70% would be a major improvement.

I had a look at one of these sites to locate unused css earlier today. I am developing a new swift site so can afford to play about with without worrying about damaging it. It would be nice if Sellerdeck didn't package everything up in one bloated file.

**Goz** · 09-Jun-2020, 06:23 PM

The problem is you don’t actually know if a CSS selector is unused unless you:

check coverage on every single page of your entire site…
while executing all JavaScript…
under every possible combination of state…
in every possible combination of media queries you’ve used.

**Hugh Gibson** · 01-Jul-2020, 01:27 PM

Mike, you also need to take a look at https://community.sellerdeck.com/for...-after-editing - your list of files include the uncompressed JS files which won't be optimal. When they are compressed it does improve page loading times. You can customise this - see https://community.sellerdeck.com/for...th-extra-files

On some sites we have also re-compressed all the jquery files into a single js. With a proper caching strategy these will only be downloaded when a customer first visits the page.

**Mike Hughes** · 07-Jul-2020, 02:57 PM

Right,

I've reduced the size of all my images in MegaMenu,
I've minimised the javascript files with uglify
I'm only loading the bx-slider JS on the homepage
All my static images etc have a cacheing period of 1 year
I've turned on file compression on the server

On the whole things are much improved.

Actinic.css 34.2 KB
jquery-1.11.1.min.js 38.3 KB
sellerdeck,min,js 48.8KB

PageSpeed Insights is much happier but I still have a problem with Cumulative Layout Shift (CLS) on both the Desktop and Mobile measures.

The only solution to this appears to be to go down the path of using Critical Path CCS to quickly render above the fold content and then redraw the whole page again once everything has loaded. At least that's how I think it works.

If anyone has experience of this I'd love to hear it, otherwise I'll continue on with this as a learning experiment and report back.

Mike

**Hugh Gibson** · 08-Jul-2020, 08:25 AM

Mike,

That's encouraging.

The problem with the cumulative layout shift is because your sliders are initialised when the document is complete. So the page loads with sliders uninitialised, then they pop up.

The solution for that is to change the slider initialisation code. When a page is loading, JavaScript can refer to elements in the DOM that are before the script tag. So instead of waiting for the dom loading to complete, the JS can manipulate the DOM directly.

If you take a look at the sliders on https://www.clubhousegolf.co.uk/ you can see this. The JS is moved to after the definition of the slider element, and it works directly on the DOM. Therefore there is no delayed movement of the DOM.

**Mike Hughes** · 08-Jul-2020, 09:05 AM

Thanks Hugh, that's an area for me to look at. Particularly for the home page which is the only place I use the slider.

I have a more general problem on all my other pages. One of the main culprits, particularly on mobile is the contact us phone number, etc where they appear initially and then get hidden later on. I can clearly see this on the PageSpeed insights sequence of page views . It's a bit odd because they have an inline display:none wrapped around them. i.e.

020 8455 7778<a class="displayMobile" href="tel:020 8455 7778" rel="nofollow">020 8455 7778</a>

I would have expected that to hide it from the start but maybe it can't. The question is whether I should hide it all with an inline span and then reset the span once everything else has loaded.

**Mike Hughes** · 08-Jul-2020, 03:15 PM

So it looks to me as if what's happening with the contact us number on mobile is that the HTML for the paragraph has been written with no display property at all so the browser figures quite rightly to display it but then once the javascript (and css) has been loaded the javascript is writing the display="style:none;" property to the tag forcing the render engine to redraw the page and the layout to shift.

I've manually added the display="style:none;" property to the sellerdeck HTML so it starts off hidden by default and avoiding the need to redraw it once the javascript and css has loaded. This seems to be working fine.

ie. In the TopContactInfo layout, this



becomes this



for the phone number HTML

Now to go and look at all the other things that are getting in the way.

**graphicz** · 31-Jul-2020, 11:05 AM

This is the GT Metrix for my version of Swift. It includes some extras such as Dynamic Choice Images, Datepicker and Fancybox:

The score started at F32% and these are the steps I have taken.

Serving scaled images - this gave the biggest jump in page speed.
Keeping default Javascript Header Functions and putting everything else, css and all in the sub body code, but leaving actinic.css and bootstrap in the <head>
Minifying all the other js.
Use async or defer on some js links
Avoiding @import in the stylesheet

We can now tell clients to use big images, 980px or more but the image size changes with application and viewport.

Using simpleImage.php (https://www.graphicz.solutions/simpleImage.zip) I have created versions of images for the diminishing viewports. I have done it in Product Page, Product Summary, Section, Best Sellers New Products and Home Page Section List.

I will give one example:

Place at the top of the Compact New products Item

Code:

<actinic:block php="true" invariant="true" >
include_once 'SimpleImage.php';
error_reporting(E_ALL & ~E_NOTICE);
try {
$nplgwidth = 234;
$npmdwidth = 499;
$npsmwidth = 729;
$npxswidth = 579;

$sOrigimagenplg = str_replace('\\','/', '<actinic:variable name="ProductImageFileName" encoding="perl" selectable="false" />');
if ( file_exists('<actinic:variable encoding="perl" name="ProductImageFileName" selectable="false" />') ) {
$imagenplg = new SimpleImage($sOrigimagenplg);
$imagenplg
->fromFile ($sOrigimagenplg)
->resize($plgwidth)
->toFile ('scaled/nplg_'. basename($sOrigimagenplg));
}

$sOrigimagenpmd = str_replace('\\','/', '<actinic:variable name="ProductImageFileName" encoding="perl" selectable="false" />');
if ( file_exists('<actinic:variable encoding="perl" name="ProductImageFileName" selectable="false" />') ) {
$imagenpmd = new SimpleImage($sOrigimagenpmd);
$imagenpmd
->fromFile($sOrigimagenpmd)
->resize($npmdwidth)
->toFile('scaled/npmd_'. basename($sOrigimagenpmd));
}

$sOrigimagenpsm = str_replace('\\','/', '<actinic:variable name="ProductImageFileName" encoding="perl" selectable="false" />');
if ( file_exists('<actinic:variable encoding="perl" name="ProductImageFileName" selectable="false" />') ) {
$imagenpsm = new SimpleImage($sOrigimagenpsm);
$imagenpsm
->fromFile($sOrigimagenpsm)
->resize($npsmwidth)
->toFile('scaled/npsm_'. basename($sOrigimagenpsm));
}

$sOrigimagenpxs = str_replace('\\','/', '<actinic:variable name="ProductImageFileName" encoding="perl" selectable="false" />');
if ( file_exists('<actinic:variable encoding="perl" name="ProductImageFileName" selectable="false" />') ) {
$imagenpxs = new SimpleImage($sOrigimagenpxs);
$imagenpxs
->fromFile($sOrigimagenpxs)
->resize($npxswidth)
->toFile('scaled/npxs_'. basename($sOrigimagenpxs));
}

} catch(Exception $err) {
// Handle errors
echo $err->getMessage();
}
</actinic:block>

Replace the existing product image with this (code blocked by security! (Click for large image)

Click image for larger version Name: imagereplacement.jpg Views: 311 Size: 87.7 KB ID: 552831

Here is just one of the images which security allowed!

Code:

<img class="d-none d-lg-block lazyload lazy img-responsive" src="scaled\<actinic:block php="true">echo 'nplg_'. basename($sOrigimagenplg);</actinic:block>" data-src="scaled\<actinic:block php="true">echo 'nplg_'. basename($sOrigimagenplg);</actinic:block>" title="<actinic:variable encoding="strip" name="ProductName" />" >

Here is just the src bit which security allowed!

Code:

src="scaled\<actinic:block php="true">echo 'nplg_'. basename($sOrigimagenplg);</actinic:block>" data-src="scaled\<actinic:block php="true">echo 'nplg_'. basename($sOrigimagenplg);</actinic:block>"

I compressed much of the additional javascript and placed in the SubBodyCode

Code:

<actinic:block php="true" invariant="true" >
$bMinUsed = false;

if (file_exists("swiftjc.min.js"))
{
$SDMinScriptTime = filemtime("swiftjc.min.js");
if ($SDMinScriptTime > max(filemtime("popper.min.js"),
filemtime("jquery.bxslider.min.js"),
filemtime("bootstrap.min.js"),
filemtime("magiczoomplus.js"),
filemtime("dynamicchoiceimagessupportv6swift.js"),
filemtime("webslidemenu.js")))
{
echo '<script src="swiftjc.min.js" async></script>';
$bMinUsed = true;
}
}

if (!$bMinUsed)
{
echo '<script src="popper.min.js"></script>';
echo '<script src="bootstrap.min.js"></script>';
echo '<script src="magiczoomplus.js"></script>';
echo '<script src="jquery.bxslider.min.js"></script>';
echo '<script src="dynamicchoiceimagessupportv6swift.js"></script>';
echo '<script src="webslidemenu.js"></script>';
}
</actinic:block>

Under this went:

Code:

<!--Load CSS -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="fancybox-min.css" media="screen" />
<actinic:variable name="MagicZoomImages" value="Magic Zoom Support Swift" />
<actinic:variable name="DatePicker Theme" />
<script type="text/javascript" src="fancybox-all-compressed.js" async></script>
<!-- Initiate fancyBox -->
<script type="text/javascript">
$(document).ready(function(){$(".fancybox").fancybox(),$(".fancybox-buttons").fancybox({openEffect:"none",closeEffect:"none",prevEffect:"none",nextEffect:"none",closeBtn:!1,helpers:{title:{type:"inside"},buttons:{}},afterLoad:function(){this.title="Image "+(this.index+1)+" of "+this.group.length+(this.title?" - "+this.title:"")}}),$(".fancybox-thumbs").fancybox({prevEffect:"none",nextEffect:"none",closeBtn:!1,arrows:!1,nextClick:!0,helpers:{thumbs:{width:50,height:50}}}),$(".fancybox-media").attr("rel","media-gallery").fancybox({openEffect:"none",closeEffect:"none",prevEffect:"none",nextEffect:"none",arrows:!1,helpers:{media:{},buttons:{}}})});
</script>
<actinic:variable name="DatepickerSetup" />
<script type="text/javascript">
Magic Zoom InLine Javascript Here
</script>

I use async (https://www.w3schools.com/tags/att_script_async.asp) or defer (https://www.w3schools.com/tags/att_script_defer.asp) on some js links

SD quite often leaves out width="400" height="200" or whatever from image tags.It is worth adding them as although they get overwritten they help page speed as the browser has some idea what space to allocate.

I removed the @import references from the stylesheet and added the following to the UxHeadCode Swift:

Code:

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">

below the reference to the actinic stylesheet.

I did experiment with this: https://www.sitelocity.com/critical-path-css-generator
The idea is to put critical css inline in the head and load the rest after page load but I got a lot of non css shadowing on pageload so abandoned.

The next step would be to optimise images with RIOT (https://riot-optimizer.com)

If anyone finds anything I have broken in my test site by doing all this by all means please post it here.

Thank you

**graphicz** · 31-Jul-2020, 01:21 PM

I have added this instead of the bootstrap.min.css in UXHeadCode Swift

Code:

<!-- Optional, if we want the stylesheet to get preloaded. Note that this line causes stylesheet to get downloaded, but not applied to the page. Use strategically — while preloading will push this resource up the priority list, it may cause more important resources to be pushed down the priority list. This may not be the desired effect for non-critical CSS, depending on other resources your app needs. -->
<link rel="preload" href="bootstrap.min.css" as="style">
<!-- Media type (print) doesn't match the current environment, so browser decides it's not that important and loads the stylesheet asynchronously (without delaying page rendering). On load, we change media type so that the stylesheet gets applied to screens. -->
<link rel="stylesheet" href="bootstrap.min.css" media="print" onload="this.media='all'">

<!-- Fallback that only gets inserted when JavaScript is disabled, in which case we can't load CSS asynchronously. -->
<noscript><link rel="stylesheet" href="bootstrap.min.css"></noscript>

I left:

Code:

<!-- Stylesheet -->
<link href="actinic.css" rel="stylesheet" type="text/css">

as any asynchrony causes a nasty “Flash of Unstyled Content” (FOUC) as the page loads.

For the other stylesheet references in UXSubBodyCode Swift i have added "media="print" onload="this.media='all'"" replacing ny other 'media' reference that may be present.

Code:

<link rel="stylesheet" type="text/css" href="fancybox-min.css" media="print" onload="this.media='all'" />

It would be great if in a future release Sellerdeck could place 'Critical CSS' in a layout inline in the head area with the rest of the css in the stylesheet and have that load asynchronously.
The Critical styles would be unminified for easy editing but with the now established Sellerdeck PHP minification scripts top and bottom.

Announcement

Page Load Times

Page Load Times

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment