I noticed that loading times for my WordPress vary significantly between browsers, with IE being the worst. After investigation I noticed that the cause is slow loading of PIE.php, (PIE stands for progressive internet explorer and it's obviously only used in IE). After running 10 tests in different locations in Canada and US the range for PIE.php loading is between 0.9 sec and 1.8 sec with 1.3 sec being an average. Does anyone know how to mitigate this? According to GA I have almost 40% of vivtors with IE, so 1.3 sec extra time is quite significant overhead...
Sure. Don't use CSS PIE. It should not take 1.3 seconds for PIE.php to do its thing. Is that file one of the last to be downloaded by the browser? Just wondering because if it is, then I may know why.
Not sure what you mean by "last"... It starts with rendering the page but ends toward the end. Typically it's in the last 10 items to load. As for not using this, I don't think my theme will work on IE without it. I have the following in the wphead.php file (it's in the include folder for the weaver ii theme): function weaverii_fix_IE() { /* Design note: This conditional IE support code is injected directly into the header. This is consistent with the fact that the main custom CSS is also normally injected into the header, and the fact that it needs to include the PIE script using 'get_template_directory_uri' which will not be the same for all installations and all versions of Weaver II. */ $add_PIE = !weaverii_getopt('_wii_hide_PIE'); echo("\n"); if ($add_PIE) weaverii_bake_PIE(); } function weaverii_bake_PIE() { /** * Attach CSS3PIE behavior to elements * Add elements here that need PIE applied */ $pie_loc = get_template_directory_uri() . '/js/PIE/PIE.php'; ?> <!--[if lte IE 8]> <style type="text/css" media="screen"> <?php if (!weaverii_getopt_checked('wii_hide_img_shadows') && !weaverii_getopt_checked('wii_hide_img_borders')) { ?> #content img.size-thumbnail,#content img.size-medium,#content img.size-large,#content img.size-full,#content img.attachment-thumbnail, #content img.wp-post-image,img.avatar,.format-chat img.format-chat-icon, <?php } ?>
How many lines are in the pie.php file? Test your site on tools.pingdom.com. Of the total number of files downloaded by the browser, what number is PIE.php?
I cannot. Pingdom.com doesn't have IE user agent and PIE.php is only loaded with IE browser. This may help (disregard red circle for GA script, just look at the second spike - it is for PIE.php): https://www.dropbox.com/s/stlwb62x3em3xwm/Webpagetest.jpg?dl=0
The very notion of using some sort of scripttardery to implement things that should be a total "OH WELL" in legacy browsers -- like rounded corners and gradients -- is bad enough... but one that now has some sort of mouth-breathing dumbass SERVER SIDE code as well? Do yourself a favor, GET RID OF IT. Same goes for the dumbass IE conditional crap. You need that to make a website gracefully degrade you probably don't know enough HTML or CSS to be building a website -- and as I just said, legacy IE doesn't get some goofy transitions or rounded corners, OH WELL. That's what graceful degradation IS. So long as the page WORKS in those older browsers, don't waste time trying to make fancy CSS3 nonsense work in them. If you can't make it work without those fancy CSS3 bits, you are doing something wrong... Like using some sort of off the shelf template garbage like "weaver" in an "I cans haz intarnets" environment like turdpress... As I often say, if you don't know what's wrong with markup like this: <body class="home page page-id-7411 page-template-default custom-background single-author singular not-logged-in weaverx-theme-body noheader weaverx-page-page weaverx-sb-one-column"> <a href="#page-bottom" id="page-top">↓</a> <!-- add custom CSS to use this page-bottom link --> <div id="wvrx-page-width"> </div> <noscript><p style="border:1px solid red;font-size:14px;background-color:pink;padding:5px;margin-left:auto;margin-right:auto;max-width:640px;text-align:center;"> JAVASCRIPT IS DISABLED. Please enable JavaScript on your browser to best view this site.</p></noscript><!-- displayed only if JavaScript disabled --> <div id="wrapper" class="wrapper font-sans-serif"><div class="clear-preheader" style="clear:both;"></div> <div id="header" class="header font-sans-serif"> <div id="nav-secondary" class="menu-secondary menu-secondary-standard"> <div class="wvrx-menu-container m-font-size font-arialBlack font-bold font-italic"><span class="wvrx-menu-html wvrx-menu-left hide-none"><div class="weaver-social"><a class="wvr-social-a" href="http://www.msn.com" target="_self" title="Facebook: social networking"><span class="wvr-social-icon genericon genericon-facebook" style="font-size:20px;margin-right:0px;"></span></a> <a class="wvr-social-a" href="http://www.msn.com" target="_self" title="This site's RSS feed"><span class="wvr-social-icon genericon genericon-feed" style="font-size:20px;margin-right:0px;"></span></a> <a class="wvr-social-a" href="http://www.msn.com" target="_self" title="Twitter"><span class="wvr-social-icon genericon genericon-twitter" style="font-size:20px;margin-right:0px;"></span></a> </div> <span style="line-height:1;display:inline-block;text-align:left;font-size:75%;margin-left:10px;">Secondary<br/>Menu Html</span></span><div class="wvrx-menu-clear"></div><ul id="menu-secondary" class="weaverx-theme-menu wvrx-menu menu-hover menu-alignright"><li id="menu-item-7648" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-7648"><a href="#">Plugins</a> <ul class="sub-menu"> <li id="menu-item-7919" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7919"> Code (markup): You probably have no business making websites in the first place... and that's EXACTLY what nube predating BS like "weaver" and turdpress vomits up and has the giant pair of donkey brass to tell people is acceptable.