WebPagetest Forums
Help with load times - Printable Version

+- WebPagetest Forums (https://www.webpagetest.org/forums)
+-- Forum: Web Performance (/forumdisplay.php?fid=3)
+--- Forum: Discuss Test Results (/forumdisplay.php?fid=4)
+--- Thread: Help with load times (/showthread.php?tid=13194)

Pages: 1 2


Help with load times - Enduring Epilepsy - 08-26-2014 02:35 PM

I've been re-writing my whole site after the theme I was using shut down entirely. Angry I've purchased some plugins and put in a lot of time trying to tweak things. Now I need some help with the page load.

I just ran tests for my blog page with all 4 browsers and have made improvements -

Chrome
Firefox
IE 11
Safari

I was trying to use Gzip for font files but it wasn't cooperating, and I'm not sure why, so I've deleted the zip files for now.

I'm still having trouble with some of the CDN and caching too. Undecided Can someone please advise what I need to add to my .htaccess file or possible changes to make to my pagespeed service? Thank you.


RE: Help with load times - Enduring Epilepsy - 08-30-2014 11:19 AM

Hello? I even included links to my test results...


RE: Help with load times - ajm_76 - 09-04-2014 05:26 AM

Your page has 12 blocking script resources and 19 blocking CSS resources. Remedying that would be a good place to start.

Best,
AJ
Managing Partner
WpFASTER.org


RE: Help with load times - Enduring Epilepsy - 09-08-2014 09:32 AM

(09-04-2014 05:26 AM)ajm_76 Wrote:  Your page has 12 blocking script resources and 19 blocking CSS resources. Remedying that would be a good place to start.

Best,
AJ
Managing Partner
http://www.WpFaster.org

Thanks for the input but I have no clue how to eliminate the javascript "safely" and not completely mess with my site. I've been teaching myself as I go. Do you have advice how to do that...


RE: Help with load times - ajm_76 - 09-09-2014 12:41 AM

(09-08-2014 09:32 AM)Enduring Epilepsy Wrote:  Thanks for the input but I have no clue how to eliminate the javascript "safely" and not completely mess with my site. I've been teaching myself as I go. Do you have advice how to do that...

Hi again,

I see you're using W3TC. If you go to Performance --> Minify --> and click the "Help" button at the top of the page, a window will pop up for all of the JavaScript an CSS file URIs that W3TC detects. From there, you can begin to combine files (the process is fairly self-explanatory).

Since you are not likely to run into any issues combining CSS, that is where I recommend you start. Combing JavaScript and discovering proper placement such that no dependency issues arise, on the other hand, is going to test your patience.

I see you're also using Google's PSS, which, depending upon how it is set up, may or may not play nice with W3TC's various features. You will get nearly antithetical opinions on the matter from individuals all equally learned, but my advice would be to un-install PSS and sign up for CloudFlare.

Best,
AJ
Managing Partner
WpFASTER.org


RE: Help with load times - pmeenan - 09-10-2014 11:28 PM

AJ is pretty much right on point. W3TC has support for automatically merging various css and script files together and that needs to be step number one.

I usually like the filmstrip/waterfall view when looking at things: http://www.webpagetest.org/video/compare.php?tests=140826_QF_a3eebd2d46362d243ae00854624590bd-r:5-c:0

It looks like the first 70 resources are a bunch of separate/small css and js files. Combining them down into 1-2 of each will have a dramatic impact on the initial rendering and should be relatively easy (either using W3TC to automate it or doing it by hand).

Beyond that, it looks like you are using some javascript-based code to fade image panels in as people scroll but it is blocking until all of the images have loaded (which is causing the really slow display). It is also loading ALL of the images before doing anything: http://www.webpagetest.org/pageimages.php?test=140826_QF_a3eebd2d46362d243ae00854624590bd&run=5&cached=0

I don't know how much control you have over that plugin/code but it would be a lot better if it loaded only the visible widgets initially, displayed the panels before the images themselves even loaded (and let the browser fill them in) and only initiate the loading of the images for the hidden widgets after onload.


RE: Help with load times - Enduring Epilepsy - 09-11-2014 12:50 AM

(09-10-2014 11:28 PM)pmeenan Wrote:  AJ is pretty much right on point. W3TC has support for automatically merging various css and script files together and that needs to be step number one.

I usually like the filmstrip/waterfall view when looking at things: http://www.webpagetest.org/video/compare.php?tests=140826_QF_a3eebd2d46362d243ae00854624590bd-r:5-c:0

It looks like the first 70 resources are a bunch of separate/small css and js files. Combining them down into 1-2 of each will have a dramatic impact on the initial rendering and should be relatively easy (either using W3TC to automate it or doing it by hand).

Beyond that, it looks like you are using some javascript-based code to fade image panels in as people scroll but it is blocking until all of the images have loaded (which is causing the really slow display). It is also loading ALL of the images before doing anything: http://www.webpagetest.org/pageimages.php?test=140826_QF_a3eebd2d46362d243ae00854624590bd&run=5&cached=0

I don't know how much control you have over that plugin/code but it would be a lot better if it loaded only the visible widgets initially, displayed the panels before the images themselves even loaded (and let the browser fill them in) and only initiate the loading of the images for the hidden widgets after onload.

Thank you. I've implemented combining and minify with W3TC. Do you think this would help with loading images and the script?

http://jquery.eisbehr.de/lazy/


RE: Help with load times - pmeenan - 09-11-2014 12:58 AM

It's really hard to say without knowing more about the plugin that is doing the fade-in effect for the various panes. I'd recommend going back to the author of that plugin and asking them to see if there is a better way to tune it (or if they'd be willing to optimize it).


RE: Help with load times - Enduring Epilepsy - 09-11-2014 01:04 AM

(09-11-2014 12:58 AM)pmeenan Wrote:  It's really hard to say without knowing more about the plugin that is doing the fade-in effect for the various panes. I'd recommend going back to the author of that plugin and asking them to see if there is a better way to tune it (or if they'd be willing to optimize it).

Unfortunately the theme I purchased is no longer available for sale so there is no support. Its why I've been rewriting this for over a month.

The code for this is not a plugin exactly but is in the shortcodes that came with the theme. It integrates as a layout.

Here is the latest test: New Test


RE: Help with load times - pmeenan - 09-11-2014 01:59 AM

Looking at the panels, it looks like each one has this chunk of script embedded:

Code:
jQuery(window).load(function(){
    Shadowbox.init();
    jQuery(".cx-featuredimage a").hover(function(){
        jQuery(this).parent().addClass("highlight",{duration:500});
        jQuery(this).find("img").stop().css("opacity",0.5);
        jQuery(this).closest("div").find(".zoomin").stop().css("opacity","1");
        jQuery(this).closest("div").find(".zoomin").css("margin-right",-1*(jQuery(this).find("img").width()/2));
        jQuery(this).closest("div").find(".zoomin").css("margin-top",jQuery(this).find("img").height()/2);
        jQuery(this).closest("div").find(".zoomin").css("margin-left",jQuery(this).find("img").width()/2);
    },function(){
        jQuery(this).closest("div").find(".zoomin").stop().css("opacity",0);
        jQuery(this).parent().removeClass("highlight",{duration:500});
        jQuery(this).find("img").stop().css("opacity",1);
    });
});

It looks like most of that code is handling the zoom-on-hover but the Shadowbox.init() might be the code that is triggering the actual display.

For starters, that chunk of code looks like it is generic and should not be attached to every single one of the posts. You probably only need it once. You also don't want to attch it to the window load event. If you change the jQuery(window).load to jQuery(document).ready it should display the panels a lot sooner.