- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- TutorialsWhat is Ajax preloading?
I think with the tagDiv speed booster, gzip/deflate on your server (which *should* be running properly if talking about speed), and mod_pagespeed, that might be one thing too many, in my humble opinion.
I don’t know anybody using it. Most “pro” developers simply mod their SASS/LESS code for what they need and the super cool geeks use COMPASS.
With WordPress you have a number of inter-dependent things, so likely more of a “does it work well with WordPress” before “does it work with the theme.”
There is some discussion in the WP core about the subject of autoprefir and prefix-free
https://core.trac.wordpress.org/ticket/27078
However it may be that what you think it will do for you, isn’t what it actually does. It does “reduce the size” of CSS3 code, but was built in 2011 when it was a slower world, prior to HTML5, mod_pagespeed, and many of the efforts to write simpler code — again, take a look at SASS/LESS formats, along with minification.
While it was a good tool for a super high traffic site, to basically build in “shortcoding” of the elements, in the real world with average blog it won’t REALLY do that much for you — I doubt you would increase a pagespeed score by even a point.
If you’ve already minified all your CSS/JS, have caching, expires heading, using CDN for common elements, smushing and compression all your images, using cache for pages, and not injecting a ton of external content in your pages … and you still need to get one point someplace, it might be worth trying. But, why? Not really going to do much, if you’ve already done everything else. My 3 cents, anyway (2 cents adjusted for inflation). π
Is there a way to add border-radius css property to featured thumbnails, so that thumbs both on homepage (categories, tags) and sidebars looked a bit rounded?
I am using layout like this:
https://scontent-b-fra.xx.fbcdn.net/hphotos-ash4/t31.0-8/10259090_435564046587387_2610082451814695024_o.jpg
Hnm. Weird. No suggestion on that one.
I’m trying to figure out with IE10/11 — some days the 400 weight font of Open Sans won’t load off the CDN, and some days it does. So annoying to suddenly see ALL the text on page in 600 weight.
Always something!
Hi,
I’ve managed to discover that the issue is being caused by a conflict between the latest update to the theme and Cloudflare CDN.
Disabling/pausing Cloudflare optimisation resolves the issue and allows me to navigate through the theme panel. I have informed Cloudflare of the conflict and are awaiting their response.
I have no idea what may be causing the conflict but I do know it isn’t Javascript minification, which was already deactivated prior to installing the latest version of the theme. The problem only started after installing the latest theme version and I have tried reinstalling it more than once.
I have a Dailymotion video that is not being resized correctly. It ends up having black bars on the top and bottom of the video. Is there a way to fix this without manually editing site.js?
Also have you considered using FitVids.js for resizing video embeds rather than custom code? FitVids.js is easy to work with and can be loaded from a CDN. It also supports more services out of the box than what I see in site.js.
@enemyborat
glad all my little rantings are helping somebody π
“fonts and FOUT” Subject is top of mind for me at the moment as I’ve been toying with the difference between loading Open Sans off the Amazon CDN (where was able to compress the stylesheet more than the Google version is, for those who’ve run into that item on GTMetrix for scoring; meaning I basically am loading a minified and optimized version of the Open Sans font stack off the Amazon CDN for better performance/rating), vs just loading from Google directly. I get FOUT on my page right now with the CDN, and sometimes IE won’t load Font Awesome off the CDN at all (even with proper CORS rules) – whole ‘nother topic of pain there. Gave up and am loading Font Awesome 4x off our own server since IE 11 just randomly doesn’t load it and then all my icons are blank spots.
Anyway… “right now” if I go to a test page for site redesign (NOT using WordPress btw), I see moment of “italic” font then regular font. IE will load the italic font first for some reason so I see FOUT from italic to normal font. Stupid stuff (damn IE!!!).
I’m actually hoping to use the Google font CDN, and then the upcoming stable version of mod_pagespeed has a nifty feature where it will inline only the needed CSS for the browser being used.
So, for example this page …
http://www.send2press.com/clients/testimonials_2008-2012.shtml
I see a FOUT in IE11 on Win7/64 with a 32GB RAM machine on a 85mbps FIOS fibre connection. Page loading on dedicated server in Class A datacenter (Softlayer/IBM) with common elements like logo and main CSS coming off the CDN. Blah blah. Meaning, it’s not loading off anything with slow load times.
Starting to just “live with it.” Annoying as hell, though.
(argh)
Browser “should” cache the CSS on second page view. I have my cache in browser set to clear on close so I can re-suffer the view of a first time visitor EVERY time. Hence the annoyance can really annoying. Google “FOUT” to see the couple of years of whining by others, if one cares to. π
This may not be specific to your issue, but FOUT is a common issue with the trade off between fancy fonts and page load/speed.
This is called “flash of unstyled text” (FOUT) and is a common issue with using Google Fonts (etc.), as they are loaded from someplace other than your own site/server. SO, often the page starts to load, uses browser fonts, then the fonts load from external source (e.g., Google CDN). This is somewhat unavoidable if you’re going for maximum “pagespeed” as not everything can load at same time even when async or using the speed booster beta plugin; many times the loader for such fonts is deferred and moved to bottom of page to allow “above the fold” content to load quickly for a better pagspeed rating — such as with Google PageSpeed Insights).
Often something is slowing page down like a plugin, too large image, or similar, and this “holds up” getting to the font loading.
Solutions typically
1) change order of font loading
2) switch to web-safe fonts only
3) if using CSS over-rides on style sheet embedded in page AFTER main style loads, better to edit style sheet if there is measurable delay between the default style loading and the over-ride (meaning if main style is at 48 and your over-ride is 40; then the 48px still loads first, and then gets over-ride – by not doing over ride and editing core file, it starts at 40px to begin with).
FOUT isn’t too terrible, but it can be annoying.
Some of the above may be only informational to your issue, but I’ve been learning to live with this on some of our sites for better speed.
@Radu that worked perfectly with the JS π
However after i upgraded to 3.1 today it seems the addthis css file is back in header. Did you change anything? Have I done everything correctly?
It’s just the css from addthis that wont move now.
<link rel='stylesheet' id='output-css' href='http://creactivateno.wpengine.netdna-cdn.com/wp-content/plugins/addthis/css/output.css?ver=3.8.1' type='text/css' media='all' />
Now I realize i’m using a CDN but I’ve purged the cache multiple times so it shouldn’t be the problem.
<?php
/*
Plugin Name: tagDiv speed booster
Plugin URI: http://tagdiv.com
Description: Speed booster for Newspaper theme
Author: tagDiv
Version: 2.1
Author URI: http://tagdiv.com
*/
class td_speed_booster {
var $load_contact_form_7 = '';
var $load_google_fonts = '';
var $styles_for_footer = array();
function __construct() {
add_action('wp_enqueue_scripts', array($this, 'enqueue_scripts_hook'), 100);
add_action('wp_footer', array($this, 'wp_footer_hook'), 15);
add_action('wp_head', array($this, 'wp_head_hook'), 15);
define('TD_SPEED_BOOSTER' , 'v2.0');
}
function enqueue_scripts_hook() {
$this->move_js_to_footer('bitly-js');
if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"), true, '1.10.2', true);
wp_enqueue_script('jquery');
}
//move styles
$this->move_style_to_footer('output-css');
$this->move_style_to_footer('bbp-default-bbpress'); //bpress old
$this->move_style_to_footer('bbp-default'); //bpress
$this->move_style_to_footer('contact-form-7');
$this->move_style_to_footer('td-bootstrap');
$this->move_style_to_footer('td-theme');
$this->move_style_to_footer('google-font-rest');
$this->move_style_to_footer('woocommerce_frontend_styles');
//bbpress
//remove_action( 'bbp_head', array($BBP_Default, 'head_scripts') );
}
function wp_footer_hook() {
foreach ($this->styles_for_footer as $style_id => $style_src) {
echo "<link rel='stylesheet' id='" . $style_id . "-css' href='" . $style_src . "' type='text/css' media='all' />\n";
}
}
function wp_head_hook() {
echo '<style>body {visibility:hidden;}</style>';
}
function move_style_to_footer($style_id) {
global $wp_styles;
if (!empty($wp_styles->registered[$style_id]) and !empty($wp_styles->registered[$style_id]->src)) {
$this->styles_for_footer[$style_id] = $wp_styles->registered[$style_id]->src;
wp_deregister_style($style_id);
}
}
function move_js_to_footer($js_id) {
global $wp_scripts;
wp_enqueue_script($js_id, ($wp_scripts->registered[$js_id]->src), '', $wp_scripts->registered[$js_id]->ver, true);
}
}
new td_speed_booster();
?>
1-) these posts difference is just in different categories but when i do pagespeed test to these their points are different. why is that?
http://silahgalerisi.com/avlanma-ve-avcilik/avcilik-hakkinda-ansiklopedik-bilgiler/ –> (in this some CSS files are on head MOBILE & DESKTOP)
http://silahgalerisi.com/tabancalar/fn-five-seven-tabanca/ –> (in this some CSS files are on head MOBILE)
i deactivated the cdn it’s not about it.
2-) http://silahgalerisi.com/silah-resimleri in that page i’m using lazyest-gallery but when i add the css ids to speedbooster, they are still on header. so i changed the gallery plugin’s functions.php for use these just on /silah-resimleri page but i want to send css files to footer like other plugins which i done with speedbooster π
Best Regards
@radu
No i don’t use mod_pagespeed, i’m using WP Super Cache with mod_rewrite and the activated CDN option (i’m using maxCDN for cdn) in that plugin.
In addition Thanks for stars π
Hi,
I’ve looked at the site and I think that the booster plugin is not working as expected. The resources seem to come from cdn.your domain .Are you using mod pagespeed or some kind of cdn optimizer?
I will try to test the WPSocialite + speedbooster and if it works well we will update the plugin.
PS. Marius is making the stars now for you now – sorry for the delay.
@Christopher – I agree with you, any social sharing badge that shows the number of likes/tweets etc comes with a cost :). There is one solution – to call the like tweets via api on server (like our social counter does) but like the social counter is very hard to maintain and it will have to make server side requests to the apis periodically for each post… that is not good. It’s almost impossible to deploy such such a thing to a lot of users and hosts combinations but I will experiment a bit with this π .
Radu O.
@adgower
I think the query is for using web-safe fonts which don’t load remotely off Google’s CDN.
Some of us wish to use only web-safe fonts for faster page load, and not having to load “fancy fonts” from Google which can be tricky to optimize for PageSpeed Insights.
This is typically the reason for wanting Arial/Verdana, and/or Georgia, Seghoe UI, Trebuchet, etc.
I’m waiting for 3.01 to install, personally, so don’t have any specific advice on how to customize the fonts to web-safe, although that was on Radu’s confirmed ‘to do’ list.
Hi,
I think a VPS would be overkill unless you are making a living from your blog or intend to host multiple blogs and want “total control” of your environment. Nice to have “room” to try different themes, sites, domains, etc., without having to sign up for a “domain based” account someplace. If you do choose a host, look for one that supports mod_pagespeed and also knows what wordpress is π
For a CDN, likely not needed unless the host is terribly slow (for example, a slow $5/month hosting plan plus $1/month CDN can be cheaper than $10/month plan, in theory).
For us, a CDN is useful as folks in NY or Canada can get stuff loaded faster when we’re in Calif., and servers are in Texas. It does seem to help as the CSS/JS/images all load from closest “edge” location. Again, usually more necessary for a business case than a blog case (my magazine sites don’t make any money really; they’re a bit of a hobby side thing from our main company business which does rely on high “availability” hence the fun I am personally having right now optimizing shtml/ssi pages in one place and WordPress everywhere else … each need different tweaks… ).
Obviously a host with “point of presence” in Norway is best choice. You don’t want to be loading pages from Texas when your audience is in Norway. I have not used BlueHost. We use SoftLayer to have a full server here in U.S., but that’s totally different from what you need.
Thank you @circuitsports. That’s very impressive. I’ll try some of these once i add some more content to my site. I’m sure a site can be nice and fast even without the green numbers…but you know perfectionism…
Thank you again @Christopher for your help on here π
My site is in norwegian and so is my hosting. They are quite cheap but decent enough. But I don’t mind paying more for better hosting.
So a coupple of questions:
- Are there any particular hosting companies you would recommend for better performance?
- I was looking at the Bluehost site. Is the Pro package better in performance than the standard package?
- Is there any point in looking at VPS or Dedicated hosting? Or is it overkill for a singe blog?
- CDN, is there any point getting it when 99% of my readers will come from Norway?
-
This reply was modified 12 years by
creactivate.
Hey!
I chose to use Amazon’s CloudFront since I already have Amazon account and they bill my card on file (I think December was $0.98). CloudFront works well, aside from this pesky issue with Font Awesome 4, which I’m getting same issue from boostrapCDN (free) — sometimes the icons won’t load in IE10/11 or Firefox (both on Windows) for no good reason.
Anywayyyyyy….. in my case I’m using S3+CloudFront since my brother’s company (in the educational software business) uses it, a lot of folks have been testing running WP sites virtually entirely in their cloud (!), and I’ve got a nice app called Cloudberry S3 Explorer which works as both bulk FTP, header settings for expirations, ACL/Public settings, and CloudFront invalidations. So, it was just kind of the best choice. Right now only loading CSS, JS, fonts, static images (logos, little things like BBB bug, etc.). Not yet using for WP.
Upshot … I think folks would likely spend the 30-cents vs free to “test” both for speed.
In my case I did test couple of things against CloudFlare and where I’m at there was couple of msec saved, so seemed worth it to just use Amazon since I know they’re not going to disappear, or get bought by Google and squashed or anything else with other cloud stuff might throw out there. I’m also inherently suspicious of anything “free” as that is no business model, and I need reliable here today, here tomorrow setup for our main business site. So, $1 a month to count on it, vs “free” and might be gone without warning. Was easy choice for me.
Haven’t yet done anything with the WP stuff as waiting for Newspaper “3” if it will have classic WP ‘header.php’ file where I can just point a bunch of the CSS/JS stuff at the CDN without hacking something that will then need re-hacking in 2 weeks.
I also did some research on some articles around and since I don’t need SSL off the cloud (after all I have my own damn server!), this was food for thought:
http://robin.userapp.io/post/66094840975/finding-the-right-cdn-for-our-startup-maxcdn
Varnish does wonders! I can vouch for it as I have it on my server and it truly pays off.
Do you know what the advantage of using a CDN like Amazon over CloudFlare is? I’m only using CloudFlare, and for a free service it’s insane how much it does. Not to mention that if your server goes offline, visitors can still access cached pages.
@Octavian
nice!!
I’ve been sidetracked the past week trying to sort out the random issues with Amazon’s CDN where randomly the font awesome CSS won’t load in IE11 or Firefox on Windows, leaving unstyled elements on our business site; and now the background for one sub-head divider won’t load the background image when using either ../assets/img/filename.gif or the full explicit URL in style sheet. Makes no sense. Went back to loading the FA2 fonts from our own server. Sigh. (This applies to our business site, not the magazine sites; the business site doesn’t use WP for main content, so a bit more flexible; pages are static to begin with so full page caching not needed, obviously.)
As to the WordPress stuff… we’re not using a true “page cache” yet, just the mod_pagespeed caching of page “elements” and not yet using a CDN for the CSS/JS. But this page is not bad; testing a typical article page sans a YouTube video or the AdSense elements but with AddThis in place to see how at least one “pagespeed stumbler” impacts ratings.
http://gtmetrix.com/reports/ga-ga.com/IyjAjIea
GPS: 97 (“A”) / YSLOW 90 (“A”)
Page load time: 1.29s
Total page size: 425KB
Total number of requests: 41
So, 1.29 seconds without page cache or CDN is pretty much not bad as starting point for us, which I could live with before the “next level.”
I’m not yet doing anything further until the new version of the theme drops from Radu’s magic labs.
Apparently for our WP sites, we’ll likely end up using “Varnish” on the server, to manage static pages locally, in front of mod_pagespeed, which peeps tell me is “how it’s done.” That is what is going to get the pages loading in the sub-second range. I may retry the caching plugins for WP to save local copies as I think mod_pagespeed can rewrite the pre-cache or post-cache copy, but still unclear on that. Not sure what Varnish will do to our ecom system or other stuff, so having enough fun with one thing before suffering another.
Great job on the speed!!! π YOWZZA!
-
This reply was modified 12 years by
simchris.
make sure you utilizes the tagDiv speed booster plugin with w3 cache plugin and if possible a CDN solution like cloudflare which bluehost supplies or maxcdn like we use.
these are the results of the three
It couldn’t hurt. Point I was making is that Google is going to filter search results for the best match for a specific topic. On most sites these days there is little unique on the home page relative to a page such as “services” or “pricing” or “our staff” where Google would focus on the page related to that topic. Meaning, you don’t want Google to show your home page for your services, you want them to show your services pages when somebody searches for “Anna’s 1986 Whacky Widgets.” π
Additionally, if you’re not building a newspaper layout, you can build any type of page and the title of the page is an H1, or if using a custom taxonomy simply use H1 tags for your header text which you type into the page itself.
That is a clever use of the H1 tag on Joost’s home page:
<h1 class="site-title" itemprop="name"><meta itemprop="logo" content="http://cdn.yoast.com/wp-content/themes/yoast-theme/images/header/logo_x2.png"/><a itemprop="url" href="http://yoast.com/" title="Yoast">Yoast</a></h1>
I’m still surprised they’re (Joost and co.) are not using white space removal and comment removal to optimize the HTML delivery of their pages, which would enhance page load and caching.
Still, an “option” to put an h1 element on the logo div only for home page as a clickable option, might not be a bad idea!
Hi Radu
the other reason we found the /posts worked better is that it’s the “public facing” page for the G+ account unless somebody is already in your “circles.” (TRY the URL without /posts — Google will do a redirect to /posts !). So, this also helps with on page links or other referential uses from the wp admin > user > user account > social media fields. For whatever reason it’s the method that seemed to work when the author option was first rolled out, so we’ve stuck with it. “Your mileage may vary.”
Dual monitors – not sure this FB photo is publicly reachable, but let’s try shall we:
https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-prn2/954774_10151456063618435_1875947256_n.jpg
-
This reply was modified 12 years by
simchris.
Some our sites generate 2+ million page views per month and have been online 14 years with 230,000 inbound sites for pagerank. We have been managing our own servers since 1996, and ran a hosting company from 1996-2005. We did Oprah Winfrey’s ecom solution for her “Begin with Love” videos a decade ago. Pretty savvy. We are also PCI-DSS certified, and have weathered serious server attacks so have complex security stuff in place. ‘=)
We do use nginx along with Apache 2.2 – for instance phpmyadmin runs on nginx. 32GB of RAM, dedicated 1GB switch at SoftLayer in Texas. Power to burn. Replaced our 2008 server with 12GB RAM and 8 cores. Wild times compared to the days of, say Cobalt RaQ4 (google it).
Still playing with mod_pagespeed stuff as they have lots of cool things like “inline_google_font_css” (Inlines small CSS files used by fonts.googleapis.com into the HTML document.) which I’ve not yet been able to get working. Defer javasceript is another one built-in which is cool.
Stable version from November, edge version from January, and you can’t mix ’em.
Anyway… I’m trying to find the balance of the traditional hacks
1) mods to the wp-config.php
2) mods to functions.php
3) mods to htaccess (Apache)
4) manual optimization of css file if a rewrite system breaks it
5) upload best practice optimized images to begin with; generate smaller thumbs to start with using built-in compression of WordPress vs plugin for initial files; remove duplicate sizes in media setup to match theme size
6) use mod_pagespeed to manage cache (with memcache, eAccelerator, APC, etc.); rewrite on the fly to cache copies with comments removed, delete white space (instant minification!); combine CSS, combine JS, etc.
6) when all that fails to keep a “92” dump the CSS/JS onto the CDN, keep images local.
This is my mission for January. Once done, I’ll have a better sense of what actually works and what is truly a fool’s errand.
BTW: my friends at GTMetrix have a nice plugin for WordPress for testing/tracking pagespeed adventures (recommended!).
MOre later in the pagespeed “forum” here π
I will probably end up doing some kind of ebook for this whole shenanigans.
Chris
-
This reply was modified 12 years by
simchris.
Thanks Christopher. I took a look at mod_pagespeed, but it doesnt look like it could do anything for me at this point. I’m already on a VPS that runs Plesk 11 with nginx as a reverse proxy. I’m letting nginx handle all php scripts and serve static and dynamic content. Gzip compression is enabled and i enabled browser caching through nginx with the expiration set to two weeks. I’m running WP Super Cache as well to create pre cached pages and i use EWWWW Image Optimizer to optimize all images. I also optimazed all theme and plugin images with that plugin. You might want to look it up, imo it really is a better plugin than smush.it and so. I use the simple minify plugin to minify all javascripts and i my pagespeed currently toggles between 85 en 92 for desktop, depending on my server response time and between 70 and 80 for mobile. The only red warning i still get is to defer javascript and css (moste google fonts, and 3 theme css files: bootstrap, style.css and child theme style.css) to below the fold, but i have no experience on how to do that. Im really pleased with the pagespeed right now, but more tips (besides using a CDN) are welcome!
Thanks for you responce anyway π
Hi, Radu!
I’m just glad you figured out a way to do the async ads (remember my post way back in the “coding” category). That is one tricky beast!
By the way … one way to make a quick and easy “web safe fonts” methodology for folks would be to change the default fonts in your main style.css to something like this:
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif
and then by default folks could simply leave fonts as “default” in the theme customizer; -or- switch on the Google fonts if they needed them.
This would be a super simple way for you to answer everybody’s thing about fallback to web-safe fonts without having to recode.
Just use the above in your style vs the Google fonts, and then let people turn “on” the Google fonts to match your demo.
OR: you could provide an alt-stlye.css using above replacement, and then tell folks in docs to rename to style.css to use web safe fonts.
Just an idea π (I was playing around with that).
Of course, this doesn’t solve the load of the fonts in the functions.php file by default, but a savvy person could strip that out if they knew they only wanted to use web fonts.
I could post a how-to on this ‘hack’ but I’m going to presume at some point it would be better to have the Google fonts be optional “all off” and “don’t load in header the pulls to Google CDN” vs doing hacks.
Thinking out loud. π
were using w3 cache / div tag speed boost and MaxCDN – 685ms load time is the result
http://postimg.org/image/pl24nqilb/
fix image sizes etc with pixlr.com – save to 80% or lossless / lossy with kraken.io and stay away from facebook plugins that load faces.
Our next step https://www.cloudflare.com/railgun
and not to brag but 98/100 mobile and 98/100 desktop
http://developers.google.com/speed/pagespeed/insights/?url=twoversion.com
-
This reply was modified 12 years by
circuitsports.
my double logo is when i have CDN turned on π