Help with load times

Web Performance Discuss Test Results
1

I’ve been re-writing my whole site after the theme I was using shut down entirely. :@ 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. :-/ Can someone please advise what I need to add to my .htaccess file or possible changes to make to my pagespeed service? Thank you.

2

Hello? I even included links to my test results…

3

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

4

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…

5

[quote=“Enduring_Epilepsy, post:4, topic:8923”]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…
[/quote]

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

6

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.

7

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/

8

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

9

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

10

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

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.

11

I see the script in the page source. But I cannot find it in my files. :@ When I look at the page with Developer Tools, I’m seeing it as text :huh:

I found the masonry code here: http://masonry.desandro.com/ I’m going to look more tonight.

12

Ok - I finally found it but I’m not sure how to edit the JS…

JS code

Here is the masonry file MasonryGrid.php

Masonry CSS

The JS was buried in my Minify Cache file. I recognized the Shadowbox in the code, but am not sure how it’s written :huh: If I edit the Masonry code with document or container, it works, but I lose the CSS styling. Can you advise on how to properly edit this? Or do I need to shut off my minify to do so? Thank you for all the help :slight_smile:

13

I don’t see the ShadowBox.init call in any of the code. That said, there are a couple of chunks of code in the masony php that are attached to window.load. The first one looks like it fades the visible boxes into view. You may have to touch a few other pieces of code but my first attempt would be to just change (window).load to (document).ready for that first chunk of code and see if it has any impact.

Unfortunately you’re reverse-engineering the dev work on the theme and changing the bahavior and it’s entirely possible something is going to break. From the looks of it, the original author focused a lot more on “pretty” than performance.

14

I may file a ticket with pagespeed then. See if they can help me with this, because I don’t want to mess up the site and don’t have the budget for another theme. :-/

15

PageSpeed isn’t going to be able to help. It requires knowledge of the application-level javascript that is part of the theme because the theme code itself is choosing to not display any of the modules until all of the page content has loaded. Unfortunately it is working exactly like the original theme author intended it to and PageSpeed can’t go in and change the logical behavior of the code like that.

Some of the filters for prioritizing visible content and lazy loading images might be able to help if the delay load the images in the modules but that’s really the only chance that PageSpeed has to help.

16

[quote=“pmeenan, post:13, topic:8923”][…] the theme […] the original author focused a lot more on “pretty” than performance.
[/quote]

^ This really is the bottom line, Enduring Epilepsy. Further, a good chunk of the things that can be done with the theme to improve its technical shortcomings aren’t likely to make much of an impact due to the theme’s aesthetic dependencies. The site, with this theme, is almost entirely dependent (again, aesthetically) on JavaScript that – in all likelihood – has to be blocking, and style sheets, that even if in-lining only ‘critical’ CSS and deferring the rest, will issue an increase in HTML so large as to get you right back to square one. Further, the problem is compounded by many of the plugins that have been added to an already poorly-coded, and bloated theme (Slider Revolution and the VC Add-Ons, as but two examples).

It’s the last thing anyone wants to hear, but your site will never be fast with this theme, even if you were to trim-back on the plugins you’ve added. It can be made relatively faster, but will never, ever, (…not ever…) be fast.

I just don’t want to see you tear your hair out trying to ‘polish this turd,’ as they say.

Best,
AJ