Announcement

Collapse
No announcement yet.

Page Load Times

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Page Load Times

    Google Analytics and their Page Speed Insights are showing quite a lot of focus on page load speeds from the visitors perspective with things like

    First Contentful Paint
    Speed Index
    Largest Contentful Paint
    Time to Interactive
    Total Blocking Time
    Cumulative Layout Shift

    On my V18 site the main thing they suggest for improving this is to eliminate the render blocking resources which are loading before the page can be drawn. Specifically these are the CSS and Javascript files which are loading. i.e.

    Resource Transfer Size Potential Savings
    /acatalog/actinic.css 155.7 KB 750 ms
    /acatalog/jquery-1.11.1.min.js 93.8 KB 590 ms
    /acatalog/jquery.bxslider.min.js 27.7 KB 270 ms
    /acatalog/jquery.bxslider.css 3.9 KB 150 ms
    /acatalog/actiniccore.js 16.1 KB 230 ms
    /acatalog/actinicextras.js 126.5 KB 710 ms
    /acatalog/actinicsearch.js 261.6 KB 750 ms
    /acatalog/responsive.js 27.7 KB 190 ms
    /acatalog/recentproductssupport.js 12.6 KB 110 ms
    /acatalog/dynamic.js 64.3 KB 310 ms


    Goz in an earlier thread https://community.sellerdeck.com/for...s-disappearing had placed actinic.css at the bottom of the page to speed up loading which was causing some problems with megamenu and I'm just wondering which files can we load at the bottom to improve the page render speed. I'm sure some of them such as actinicsearch aren't needed until after the page has rendered, and I only have the bxslider on the home page so that doesn't need to be loaded everywhere.

    It looks to me as if we should probably only load the essential files at the top where where needed for rendering and the others at the bottom (again where needed)

    So in my case it would look something like:

    Files that need loading at the top for rendering on all pages:

    /acatalog/actinic.css
    /acatalog/actiniccore.js
    /acatalog/actinicextras.js
    /acatalog/responsive.js
    /acatalog/recentproductssupport.js
    /acatalog/dynamic.js

    Files that need loading at the top for rendering on the home page only:

    /acatalog/jquery-1.11.1.min.js
    /acatalog/jquery.bxslider.min.js
    /acatalog/jquery.bxslider.css

    Files that can be loaded from the bottom of the page after the page has rendered:

    /acatalog/actinicsearch.js

    Anyone else have any thoughts or suggestions on this? I'm not sure where the right place for the actinicore.js and actinicextras.js files should be.

    Mike
    -----------------------------------------

    First Tackle - Fly Fishing and Game Angling

    -----------------------------------------

    #2
    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!
    Norman - www.drillpine.biz
    Edinburgh, U K / Bitez, Turkey

    Comment


      #3
      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.
      Regards

      Jason
      Silver Jewellery from Tianguis Jackson and Geti Titanium Rings
      Titan Jewellery Men's Titanium Wedding Rings and Tungsten Wedding Rings
      Titanium Jewellery

      Comment


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

        Jason
        Silver Jewellery from Tianguis Jackson and Geti Titanium Rings
        Titan Jewellery Men's Titanium Wedding Rings and Tungsten Wedding Rings
        Titanium Jewellery

        Comment


          #5
          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.
          -----------------------------------------

          First Tackle - Fly Fishing and Game Angling

          -----------------------------------------

          Comment


            #6
            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.
            -----------------------------------------

            First Tackle - Fly Fishing and Game Angling

            -----------------------------------------

            Comment


              #7
              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.
              Regards

              Jason
              Silver Jewellery from Tianguis Jackson and Geti Titanium Rings
              Titan Jewellery Men's Titanium Wedding Rings and Tungsten Wedding Rings
              Titanium Jewellery

              Comment


                #8
                The problem is you don’t actually know if a CSS selector is unused unless you:
                1. check coverage on every single page of your entire site…
                2. while executing all JavaScript…
                3. under every possible combination of state…
                4. in every possible combination of media queries you’ve used.
                Elysium:Online - Official Accredited SellerDeck Partner
                SellerDeck Design, Build, Hosting & Promotion
                Based in rural Northants

                Comment


                  #9
                  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.

                  Hugh Gibson
                  CTO - Sellerdeck Ltd.

                  Comment


                    #10
                    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


                    -----------------------------------------

                    First Tackle - Fly Fishing and Game Angling

                    -----------------------------------------

                    Comment


                      #11
                      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.

                      Hugh Gibson
                      CTO - Sellerdeck Ltd.

                      Comment


                        #12
                        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.

                        <p class="contactInfoP" style="display: none;"><span class="displayDesktop">020 8455 7778</span><a class="displayMobile" href="tel:020 8455 7778" rel="nofollow">020 8455 7778</a></p>

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

                        First Tackle - Fly Fishing and Game Angling

                        -----------------------------------------

                        Comment


                          #13
                          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

                          <p class="contactInfoP" >

                          becomes this

                          <p class="contactInfoP" style="display:none;">

                          for the phone number HTML


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

                          First Tackle - Fly Fishing and Game Angling

                          -----------------------------------------

                          Comment


                            #14
                            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:	28
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 spped as the browser has some idea what soace 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
                            Jonathan Chappell
                            Website Designer
                            SellerDeck Website Designer
                            Actinic to SellerDeck upgrades
                            Graphicz Limited - www.graphicz.co.uk

                            Comment


                              #15
                              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.
                              Jonathan Chappell
                              Website Designer
                              SellerDeck Website Designer
                              Actinic to SellerDeck upgrades
                              Graphicz Limited - www.graphicz.co.uk

                              Comment

                              Working...
                              X