Since the release of the free Google PageSpeed Insights Tool I’ve spent a LOT of time trying to get this website to rank as close to 100/100 via the WordPress SEO Package I develop and currently (September 2014) stuck at: Mobile 77/100 User Experience 99/100 Desktop 91/100 See the Live PageSpeed Insights Results. These are very good PageSpeed Insights results and going to be hard to improve, not because I can’t get better results, but I can’t get better results without turning important website features off. I could get to something like these results: Mobile 96/100 User Experience 100/100 Desktop 98/100 By turning a few website features off (would take two minutes to achieve) including the Facebook and Google+ social […]
Continue Reading PageSpeed Insights Tool
Google Speed Optimization
Hello David,
I’ve been using your theme for quite a long time.
Despite good other features, however, I found that Google Speed service gives 84/100 for my newly installed website and 76/100 to your site (for desktop version, mobile version is even worse).
What about to optimize the theme to comply with modern speed requirements for websites?
Do you have that in plans? If so, how long will it take to implement (just roughly)?
Google Speed Optimization
Performance WordPress Themes
Stallion WordPress SEO 7.1.1 (theme you are running) does not include mobile responsive or Google speed performance features. Even so the results are better than a lot of websites running WordPress: I coded Stallion v7 for speed, but not specifically to pass performance tests so missed some issues.
The next version of Stallion that was released early 2014 does include mobile responsive and Google speed performance SEO features, see Stallion Responsive Theme.
Stallion Responsive though built on from the Stallion WordPress SEO v7 framework is a new theme (so many code changes had to be a new theme) and gives significantly better Google PageSpeed Insights results over Stallion WordPress SEO v7, for my sites tending around 90/100 for Desktop and slightly less for mobile results.
BTW I’m in the process of moving the old Stallion theme support site to Stallion Theme Support, so by the end of this month (June 2104) the old site (including this post and comment) will be pretty much gone (think I might leave the home page only as a sales page).
Check the Google PageSpeed Insights results for the new site that runs Stallion responsive, you will note almost all the pagespeed issues are off site related to AdSense ads and Facebook like buttons etc… which other than not using AdSense or social media buttons there’s not a lot a webmaster can do to improve.
With AdSense and Facebook buttons on the desktop result is 91/100 for Desktop.
With AdSense and Facebook buttons off the desktop result is 95/100 for Desktop.
If you can find a WordPress theme with AdSense ads and social media buttons running on the site with significantly better Google PageSpeed Insights results I’d like to see it so I can see what they are doing to improve Stallion Responsive further.
I’m afraid website features use resources, all we can do is try to mitigate most of the bad issues. For example a site with comments running avatars from Gravatar.com will take a big hit from the way Gravatar.com sets up it’s avatar images, Stallion Responsive includes a Gravatar Cache feature to remove the issue completely.
The WordPress Features Image Slider and the Photo Navigation Menu built into Stallion (v7 and v8) use javascript which has an impact of pagespeed, if you want those flashy features it has a cost in performance, I’ve tried to mitigate the issues best I can in Stallion Responsive, but can’t completely remove them.
Even the new responsive navigation menu built into Stallion Responsive has a performance hit, it uses Jquery to load the mobile device version of the menu. If I want a navigation menu that resizes on smaller screens I need to use the Stallion Responsive navigation menu, I can completely disable it, but then I won’t have a nav menu below the header area.
Another performance issue: Stallion Responsive in combination with an image optimization plugin** resizes images so they don’t list images as an issue in Google Performance Insights results, but it doesn’t work completely with png images use as Stallion featured thumbnails: those used by the widgets (not sure why). My choice is don’t use png images as Stallion featured thumbnails or take the performance hit.
** Not suggesting Stallion Responsive alone will deal with all pagespeed issues, WordPress doesn’t optimize images at upload, WordPress doesn’t cache HTML pages or minify HTML/CSS/JS as a matter of course. I use EWWW Image Optimizer plugin for image optimization and W3C Total cache plugin for caching. Without those two plugins my pagespeed results would be lower.
WordPress/Stallion Responsive/WordPress Plugins have little impact on a cheap host, if you are using a low quality cheap host the server response time might be dragging your results down.
David Law
Performance WordPress Themes
WordPress Responsive Theme Update
So, how to move to Stallion 8.x version? There is no update notifiacation comes up in wordpress admin for 7.x version..
Stallion Responsive Theme
The new theme isn’t an update, Stallion Responsive v8 is a new theme package under the Stallion brand and is sold separately to Stallion WordPress SEO v7. Like Windows 8 isn’t an update to Windows 7, separate products under the Microsoft Windows brand.
You can test (there’s a full demo version) and/or buy the new theme at Stallion Responsive Theme.
David
Stallion Responsive Theme
Stallion Responsive Theme Example Websites
Could you please give a link for some example websites on Stallion Responsive Theme?
Stallion Responsive Theme Examples
Best Stallion Responsive example is the new Stallion Responsive Theme WebSite
I tend to use the same setup on my sites and no longer adding features to sites to show as examples.
Couple more sites:
Skinny Me
You want to see what Stallion Responsive looks like etc… easiest way is install it, there’s way too many features to show via a few websites. It’s got a full demo version, no limitations on testing options pages like there was with Stallion WordPress SEO. Install the parent Stallion responsive theme and the Stallion Responsive child theme and test out the features prior to buying an ID. Don’t like the new theme, switch back to your current theme.
Do have a some test sites for testing features during development at:
Use them for making new WordPress colour schemes, so at anytime might look a mess as do a lot of Stallion testing during development.
David
Stallion Responsive Theme Examples
How to Eliminate render-blocking JavaScript and CSS in above-the-fold content
Hi David,
I’m sorry for sending so many comments with questions. If prefer delete the comments and send an email.
I’m checking the site with PageSpeed Insights
———————————————
and I wonder how could I fix the messages below?
——
Mobile
——
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 4 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:
# http://www.vivirencanada.com/…allion-responsive/colors/layout-210r.css
# http://www.vivirencanada.com/…sive-child/colors/style-white-n-blue.css
# http://www.vivirencanada.com/…es/stallion-responsive/colors/mobile.css
# http://www.vivirencanada.com/…ontent/plugins/pagenavi/pagenavi-css.css
——–
Desktop
——–
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 2 blocking script resources and 4 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Use asynchronous versions of the following scripts:
# http://pagead2.googlesyndication.com/pagead/show_ads.js
# http://pagead2.googlesyndication.com/pagead/show_ads.js
Optimize CSS Delivery of the following:
# http://www.vivirencanada.com/…allion-responsive/colors/layout-210r.css
# http://www.vivirencanada.com/…sive-child/colors/style-white-n-blue.css
# http://www.vivirencanada.com/…es/stallion-responsive/colors/mobile.css
# http://www.vivirencanada.com/…ontent/plugins/pagenavi/pagenavi-css.css
Thanks
Héctor
How to Eliminate render-blocking JavaScript and CSS in above-the-fold content
Eliminate Render-Blocking JavaScript and CSS in Above-The-Fold Content
You can’t remove all Google PageSpeed Insights issues, some are off page (AdSense ads, like buttons…) others are part of running a website. For example to completely remove the render blocking issues you have to go completely inline CSS and JS which is not a good idea, best we can get to is one render blocking CSS file.
You can remove some of the issues though and most are already dealt with via Stallion Responsive. We can reduce the number of “Eliminate render-blocking JavaScript and CSS in above-the-fold content” warnings to 1 each (one CSS and one JS) by using a minify plugin: you’ll want one that combines multiple CSS files and multiple JS files into one and minifies them.
I use the W3 Total Cache plugin because it can also set some server settings that are better for performance via your sites .htaccess file automatically: these could be added manually, but since I’m using the minify part (and the page caching parts) of W3 Total Cache why reinvent the wheel.
Below are the settings I use with W3 Total Cache, create a file called w3-import.php and add this to it (if this doesn’t come through correctly I’ll put a txt file up later for download) this is for w3 total Cache version 0.9.4, no idea what happens if you use this with older versions.
There’s nothing special W3 Total Cache setup, should work for most Stallion Responsive users and probably most WordPress users.
To import the w3-import.php file settings after activating W3 Total Cache go to
“Performance” >> “General Settings”
And use the “Import configuration:” settings to import your w3-import.php file.
The options in the file are pretty much what I use on this website, I’ve activated the plugins Google Page Speed Report which requires a Google API, but doesn’t give any useful information, the results at Google Page Speed Insights Tool http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fstallion-theme.co.uk%2F are more detailed, so not using the plugins Google Page Speed Report on any other site.
The options file will
Caches your websites webpages
Minify and combine CSS and JS files
Adds pretty much all server side .htaccess rules to improve performance you could ever need
Sets the WordPress specific setting “Enable compatibility mode”
Doesn’t use the database cache settings or the object cache settings, when I’ve tested these it’s had mixed results.
This works with Stallion Responsive with no additional plugins active.
Some plugins add their own CSS and JS files, depending on what’s in those files may mean changing some options under the Minify options page. Impossible to say until you try it, some plugins works well with these settings, others not so well. More plugins you have that add CSS and JS files more likely it will break.
What the above will achieve is all but two Stallion Responsive Google PageSpeed Render blocking Issues will be gone.
You will now have one render blocking CSS file and one render blocking JS file**
** You might not have the render blocking JS file from Stallion, depends on what Stallion options you use. If you don’t use the Stallion Featured Slider then Stallion Responsive adds no render blocking JS files (removed the need for JS files in Stallion Responsive 8.1 other than for the optional slider feature). As you can see on my Google PageSpeed Insights results I only have one render blocking CSS file.
The W3 total Cache plugin options above will also fix other Google PageSpeed Insights issues if your server hasn’t already fixed them. Depends on the server, some hosts will have some of this stuff built in, others won’t.
The “Use asynchronous versions of the following scripts” which are related to using the default legacy AdSense code (not asynchronous) can be fixed by creating 3 Responsive AdSense Beta Ad Units (those are asynchronous) under your AdSense account and add them to the Stallion Responsive AdSense options page. See the AdSense Responsive Ad Unit Beta tutorial for detailed instructions.
Note: Any Google PageSpeed Issues that refer to resources not on your domain are out of our control. For example if you add FaceBook Like buttons and Google Analytics code it will result in issues. Beyond not using those features, nothing we can do about them. If I ever find ways around these off site issues I’ll add them to Stallion, like the Google AdSense Beta Responsive Code fix.
David
Eliminate Render-Blocking JavaScript and CSS in Above-The-Fold Content
Render-blocking CSS in above-the-fold content
Hi David,
I used your settings to create a new w3-import.php and it went from 77 to 85.
just f.y.i
I forgot to mention that only one render-blocking JavaScript and CSS in above-the-fold content type of message, due to the cached CSS and JS file.
I think I’ll leave it like that for now.
Thanks
Hector
Render Blocking Above the Fold Content
With Stallion Responsive and W3 Total Cache you are left with one render blocking CSS file and if using the Stallion Responsive Featured slider one render blocking JS file in the above the fold content (within the head of the page). I recommend not using the Stallion featured slider or any slider plugins that use Jquery UNLESS you are also forced to use Jquery for another feature.
There’s LOADS of WordPress plugins that use Jquery (which tends to be render blocking), if you need a feature that uses Jquery anyway you don’t loose much adding another feature like a slider plugin that also uses Jquery: as long as all the plugins/features are coded correctly Jquery will only be loaded once.
That’s the best I’ve got to performance wise on render blocking CSS/JS files, one render blocking CSS file.
Since Stallion Responsive by default doesn’t add any render blocking JS files (removed their need in v8.1) not going to discuss JS issues further. If you use a slider plugin it means you’ll have render blocking JS files(s). Solution: don’t use slider plugins.
There’s a point where aiming for perfection from a tool like the Google PageSpeed Insights Tool starts to cause harm in other areas. The only way to remove the render blocking CSS file warning is for me to make it so Stallion Responsive also outputs all important CSS rules inline as well, so Stallion loads important CSS rules inline (before the main content is loaded) and the main CSS file rules can be loaded via the CSS file in the footer for example.
This would mean loading a lot of the CSS rules twice. Once inline and once in the main CSS files: loading something twice to improve performance from a performance perspective doesn’t make sense.
I’ve looked into doing this, but IMO the performance benefits of loading one CSS file after the main content by also adding the CSS rules inline compared to only loading the CSS rules once but having them render blocking isn’t worth it.
For those who don’t understand what render blocking means.
The CSS file created by Stallion Responsive/W3 Total Cache is render blocking because it’s important and required to generate the sites layout, colour scheme and mobile responsive rules BEFORE the main content loads.
Basically to render (show) the main content the CSS rules have to load first. If for some reason your browser can’t access the CSS file quickly it won’t continue to render (show) the main content until the CSS file is fully loaded (so rendering is blocked, not good for users).
We could load the CSS file in the footer (after all the content is loaded), BUT this would mean the layout, colours and mobile responsive rules would temporarily not work until the entire page was loaded! That would be a case of load the main content then load the CSS rules to determine what the content looks like.
I’m sure you’ve loaded webpages where as more elements load the output changes and you find the content you are trying to read is moving around (really annoying). So this isn’t good for users.
There are elements you want to load either after the main content (defer loading) or at the same time (asynchronous). For example AdSense ads, you’ll want those to be given lower priority than main content, so Google AdSense has supplied ad code that’s asynchronous. On the other hand if you’ve used Chitika ads they aren’t asynchronous, but should be!
I’m open to improving Stallion Responsive further, but on render blocking think I’ve maxed out beyond going 100% inline CSS: load all CSS rules inline and don’t load any CSS files. Would work, but extreme.
David
Render Blocking Above the Fold Content
Asynchronous AdSense Ad Units
To squeeze a little more Google PageSpeed Insights performance points out of your site follow the Google AdSense Responsive Ad Unit Beta instructions.
The Stallion Responsive default AdSense ads aren’t asynchronous. Unfortunately no way to use the simple add your PUB-####### number AND use the new AdSense responsive beta code.
You have to create three AdSense responsive ad units under your AdSense account to use with Stallion Responsive. Good news is if you have lots of sites you can use the same AdSense responsive ad unit code on them all.
David
Asynchronous AdSense Ad Units
W3 Total Cache CDN?
Hi David,
Awesome ! went from 87 to 90 on google page speed.
The yahoo yslow still seems a bit off at 77
a whole bunch of social media related javscript files in the defer parsing of javascript are causing to slow and also suggested to leverage browser caching for the same social media scripts.
Thinking to use amazon s3 for cdn
What are your thoughts on using a cdn?
Blessings!
Carl :-)
W3 Total Cache CDN?
Using a CDN with WordPress
Yes a CDN can help, I’ve avoided using a CDN because they can be a pain to setup and requires Stallion Responsive users to use something that’s quiet technical to get working.
You’ve installed W3 Total Cache and used my import settings, without the import settings file you would have spent hours tinkering with the caching options. Expecting a user to install a caching plugin and provide an import file is complicated, but not excessively so.
Expecting a user to install a CDN which many you have to pay for is excessive. Using a sub-domain CDN is something I’ve considered since it means not having to pay for a CDN and you will have control over the content (still under your domain- cdn.stallion-theme.co.uk sort of thing).
So far I’ve been developing the Stallion Responsive package to not require a CDN for very good results.
Run my homepage through http://www.webpagetest.org/ and my results are very good:
Most of the issues under “Leverage browser caching of static assets: 77/100” are related to off site resources (social networks again) we have no control over. The ones on my site I’m looking for solutions. I know why these are an issue (new feature added to Stallion Responsive 8.1) and will try to find a solution:
W3 Total Cache in theory has a way to set the cache time for dynamic URLs, but means turning an important option off. Swings and roundabouts.
Not sure why I get this one, it should have an expire time.
The CDN results “Use a CDN for all static assets: 34/100” are where a CDN would help.
These I could definitely put on a CDN.
But most of the others from this site I wouldn’t want to add to a CDN, especially not one off site. I don’t want my images taken offsite, this will have a negative impact on Google image search, my content will be loading images from another domain.
That would be OK with the social media button images above (they are social profile link images and have no SEO value), but I wouldn’t want this image https://stallion-theme.co.uk/wp-content/uploads/wordpress-seo-themes.jpg on another domain. Would be OK on a sub-domain, for example cdn.stallion-theme.co.uk/wp-content/uploads/wordpress-seo-themes.jpg hence considering a sub-domain CDN option.
Note that with a CDN it’s for static resources like images and scripts (CSS and JS files), all it does is add the resource to another domain (sub-domain is another domain) which means browsers (and Google) can load the resources faster (in theory) by using more connections at the same time.
Regarding your social network issues.
A slower Google PageSpeed Insights Tool results is the price you pay for having social media like and share buttons on your site.
So far not found a consistent way to remove them, could possibly load some in an iFrame, but not all which would make it messy. Current solution is only use the important social networks. If your content is unlikely to be shared on Reddit, don’t add Reddit.
Because social network like buttons require the social networks javascript files etc… which are not hosted on your website, we have no control over browser caching etc… So any Google PageSpeed Insights issues related to off site resources are out of our hands. We can’t force Facebook to increase the caching time of a script they use :-)
David
Using a CDN with WordPress
Fix Google Page Speed Insights Suggestions?
I am not a webmaster but an familiar with how to install themes and work with widgets and media etc. I have a couple of questions as follows.
1. – By installing the Stallion Responsive theme on my site; does this automatically take care of any issues the Google Page Speed Insights tool found on my site?
2. – Are my images automatically compressed to the correct size to allow for mobile viewing?
3. – What about leveraging browser cashing – is this automatically taken care of via the settings?
Thanks for such a great theme.
Susanne
Fix Google Page Speed Insights Suggestions?
Google PageSpeed Insights Performance SEO Issues
Good questions.
The Stallion Responsive SEO Package removes a lot of the Google PageSpeed Insights performance issues by default, but it doesn’t remove them all.
After installing the package there’s information about performance SEO under “Stallion Theme” >> “Performance SEO” including recommendations.
Stallion Responsive doesn’t do it all alone.
When I add features to Stallion Responsive I first check there isn’t a good solution already, to date 99 out of 100 times there hasn’t been which is why the package runs with so few additional recommended plugins. Basically I look for a solution, if I find one that’s close to what I want I adapt it and add it to the package (do this a LOT, almost the norm). If I don’t find a close solution I build one from scratch.
If there is a solution that works exactly how I want it I’ll check if it’s well supported, if it’s a plugin that’s not maintained I’ll add it to the SEO package (saves me and others time installing plugins that won’t be updated frequently).
If a solution works and is well supported (like W3 Total Cache) I’ll use it as is (won’t add it to Stallion Responsive) and recommend others do the same.
W3 Total Cache is the best example of this, it’s a feature rich plugin that is really well built, well supported, doesn’t need any modifications to work with Stallion Responsive. Wouldn’t make sense to add it to Stallion or build the same features again from scratch, makes sense to keep it separate so when the W3 Total Cache plugin is updated I and other users can rely on the W3 Total Cache plugin developers expertise tracking down bug fixes etc…
Plugins used on this site:
W3 Total Cache – caching (important for performance)
EWWW Image Optimizer – optimizing images (important for performance)
Broken Link Checker – find broken links, I activate this once a month, fix broken links, turn off (important for SEO).
Subscribe to Comments Reloaded – informing commenters of new comments (nothing to do with SEO or performance)
The first three have performance and or SEO features, the first two are important for performance SEO I recommend using them. The subscribe to comments plugin is if you want a way for commenters to be informed of new comments, it’s got no performance/SEO value (just a nice feature to have).
Everything else is dealt with by Stallion Responsive including comment SPAM, general SEO, everything…
After writing the above it’s quite sad I’ve only found three plugins with SEO features that don’t need modification to work as I want them to work.
With the right Stallion Responsive settings and installing W3 Total Cache and EWWW Image Optimizer (or another plugin that optimizes images) you can remove the vast majority of Google PageSpeed Insights issues.
My sites results : http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fstallion-theme.co.uk%2F
As I’ve discussed within other comments on the site it’s impractical to remove all issues, with my results I can’t solve these issues:
These are all Google resources, the last one is the Google Analytics script which has a 2 hour expire header. Only two ways to fix this.
Don’t use Google Analytics : I want Google Analytics data collected, not an option for this site.
Host the analytics.js file on my server and set the header to expire in 7+ days. This will work, but it means setting up a cron job to regularly download the analytics.js file to my server and if Google Analytics changes the analytics.js file there will be a period where I’m running the wrong file. With their 2 hour expire header it would be no more than 2 hours, if I uploaded a copy to my site and set to 7 days I could be running the wrong file for 7 days.
Maybe we could live with this (I don’t think the file is updated very often), but…
This is also a false economy, there are so many websites running the analytics.js file odds are most of my visitors already have it cached in their browser when they visit here. If I host a local copy they HAVE to download it again, that slows how quickly they access the rest of the resources my site uses. Basically by removing the leverage browser caching issue we’ve inadvertently forced users to use more bandwidth to access our sites: in theory faster, in practice slower!
This argument is also true for the other 3 Google js files, loads of websites use them, so most of the time my visitors aren’t having to redownload them again to access them when viewing this site, it’s in their browser cache. So removing those “Leverage browser caching” issues would give my site a higher Google PageSpeed Insights score, BUT at the cost of actually slowing down the actual speed a webpage loads here.
I had this same issue with avatars from Gravatar.com, every comment image (like the Stallion horse image) is hosted at gravatar.com. They have their expire time set to 5 minutes, this is way too frequent. See gravatar cache for more details.
Means if you visit a page on my site with comments for the first time ever all the avatars have to be download from Gravatar.com and cached on your PC. OK, we expect this, everything has to be downloaded at least once to be cached by a browser.
Stay on my site for under 5 minutes and your browser will keep loading the cached copies, but stay here for 6 minutes or revisit at a later date and all the avatars are downloaded again. That happens every 5 minutes!!!
Avatars don’t change that often and they aren’t critical, they should be set to expire at least 7 days: does it really matter if an avatar image is out of date a few days?
Since I don’t have control over gravatar.com I’ve added a feature to Stallion Responsive to create a Gravatar cache on the server (by default Stallion sets it to update every 7 days, it’s on the Performance SEO options page) and this means we can set the expire headers as well (for me W3 Total Cache Sets them).
This means for the next 7 days the avatar images you see will be the ones hosted on my domain and since their headers expire frequency is set by W3 total Cache they are also set to at least 7 days.
This is good for performance, visitors on highly commented posts don’t have to redownload the avatar every 5 minutes!
Also because they are on my server plugins like EWWW Image Optimizer can optimize them as well (they are images).
There is one performance issue with images I want to find a solution to related to mobile responsive performance and images. If you view a webpage on this site in a mobile phone say you will see all the images resize, they are responsive (this is the default, so yes to question 2 with regards what visitors see :-)).
If you check the same page (my home page for example) in Google PageSpeed Insights and check the Mobile Speed results you’ll find Optimize Images issues like this one:
This suggests the image hasn’t been optimized, but it is.
This is a relatively new Google PageSpeed Insights issue. The tool used to look at the image per se, is the actual image optimized.
Check the Desktop Speed results and the image above isn’t listed (no images are listed) showing it’s been optimized (by EWWW Image Optimizer).
Google recently changed how it decides if an image is optimized to include if it’s been scaled, now if an image has been scaled it’s considered not optimized.
To make all the images mobile responsive I scaled them using CSS specific for each mobile device size, images never take up more space than the devices screen width.
This image https://stallion-theme.co.uk/wp-content/uploads/wordpress-seo-themes.jpg is 300px x 200px in size on a Desktop PC, but load it in a small mobile device and it has to scale down to fit. In a mobile device with a screen size of 320px the image scales from 300px x 200px (scaled to 122px x 82px).
What the new Google PageSpeed Insights Tool algorithm is saying is this image isn’t optimized because it’s scaled, what it wants is a separate image with actual dimension 122px x 82px to be considered fully optimized. This makes sense, ideally the image would be the exact size used, but it’s easier said then done! Stallion is responsive at 12 device widths, which means in theory we need up to 12 image widths to cover all device widths (in practice would be more like 8 images).
That’s going to be a fun challenge to dynamically generate different image sizes for different device sizes that work with no input from users taking into account different starting points for the image sizes!!! Right now not even sure it’s possible and it’s going to result in a lot of extra disk space being used to store the ~8 additional more responsive images per image!
David
Google PageSpeed Insights Performance SEO Issues
google pagespeed low results
Dear David,
after initial settings of my blog I checked it with Google PageSpeed.
I was very upset with those results:
https://developers.google.com/speed/pagespeed/insights/?url=pivometer.com&tab=mobile
I have 68/100 for mobile, while your site stallion-theme.co.uk has 88/100!
Why do I have such a difference? These 2 sites have the same theme and I don’t have a lot of plugins. Namely, just 2 – nextgen images and wp smash.it. But even without them the outcome was the same :(
google pagespeed low results
Page Speed Insights Tool
If you look through the comments above yours I’ve described some of the Page Speed Insights issues you have in detail.
Let’s go through a few of your Google Page Speed Insights Tool Results Issues.
My results
Your page has 1 blocking CSS resources. This causes a delay in rendering your page.
So I have 1 render blocking issue, you have 12.
Those 11 additional render blocking issues will be pulling your Page Speed down (most likely the biggest issue you have), your visitors have to download all 12 JS and CSS files BEFORE the main content will load (that’s what render blocking means). Fixing this Page Speed Insights Tool Issue should be very high priority.
Remove render-blocking JavaScript:
/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/ajax/static/ajax.js?ver=4.0
/wp-includes/js/jquery/jquery.js?ver=1.11.1
/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1
/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/ajax/static/persist.js?ver=4.0
/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/ajax/static/store.js?ver=4.0
/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/ajax/static/ngg_store.js?ver=4.0
/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/lightbox_context.js?ver=4.0
Do you notice anything about these issues? Five are part of one of the plugins you use which you think shouldn’t result in your Page Speed issues, I’m afraid it’s Nextgen Gallery plugin that’s causing most PageSpeed Insights Tool Issues. The other two Jquery issues are also because you use NextGen Gallery plugin (that plugin uses Jquery, Stallion Responsive by default doesn’t).
So all the above are caused by NextGen Gallery plugin.
Optimize CSS Delivery of the following:
/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/nextgen_gallery_display/static/nextgen_gallery_related_images.css?ver=4.0
/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/fancybox/jquery.fancybox-1.3.4.css?ver=4.0
/wp-content/themes/stallion-responsive/colors/layout-310l.css?ver=8.1
/wp-content/themes/stallion-responsive/colors/style-light-rc.css?ver=8.1
/wp-content/themes/stallion-responsive/colors/mobile.css?ver=8.1
Another two render-blocking issues for the NextGen Gallery plugin. Because you use the Nextgen plugin you have 9 render-blocking js/CSS files!
If you have disabled the plugin and rerun the Google Page Speed Insights test be aware the results are cached. Try running the test on another webpage of your site or wait for the cache to clear.
I’m afraid if you want the flashy image features that Nextgen offer, you’ll take a page speed hit.
There’s three render-blocking CSS files that’s part of Stallion Responsive, this can be reduced to one (can’t get below one) by using a plugin that combines and minifies CSS files. I use and recommend the W3 Total Cache plugin (it’s better SEO wise than WP Super Cache which you currently use), see other comments for settings to combine and minify these three files into one CSS file. You might be able to combine your NexGen plugin CSS files as well, you’ll need to test.
Can say you’ll probably have issues with combine and minify all those JS files (minifying js tends to be problematic, you might be able to combine them, unlikely to minify).
IF you can combine all the CSS files into one and all the JS files into one using the W3 Total Cache plugin you’ll be left with 2 render-blocking issues. Want to reduce it to one, disable the NextGen plugin.
/wp-includes/js/jquery/jquery.js?ver=1.11.1
/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/ajax/static/persist.js?ver=4.0
/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/fancybox/jquery.fancybox-1.3.4.pack.js?ver=4.0
/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/fancybox/jquery.easing-1.3.pack.js?ver=4.0
/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1
/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/ajax/static/store.js?ver=4.0
/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/nextgen_gallery_display/static/common.js?ver=4.0
/wp-content/themes/stallion-responsive/js/links.js?ver=4.0
/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/lightbox_context.js?ver=4.0
These are caused by a server setting. You might be able to fix these with the W3 Total Cache plugin, if not it’s a server setting to enable and setup Gzip or Deflate module correctly under your hosting account: can’t help you with this beyond advice what you are trying to achieve and possible issues.
Note there’s nothing wrong with the above files, this is a case of your server hasn’t compressed them. The fact they are all js files suggests you are lacking the right server rule for js files, I had the same issue even though W3 Total Cache has added the right rules into my .htaccess file (I don’t know why it didn’t work for me, might work for you) and had to add this to my servers httpd.conf file.
You’d only need to go to your servers httpd.conf file if the W3 Total Cache .htaccess rules don’t work.
Since mod_deflate is working for other resources (CSS files etc…) suggests you are only missing the javascript rules from the above. You won’t need all the above, in your servers httpd.conf file you’ll find a set of rules like those above, you need to find these rules and make sure it includes:
and
I bet it’s the last one you are missing.
What these rules do is tell the Apache mod_deflate module which types of files to compress, W3 Total Cache adds something similar to the .htaccess file rules which worked for me other than some js files. This is what W3 Total Cache adds to your .htaccess file:
application/javascript and text/javascript are both there, so should have worked.
Anyway, went off on a slight tangent there :-)
/wp-content/themes/stallion-responsive-child/headers/c1.jpg
/wp-content/themes/stallion-responsive/colors/images/light/mobile.png
http://pagead2.googlesyndication.com/pagead/osd.js
http://pagead2.googlesyndication.com/pagead/show_ads.js
The first two issues are on your site, the other two are not on your site, so you have no control over them.
Leverage browser caching is another server setting. What you have here is it looks like images don’t have an expire date set,
W3 Total Cache should be able to set these. Been a while since I used WP Super Cache, but felt sure it could set expire headers, maybe you have turned an option of. WP Super Cache is a good performance plugin, W3 Total Cache is a really good performance plugin, it’s one of the few WordPress plugins I consider a must use WordPress SEO plugin.
If W3 Total Cache plugin didn’t exist I’d have to find/build multiple performance features to add to Stallion, can not overstate how important using W3 Total Cache is to gaining full WordPress SEO performance.
Going to skip Minify JavaScript, W3 Total Cache might be able to minify your JS files (minifying can break js files, ideally the plugin developer would minify their JS before release), again it’s NextGen Gallery plugin js files, tells you the developers haven’t minified their JS files, had Nextgen minified before release you wouldn’t have the Page Speed issue to fix.
You have one image that’s not optimized c1.jpg. That’s your custom header image, you can either use a plugin like EWWW Image Optimizer plugin and run it so it checks all your sites images, or optimize c1.jpg on your PC and upload again via FTP.
That’s pretty much all your Page Speed Insight issues. You can see most of them are the Nextgen Gallery plugin and a few server settings. If you turn off Nextgen and fix the server settings your Page Speed Insights results will be better than mine because you aren’t taking a hit with social media like buttons and Google Analytics.
Also see my comment about Using Asynchronous AdSense Ad Code, the default Stallion AdSense code can be improved upon.
David
Page Speed Insights Tool
Eliminate render-blocking JavaScript and CSS in above-the-fold content
hi bro
Eliminate render-blocking JavaScript and CSS in above-the-fold content
….com/wp-content/cache/minify/000000/jctBCoAwDAXRC1miKy_gPaTEiIGalP5a8PYuxK5dPpiZiN1q5Bp2L2eYSY3TtQmIAUK9k2AYadGmrz5IjiaJcHip7H3o_NutRZDdoE0e.css
….fonts.googleapis.com/css?family=Droid+Sans:400,700&subset=latin
Please solve me this problem that i face to achieve page insights
I have 85/100 but i want 100/100
I am using the w3 total cache to resolve the problem
But fail to resolve
Thanks
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Eliminate Render-Blocking Google Fonts
Looks like your WordPress theme uses a Google font, since the font is hosted off your server W3 Total Cache can’t combine and minify it with your other css file(s).
Solution, modify the theme to not use Google fonts or change themes (Stallion Responsive hint, hint).
It’s why I’ve avoided adding Google fonts to the Stallion Responsive Theme, means you have to have 2 render blocking CSS files, the one combined/minified by W3 Total Cache and the Google font CSS file.
BTW unless you add your CSS rules inline you can’t have 100/100 PageSpeed Insights results, you will always have one render blocking css file that has to load before the main content etc… loads. In theory it’s easy to get rid of the last render blocking warning by pushing the css file to load in the footer, BUT by doing so your websites content loads with no formatting/colour/fonts etc… This results in an ugly looking site temporarily as the site loads with no styling (there’s a name for it, but forget what it’s called).
Hmm, I guess you could load the Google font in the footer, basically modify your theme (research wp_enqueue_script()) to load the Google font last. The Google font probably isn’t important styling wise, so could be loaded last which won’t be render blocking.
David
Eliminate Render-Blocking Google Fonts