Current time: 12-10-2019, 11:43 PM Hello There, Guest! (LoginRegister)

Post Reply 
 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Help with load times
08-26-2014, 02:35 PM (This post was last modified: 08-26-2014 02:39 PM by Enduring Epilepsy.)
Post: #1
Question Help with load times
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.
Find all posts by this user
Quote this message in a reply
08-30-2014, 11:19 AM
Post: #2
RE: Help with load times
Hello? I even included links to my test results...
Find all posts by this user
Quote this message in a reply
09-04-2014, 05:26 AM (This post was last modified: 09-10-2014 12:43 AM by ajm_76.)
Post: #3
RE: Help with load times
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

Make your WordPress website or blog not just faster & not merely fast, but one of the fastest sites in the ENTIRE WORLD.

Performance. Speed. Get Some. WpFASTER!
Find all posts by this user
Quote this message in a reply
09-08-2014, 09:32 AM
Post: #4
RE: Help with load times
(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...
Find all posts by this user
Quote this message in a reply
09-09-2014, 12:41 AM (This post was last modified: 09-10-2014 12:44 AM by ajm_76.)
Post: #5
RE: Help with load times
(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

Make your WordPress website or blog not just faster & not merely fast, but one of the fastest sites in the ENTIRE WORLD.

Performance. Speed. Get Some. WpFASTER!
Find all posts by this user
Quote this message in a reply
09-10-2014, 11:28 PM
Post: #6
RE: Help with load times
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...bd-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.ph...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.
Visit this user's website Find all posts by this user
Quote this message in a reply
09-11-2014, 12:50 AM (This post was last modified: 09-11-2014 12:51 AM by Enduring Epilepsy.)
Post: #7
RE: Help with load times
(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...bd-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.ph...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/
Find all posts by this user
Quote this message in a reply
09-11-2014, 12:58 AM
Post: #8
RE: Help with load times
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).
Visit this user's website Find all posts by this user
Quote this message in a reply
09-11-2014, 01:04 AM (This post was last modified: 09-11-2014 01:06 AM by Enduring Epilepsy.)
Post: #9
RE: Help with load times
(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
Find all posts by this user
Quote this message in a reply
09-11-2014, 01:59 AM
Post: #10
RE: Help with load times
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.
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)