Page speed performance dropped significantly

matthew.wren's Avatar

matthew.wren

10 Jun, 2014 01:27 PM

Hello,

We have a multimedia page that has a lot of YouTube embeds on it. We recently updated the page so it does a different effect when a tab is clicked. Since this change it seems the performance of the page has suffered. The page used to render, on average, in 3.97 seconds but now it's closer to 22 seconds. Oho did the updates to the page and I had to implement them into Cascade and I'm wondering if somewhere along the lines I changed something to cause this performance issue.

I had to add a Javascript file and update another one. I minified all the JS files and didn't see a huge performance increase so I'm wondering if it has something to do with the format I had to edit?:

The lines that are different are 33- ~50

Original:

<xsl:stylesheet
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output indent="yes" method="xml"/>
    <xsl:template match="system-index-block">
        <xsl:apply-templates select="//system-page[@current = 'true']/system-data-structure/supplemental-content"/>
    </xsl:template>
    <xsl:template match="supplemental-content">
        <div class="row media-menu-tabs">
            <div class="columns twelve">
                <ul class="jq-ui-tabs">
                    <li>
                        <a class="mm-all" href="#">View All</a>
                    </li>
                    <li>
                        <a class="mm-campus" href="#">Campus Life</a>
                    </li>
                    <li>
                        <a class="mm-about" href="#">About Us</a>
                    </li>
                    <li>
                        <a class="mm-academics" href="#">Academics</a>
                    </li>
                </ul>
                <div class="mobile-nav-wrap">
                    <select class="mobile-navigation">
                        <option value="mm-all">View All</option>
                        <option value="mm-campus">Campus Life</option>
                        <option value="mm-about">About Us</option>
                        <option value="mm-academics">Academics</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="columns four">
                <xsl:for-each select="video-block[position() mod 3 = 0]">
                    <xsl:apply-templates select="."/>
                </xsl:for-each>
            </div>
            <!--/.four-->
            <div class="columns four">
                <xsl:for-each select="video-block[position() mod 3 = 1]">
                    <xsl:apply-templates select="."/>
                </xsl:for-each>
            </div>
            <!--/.four-->
            <div class="columns four">
                <xsl:for-each select="video-block[position() mod 3 = 2]">
                    <xsl:apply-templates select="."/>
                </xsl:for-each>
            </div>
            <!--/.four-->
        </div>
    </xsl:template>
    <xsl:template match="video-block">
        <div class="multimedia-item mm-{category}">
            <div class="videoWrapper">
                <iframe allowfullscreen="" frameborder="0" height="225" src="http://www.youtube.com/embed/{youtube-id}?feature=player_detailpage&amp;showinfo=0&amp;rel=0" width="400"></iframe>
            </div>
            <h2>
                <xsl:value-of select="title"/>
            </h2>
            <div class="content-body">
                <p>
                    <xsl:value-of select="content"/>
                </p>
            </div>
        </div>
    </xsl:template>
</xsl:stylesheet>

Current:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output indent="yes" method="xml"/>
    <xsl:template match="system-index-block">
        <xsl:apply-templates select="//system-page[@current = 'true']/system-data-structure/supplemental-content"/>
    </xsl:template>
    <xsl:template match="supplemental-content">
        <div class="row media-menu-tabs">
            <div class="columns twelve">
                <ul class="jq-ui-tabs">
                    <li>
                        <a class="mm-all" href="#">View All</a>
                    </li>
                    <li>
                        <a class="mm-campus" href="#">Campus Life</a>
                    </li>
                    <li>
                        <a class="mm-about" href="#">About Us</a>
                    </li>
                    <li>
                        <a class="mm-academics" href="#">Academics</a>
                    </li>
                </ul>
                <div class="mobile-nav-wrap">
                    <select class="mobile-navigation">
                        <option value="mm-all">View All</option>
                        <option value="mm-campus">Campus Life</option>
                        <option value="mm-about">About Us</option>
                        <option value="mm-academics">Academics</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row multimedia-items-container">
                <xsl:for-each select="video-block[position() mod 3 = 0]">
                    <xsl:apply-templates select="."/>
                </xsl:for-each>
                <xsl:for-each select="video-block[position() mod 3 = 1]">
                    <xsl:apply-templates select="."/>
                </xsl:for-each>
<xsl:for-each select="video-block[position() mod 3 = 2]"> <xsl:apply-templates select="."/> </xsl:for-each> </div> </xsl:template> <xsl:template match="video-block"> <div class="multimedia-item mm-{category}"> <div class="videoWrapper"> <iframe allowfullscreen="" frameborder="0" height="225" src="http://www.youtube.com/embed/{youtube-id}?feature=player_detailpage&amp;showinfo=0&amp;rel=0" width="400"></iframe> </div> <h2><xsl:value-of select="title"/></h2> <div class="content-body"> <p><xsl:value-of select="content"/></p> </div> </div> </xsl:template> </xsl:stylesheet>
  1. 1 Posted by Ryan Griffith on 10 Jun, 2014 03:53 PM

    Ryan Griffith's Avatar

    Hi Matthew,

    I want to make sure we make the distinction between browser page load times and Cascade Server rendering times. To clarify, are you referring to increased page load times of the published page or are you seeing increased Cascade Server rendering times?

    If you are referring to page load times in general, that does not sound like a Cascade-related issue so I may not be of much help there. But that being said, I suspect the underlying issue is the fact that you are loading so many videos on the page at once. I have seen some sites that use an on demand technique where you basically use placeholders (ie the video thumbnails) and load the video on demand when the thumbnail is clicked. Something like this may help.

    If you are experiencing increased Cascade Server render times, I'm not really seeing anything glaring between your two Format versions that would indicate increased render times. Specifically, the only thing I am seeing that changed is the HTML surrounding the videos themselves.

    Curious, but now that you have removed the <div class="columns four"> columns surrounding the videos, you probably no longer need to split the videos into three separate loops, nor would you need the loops at all. You should be able to simply use the following:

    <div class="row multimedia-items-container">
        <xsl:apply-templates select="video-block"/>
    </div>
    

    If you DO need to split things out, this may be a more efficient approach as I have heard using apply-templates is faster than for-each:

    <div class="row multimedia-items-container">
        <xsl:apply-templates select="video-block[position() mod 3 = 0]"/>
        <xsl:apply-templates select="video-block[position() mod 3 = 1]"/>
        <xsl:apply-templates select="video-block[position() mod 3 = 2]"/>
    </div>
    

    Please let me know if you have any questions.

    Thanks!

  2. 2 Posted by matthew.wren on 10 Jun, 2014 05:34 PM

    matthew.wren's Avatar

    Hey Ryan,

    I was referring to browser page load times so sorry for the confusion! We do, however, have an overarching Cascade Server rendering time issue but that's something we are working out with Tim.

    I took your advice and actually applied the second snippet you create to our format along with the on demand technique and it worked! Now they load in under 2 seconds and that's great.

    There's just 2 style issues I'm noticing with the on demand code this website provided and I was wondering if you ever ran across this yourself. The description disappears behind the image on smaller viewport sizes and the description hides behind the video once a video is played. I'm not sure if there's a fix for that with how we have it set up. I'm trying to troubleshoot it now but if you happen to know a solution for that then I can call this case closed.

  3. 3 Posted by Ryan Griffith on 10 Jun, 2014 06:34 PM

    Ryan Griffith's Avatar

    Hm, definitely sounds like a CSS issue. Do you happen to have the updated HTML published somewhere? I'd be happy to take a look at it with you.

    Thanks!

  4. 4 Posted by matthew.wren on 10 Jun, 2014 06:43 PM

    matthew.wren's Avatar

    Why yes I do!

    Also the video iframes that load are also wonky. I'm trying to see if I can incorporate a responsive iFrame solution to that.

  5. 5 Posted by Ryan Griffith on 10 Jun, 2014 07:40 PM

    Ryan Griffith's Avatar

    Hi Matthew,

    I believe I was able to narrow the issue down to the following CSS in main.css (lines 322-328):

    /* Multimedia page */
    .videoWrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 25px;
        height: 0;
    }
    

    Specifically, I believe the culprit styles are the padding-bottom and height. If you remove these styles, everything seems to render correctly as you change the viewport size. Give this a try and let me know how it works out for you.

    Thanks!

  6. 6 Posted by matthew.wren on 10 Jun, 2014 08:34 PM

    matthew.wren's Avatar

    Hi Ryan,

    That seem to do the trick for the text! Still having that strange thing happening when you actually play the video and the text filling in behind it and the size of the player is fixed at 400px. Do you think FitVidsJS would be a solution to that? Seems like it's part of the JS file to take the width of the div.

  7. 7 Posted by Ryan Griffith on 10 Jun, 2014 08:46 PM

    Ryan Griffith's Avatar

    Hi Matthew,

    I believe the issue with the video overlapping the text is due to the following styles:

    .videoWrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    

    Specifically, the position, left and top styles. This will cause the iframe (ie the video) to be positioned outside of the flow of the container and at the top, causing the content to be bumped up under the video. Try removing those styles and let me know how it works out.

    Please let me know if you have any questions.

    Thanks!

  8. 8 Posted by matthew.wren on 11 Jun, 2014 01:56 PM

    matthew.wren's Avatar

    Hey Ryan,

    I took out the top and left attributes and also the position. When I took that out it stopped the text from disappearing behind the video! So that's good. Actually this whole class and selectors are pretty useless because it's being overridden by the other iFrame styles that are pulled in from the JS file.

    On smaller viewports, when there are still 3 rows but tight, the video will always display at 400px rather than within its container. I tried added !important; to the stylesheet but it still won't override the JS. I tried to include FitVidsJS to the site but it's not applying to the videos still. Can you think of a way to make the videos fluid? At least a way to not pull in the width and height of the images?

  9. 9 Posted by Ryan Griffith on 11 Jun, 2014 02:12 PM

    Ryan Griffith's Avatar

    Hi Matthew,

    I'm not sure if you will be able to remove those dimensions. Even if you used width:100%, you will still need a fixed height in order to keep the overall aspect ratio of the video.

    Doing some research, I am seeing that quite a few of these articles contain CSS that you were using previously as a means to make the videos fluid, for example: http://webdesignerwall.com/tutorials/css-elastic-videos. These styles were unfortunately the cause of the overlay over the text issue you were experiencing. Perhaps there is another approach to this that will allow you to keep those styles so the videos can remain fluid.

  10. 10 Posted by matthew.wren on 11 Jun, 2014 06:58 PM

    matthew.wren's Avatar

    I was tossing around the idea of having the videos load in a lightbox while keeping the image thumbnails. I found something called Magnetic Popup this is resposnive and seems to work well but I'm not sure how I could incorporate this into what is done with the load on-demand options in place.

    I decided to copy the youtube.js file that is generating the video iframe so I have it locally to mess around with. Unfortunately it is minified by the last several lines seems to be where all the magic is happening dealing with creating an iFrame and setting its width and height.

    var i,c,y,v,s,n;v=document.getElementsByClassName("youtube");if(v.length>0){s=document.createElement("style");s.type="text/css";s.innerHTML='.youtube{background-color:#000;max-width:100%;overflow:hidden;position:relative;cursor:hand;cursor:pointer}.youtube .thumb{bottom:0;display:block;left:0;margin:auto;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto}.youtube .play{filter:alpha(opacity=80);opacity:.8;height:77px;left:50%;margin-left:-38px;margin-top:-38px;position:absolute;top:50%;width:77px;background:url("data:image/png;base64,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") no-repeat}';document.body.appendChild(s)}for(n=0;n<v.length;n++){y=v[n];i=document.createElement("img");i.setAttribute("src","http://i.ytimg.com/vi/"+y.id+"/hqdefault.jpg");i.setAttribute("class","thumb");c=document.createElement("div");c.setAttribute("class","play");y.appendChild(i);y.appendChild(c);y.onclick=function(){var a=document.createElement("iframe");a.setAttribute("src","https://www.youtube.com/embed/"+this.id+"?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1");a.style.width=this.style.width;a.style.height=this.style.height;this.parentNode.replaceChild(a,this)}};
    
  11. 11 Posted by Ryan Griffith on 16 Jun, 2014 12:15 PM

    Ryan Griffith's Avatar

    Hi Matthew,

    Are these videos public by chance? If so, you could always use the YouTube API to pull in the RSS feed of a playlist as a Feed Block and transform it with a Format.

    Each entry has a thumbnail and description that you can pull in automatically, so this solution would avoid the need to use JavaScript just to obtain the video's thumbnail. You would just need to add your JavaScript for the lightbox if that is the route you want to go.

  12. 12 Posted by matthew.wren on 16 Jun, 2014 12:59 PM

    matthew.wren's Avatar

    Hey Ryan,

    Yes these videos are public but I do not think they are in a playlist yet and I'm sure they easily could be, However, Is there a way to make a playlist private without making the videos private as well? I'm just asking because I'm not sure we want this particular playlist to appear on our YouTube channel if it is serving a more functional service on our site.

    If I go with the feed block idea, would that affect the current javascript effect with the tabbed buttons? Also is it possible to work within the current format and just adding more XSLT to the section we've been working with this whole time (i.e. the <div class="videoWrapper">)?

  13. 13 Posted by Ryan Griffith on 16 Jun, 2014 01:40 PM

    Ryan Griffith's Avatar

    You would need to do some testing to see if you can make a playlist hidden and still obtain the feed using the API, but I am thinking it might still be possible.

    If I go with the feed block idea, would that affect the current javascript effect with the tabbed buttons? Also is it possible to work within the current format and just adding more XSLT to the section we've been working with this whole time

    Absolutely, basically you would need to replace the portion of the Format that uses the Data Definition fields to include the Feed Block data instead. If you need access to the calling page, you would need to swap in a block chooser field instead of the video fields. Your page region would need a calling page (or current page) index block along with your format.

    Note: the block chooser should have a Render Content Depth value of around 5 to ensure all of the data is pulled in.

  14. Ryan Griffith closed this discussion on 24 Jun, 2014 05:19 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac