@Thor,Thanks
HTML5 Boilerplate added things to ur .htaccess to make ur site and mobile devices fast and works great..
I’ve bought a plugin that called “WP Social SEO Pro” that have the opition to used HTML5 Boilerplate there is no coding etc to used it just turn it on and let it do it’s job and all you do is enjoy the results..
The plugin that i bought that is super powerfull as well that have the HTML5 Boilerplate is here >>> http://wpsocial.com/product/wp-social-seo-booster-pro/
Some of HTML5 boilerplate is built in to both Bootstrap and the theme, as far as I know.
HTML5 boilerplate is nothing new, and in fact is one of the inspirations for the htaccess optimizations found in this stick topic that I’ve been posting the past six months for all. Except my verison cuts out all the commenting not needed, and which ironically slow down the htacess file wit bloat.
All roads often lead to same solutions, so thanks for sharing that info for those who are new to HTML and customizing WP. 🙂
(HINT: you can use my htaccess modifications without having to pay for, or use, a plugin.)
Just to check in..
According to google pagespeed now:
on mobile 83
desktop 93
Just by reading this thread and following the advice here.
Thank all !
@thor
glad we could all help ! 🙂
Estou com o problema “eliminate render-blocking javascript and css in above-the-fold content”. Não sei mais o que fazer, teria alguma dica para isso?
Pra quem quiser ver: http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.techtube.com.br&tab=mobile.
Desculpe pelo meu inglês.
I’m the problem “Eliminate render-blocking javascript and css in above-the-fold content”. I do not know what else to do, would have any tips for that?
For those who want to see: http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.techtube.com.br&tab=mobile.
Sorry for my english.
@Lukao350
Hi, it’s almost impossible to fully remove all render blocking — most websites need to have some CSS load before the page … otherwise you get a flash of unstyled text – where page starts to load but is messed up, then the CSS loads and corrects – ugly.
So, with full optimization, you typically you will end up with one main CSS file, and one main JS file, as well as the other render blocking stuff will be external files (e.g., fonts from Google) that don’t load in “async” mode. The TagDiv Speed Booster plugin helps a bit – have you tried that yet ?
Thanks for the reply, Christopher.
Yes, I have the plugin installed (with the update that came out today). But I am still having this problem.
I see in the demo does not have this problem, and in some cases here, is very small.
Should I combine the scripts?
Hello!
This thread is very very large. A lot of beginners (including me), won’t be able to follow this as there is loads of suggestion of code and fix. It would be really great if someone (@ChristopherSimmons?) writes a post about this which includes all the suggestions and proper fix for pagespeed.
please let me know. it would really help a lot of us.
thanks!
Hi!
I’m actually working on getting my development blog back online.
I have been sick since first week of May with norovirus (stomach bug), which is finally going away. But I’m massively behind on everything due to not being able to concentrate as much. Friend in NJ had this bug for 4 weeks; another friend’s daughter had it for 6. I am almost at end of week 6, and not quite right….
It is my intent to republish all my various WordPress tutorials in one place for all to see in a concise manner, but allow some time on that please 🙂
May be this will help it works very good,i’m using it my self…
I’m having a heck of a time trying to increase my page speed with this theme.
I don’t know if it is the images or banner ads but I barely break 70 on Desktop and 50 below on Mobile.
Please help.
Hi,
My website speed is horible.Mobile menu is not working.Please help me out.Give action steps need to be done.
Weblink: http://mavcure.com/
@nihar105479 here is things you need to fix,and you can find in my sticky post help to fix some of them.
1.Remove query strings from static resources >>> there is help in my sticky post to fix that.
2.Optimize images >>>> get the plugin EWWW Image Optimizer over at wordpress to fix that issue.
3.Inline small CSS >>> Use cloudflare and they will fix that for you and a lot more.https://www.cloudflare.com
4.Minify JavaScript and CSS >>> Use cloudflare and they will fix that for you and a lot more.https://www.cloudflare.com
5.Use cookie-free domains >>> Use cloudflare and they will fix that for you and a lot more.https://www.cloudflare.com
I keep telling users use cloudflare to help better Optimize there site,if they take my tips and put them in action there site be fast and score better..there is a lot of tips on this site use them and you will see performance.
my result for test version:
– clean instalation wordpress and theme
– extra plugin: W3 Total Cache (I just clicked on: Enable page caching to decrease the response time of the site.)
That´s all and results 8.7.2014 – mobil 77/100, PC 90/100: http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Ftestinfoglass.sazovsky.cz
Now, I have to find a bug on my site: http://www.infoglass.cz Where I have results mobil 40/100, PC 49/100
Now I modified the home page and page speed fallen: mobil 63/100, PC 83/100. (problem: JavaScript and CSS). http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Ftestinfoglass.sazovsky.cz%2F&tab=mobile
Hey Everybody
@Steven thx for sharing your expertise. Gonna try out soon!
EWWW is already in use 😉 like it! Does anyone know a hack that ewww is leaving some files out? I do have a transparent watermark which it is killing every time running over the images 😀 pretty annoying.
Does anyone know an alternative to cloudflare? Their infrastructure isn’t the best in germany. I’m pretty sure my local hosting is faster. Anyone knows a good solution to do the following things on the own server instead of using cloudflare?
3.Inline small CSS >>> Use cloudflare and they will fix that for you and a lot more.https://www.cloudflare.com
4.Minify JavaScript and CSS >>> Use cloudflare and they will fix that for you and a lot more.https://www.cloudflare.com
5.Use cookie-free domains >>> Use cloudflare and they will fix that for you and a lot more.https://www.cloudflare.com
thx for your help guys! I really appreciate it.
It’s pretty hard to follow this thread from the beginning since a lot of it is for earlier versions. @Simmons could you or anyone share the best practises/combination of settings for
– theme / plugins
– .htacces
– mod_pagespeed
– nginx
for the latest version of the theme?
I really would appreciate this information. Thx.
@manual
best bet for my stuff, is go “backwards” from here as the stuff for htaccess file still good, for Apache/Linux. I’m only running nginx for some stuff on our server, we use Apache for compatibility with 20 years of content and some stuff not practical to reinvent at this time.
mod_pagespeed … I am running kind of a moderate number of things with defaults on server wide, then htaccess for local per site/folder controls/over-rides or “off.” With nginx I think you have to use a config file.
Anyway…. here’s my htaccess minus the 301 stuff:
<IfModule pagespeed_module>
ModPagespeed on
ModPagespeedEnableFilters collapse_whitespace
ModPagespeedEnableFilters move_css_to_head
ModPagespeedEnableFilters combine_css
ModPagespeedEnableFilters remove_comments
ModPagespeedEnableFilters rewrite_images
ModPagespeedEnableFilters insert_dns_prefetch
</IfModule>
# start WordPress
(removed; might be diff for other setups :-)
# END WordPress
AddType text/javascript .js
# BEGIN Expire headers
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 2500000 seconds"
ExpiresByType image/jpeg "access plus 2500000 seconds"
ExpiresByType image/png "access plus 2500000 seconds"
ExpiresByType image/gif "access plus 2500000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2500000 seconds"
ExpiresByType text/css "access plus 700000 seconds"
ExpiresByType text/javascript "access plus 700000 seconds"
ExpiresByType application/javascript "access plus 700000 seconds"
ExpiresByType application/x-javascript "access plus 700000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>
# END Expire headers
# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</IfModule>
# END Cache-Control Headers
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
<IfModule mod_alias.c>
RedirectMatch 403 /xmlrpc.php
</IfModule>Here’s my robots.txt file (again, your needs may vary)
User-agent: *
Disallow: /cgi-bin
Disallow: /cgi-bin/
Disallow: /wp-admin
Disallow: /wp-admin/
Disallow: /wp-includes
Disallow: /wp-includes/
Disallow: /wp-content/plugins
Disallow: /wp-content/cache
Disallow: /wp-content/themes
Disallow: /wp-content/upgrade
Disallow: /wp-content/backup-*
Disallow: /aff/
Disallow: /search/*/*
Disallow: /trackback
Disallow: */trackback
Disallow: /trackback/We’re currently not running things off our Amazon CDN for the WP sites, in favor of using the horsepower of the dedicated server with high-speed switch, APC, mod_pagespeed, etc. Not finding it super beneficial to load those 1kb sprites off the CDN, frankly. (Brand new web server Dec. 2013). And for us tweaking is simpler when it’s all using one system, and letting mod_pagespeed fix some stuff.
I was manually minifying the style.css file and couple other things. Have not done that with latest version (just updated last weekend). Simple to do … some of my posts on here reference the websites like css minifier where you can copy/paste your code, make new file and over-write the theme css file to solve that issue (takes 5 minutes).
I had too many issues with the caching plugins so not using right now.
Take Google’s PageSpeed Insights with major grain of salt.
On one of my project sites (not running WP), we have the CSS loading from external file, minified, got pagespeed score of 87 and warning about only 47% of page loading above the fold (menu wasn’t showing up), and this could be seen missing from screen capture. So, we put all the code inline, speed went to 95 desktop, 85 mobile, but warning about above the fold now says only 1% was able to be loaded, but snapshot of screen shows everything above fold loaded properly.
Similarly on our WP install running Newspaper, here’s one of their wonderful “suggestions” ….
Reduce server response time
In our test, your server responded in 0.36 seconds. There are many factors that can slow down your server response time. Please read our recommendations to learn how you can monitor and measure where your server is spending the most time.
So, apparently 0.36 seconds is considered slow?
🙂
Thx, this is awesome! Gonna Try out now.
Regarding server response time 😀 I guess in times of real time advertising googles scope is in the 20ms area. Probably expecting everybody to serve on high power servers with performance optimized nodejs ^^
Could you please also share the version and apache vhost conf for mod_pagespeed?
In the “how to make the site fast” page by marius you mention
We have receive some reports that the accelerator has some problems in some specific configurations with our theme and Nginx.
Has anyone experience with nginx and can share his settings?
I finally got someone optimizing nginx settings for me.
However can anyone confirm @Stevens settings? My first try seems that it is not any better than using w3cache
Checking link http://staging.dailycat.de/hund-rettet-katzenbabys-670/ checked with http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fstaging.dailycat.de%2Fhund-rettet-katzenbabys-670%2F&tab=mobile
Old server vhosting (w3cache no nginx) (http://www.dailycat.de)
GPagespee 54 / 66 GtMatrix 83 / 68
New Server (same config as old) GPageSpeed 55 / 68 GtMatrix 86 / 70
New Server (@Stevens Konfiguration) GPageSpeed 48 / 71 GtMatrix 83 / 66
Mobile is the most important metric for me, since 65% of the visitors are mobile visitors!
Make sure the server is running deflate/gzip properly, and you have the proper expires headers set, and server side normal caching if so provided, …. compression and expires headers are good for at least 20 points.
Just for a reference point, one of my pages on the test site, with caching plugin turned off, and the disqus, adsense stuff running (3 ad spots), Gravatar, and one YouTube video.
http://ga-ga.com/1763/book-review-anti-americans-star-sons-wichita/
is 90 desktop / 79 mobile
I need to swap out Gravatar for local author image and should shave off 708bytes from the featured image upload (has “red” in it, so didn’t compress as much).
With the gravatar fixed, and if I ignore the “errors” from Disqus and AdSense, it’s totally in a doable range for us.
I think it works out to be 93/83 without the “errors” on there.
Not bad since NOT running any caching plugin, not using CDN, and not using a minification plugin other than mod_pagespeed optimizing the pages on the fly.
Christopher,
Do you have the code for replacing the gravatar with a local image?
(I’ve been trying to do that too)
Thanks!
