XF 1.4 Laggy Page Loading

[Robust]

Even with all add-ons disabled and using the default style, page loading is terrible. It takes too long for the user to be able to scroll without having choppyness and lag. I don't get this on other forums, even with lots of images.

https://www.gamingforums.net

You can change to the default style in the bottom left. Is it just me, or are pages laggy for a few seconds before becoming responsive to scrolling? This isn't normal. I'm using a MBP Mid-2014 edition, and other members of my forum have reported this.

Mainly on categories and especially threads. Here's an example of a thread.

 

[Jake Bunce]

You have lots of embedded youtube videos. That is the cause of the lag.

See my posts in this thread for a code fix:

https://xenforo.com/community/threads/disable-embedded-videos.75710/

(there are a few revisions to the code, look to my last post in that thread)

 

[Robust]

@Jake Bunce Not a clue what I done but I was setting up the static sub domain, which has some aggressive caching and performance boosts involved. Now I'm not getting any problems with page speed. Can you take a look and see if you're seeing improvements?

 

[Robust]

BTW @Jake Bunce Using that BB Code there, videos don't load even after clicking load. See here: https://www.gamingforums.net/threads/racing-circuits.1993/

Replacement code:

<div class="{$id}" style="width: 500px; height: 300px; cursor: pointer; text-decoration: underline; background-color: black; color: white; text-align: center; background-image: url('http://img.youtube.com/vi/{$id}/0.jpg'); background-position: 10px -29px; position: relative;">
    <div style="position: absolute; top: 130px; left: 160px; background-color: white; color: black; padding: 10px; border-radius: 10px;">[Show YouTube Video]</div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('div.{$id}').click(function(){
            $(this).html('<iframe width="500" height="300" src="http://www.youtube.com/embed/{$id}?wmode=opaque" frameborder="0" allowfullscreen></iframe>');
        });
    });
</script>

 

[Jake Bunce]

Your page source has "rocketscript" instead of "javascript". A quick Google search points to Cloudflare. Can you disable Cloudflare?

 

[Robust]

Your page source has "rocketscript" instead of "javascript". A quick Google search points to Cloudflare. Can you disable Cloudflare?

Part of the whole aggressive caching idea. I can disable rocketscript for optimising JavaScript if there is no other way around it though, just on forum root and leave it working in /js

Edit: Going to try data-cfasync="false"

 

[Robust]

<script data-cfasync="false" type="text/javascript">
    $(document).ready(function(){
        $('div.PtW4QndQSGo').click(function(){
            $(this).html('<iframe width="500" height="300" src="http://www.youtube.com/embed/PtW4QndQSGo?wmode=opaque" frameborder="0" allowfullscreen></iframe>');
        });
    });
</script>

Now it's just text/javascript and it still doesn't work.

 

[TPerry]

@Robust, CloudFlare's RocketExploder (AKA RocketLoader) is a BETA product, and being a BETA product will have problems. They have instructions on how to place exclusions, but the general recommendation is to totally disable it. It has caused more issues than I have fingers and toes to count on.

 

[Robust]

@Robust, CloudFlare's RocketExploder (AKA RocketLoader) is a BETA product, and being a BETA product will have problems. They have instructions on how to place exclusions, but the general recommendation is to totally disable it. It has caused more issues than I have fingers and toes to count on.

Even then, with data-cfasync="false" it should completely ignore it, and it does. That isn't loaded with rocketloader.

 

[Luke F]

Even then, with data-cfasync="false" it should completely ignore it, and it does. That isn't loaded with rocketloader.

jQuery isn't loaded at the time the javascript executes, due to rocketloader. At a minimum you would need to add data-cfasync="false" to jQuery too, but there will probably be other issues

 

[TPerry]

Have you tried it with it disabled. Remember, it's a BETA product, and what "should" work may not necessarily follow what it "should" do.

 

[Robust]

Completely disabled and it still doesn't work.

 

[Luke F]

Completely disabled and it still doesn't work.

You also need to adjust all the youtube URLs to https or protocol relative

 

[Robust]

You also need to adjust all the youtube URLs to https or protocol relative

Cheers. Can't believe I overlooked that. By the way, the replacement completely disregards alignment of the video. It's positioned central but the BB Code replacement makes it align left all the time. Any solution?

 

[Jake Bunce]

Cheers. Can't believe I overlooked that. By the way, the replacement completely disregards alignment of the video. It's positioned central but the BB Code replacement makes it align left all the time. Any solution?

Add either of these CSS attributes to the outer div to achieve center alignment:

display: inline-block;
margin: auto;

 

[Robust]

Add either of these CSS attributes to the outer div to achieve center alignment:

display: inline-block;
margin: auto;

I need it to be relative to what the user chooses.

[center [media should center it, whilst [left [media will keep it left aligned. Does this need a custom add-on?

 

[Jake Bunce]

I need it to be relative to what the user chooses.

[center [media should center it, whilst [left [media will keep it left aligned. Does this need a custom add-on?

Use the inline-block method.