Note to all, we found it’s better to manually minify the main style.css file each update.
HERE IS HOW TO:
The easy way to minify your main style.css file, is to
1) in your theme folder, make a copy of the style.css file (rename style-bak.css or whatever)
2) take the style.css file and open in a text editor (NOT a word processor), like Notepad or TextPad on Windows, or similar.
3) copy and paste all the text from the file into a minifcation online tool like one of these:
– http://refresh-sf.com/yui/
– http://cssminifier.com/
4) copy the “minified” output into a new style.css file
5) upload via FTP to over-write the style.css file in your theme root
Now when you run PageSpeed Insights it won’t bug you anymore. I do this and works just fine.
OH:
in case anybody is curious about my misadventures in
JANUARY TWEAK FEST
– tagdiv speed booster to enqueue stuff
– google font calls removed from functions.php; style.css mod to change default fonts to:
font-family:Segoe,"Segoe UI","DejaVu Sans","Trebuchet MS",Verdana,sans-serif
– mod_pagespeed corefilters on, layz load images off until page load
– manual mod_pagespeed “switch on” via htaccess to test impact
– optimizations in htaccess (remove “collisions” for typical mod-deflate call, taken care of by mod_pagespeed)
– optimizations in wp-config.php
– optimizations in functions.php
using GTNetrix for the testing right now
(6pm PST 1/16/14)
http://gtmetrix.com/reports/ga-ga.com/MJRvlvaL
TESTING THIS PAGE:
http://ga-ga.com/518/discwatcher-blu-ray-movie-review-prince-of-persia-the-sands-of-time/
mix of images, thumbs, youtube video, addthis social button, aysnc google ad
GTMETRIX ENGINE SCORE with my “0.03 settings” I’m up to tonight
98/PS and 82/YSLOW
Page load time: 2.30s
Total page size: 1.02MB
Total number of requests: 53
I AM NOT USING ANY WP CACHING PLUGIN, NOT USING ANY MINIFICATION PLUGIN; beyond mod_pagespeed and server side functions for these tests.
With the main Google PageSpeed Insights page,
score is: 89/100 desktop and 77/100 mobile
Oddly for current Google main speed testing, turning ads off completely along with turning author box off to remove gravatar pull, also didn’t actually increase initial rank. Nor did turning off the addthis button. More testing underway!
A page without youtube video, with addthis on, google advert off, author box on for live gravatar ( http://ga-ga.com/492/growing-older-in-a-youth-oriented-society/ ) ; pagespeed 91/100 desktop and big jump for mobile to 83/100. YouTube really is a suck for the PS rank.
Pagespeed mod test update: settings 0.4
Google Pagespeed 93/100 on main GPS Insight
page: http://ga-ga.com/1262/fiction-area-code-666-part-18-del-arton/
– google adsense – no ads for test
– addthis plugin replace social media buttons with single button ‘on’
– gravatar loaded dynamic over network for author box
todo:
1) load author image locally either with plugin, or add field to functions.php to add new user datafield, then call user meta for the field instead of gravatar code.
2) reduce server response time — typical is 0.32 seconds (320msec) up to 4 seconds; but Google now saying <200msec is the “ideal” — not sure tradeoff on optimizations for everything else; but I did see a post the other day about server tweaks to speed up “first byte” load of WordPress pages to deal with that so called “error.” Solving this would negate the penalize from Google AdSense being on.
3) super annoying “reder blocking” CSS almost “quashed” and ironically the error is from mod_pagespeed trying to fix:
Optimize CSS Delivery of the following:http://ga-ga.com/…ootstrap.css.pagespeed.cf.n0P3fhMJJz.css
http://ga-ga.com/…/A.style.css.pagespeed.cf.JAYrGYtjNo.css– so in typical GPS fashion, one Google product complains about another Google product which is designed to fix the complaint in first place (ARGH!). This one will take some playing around with the “filters” which is where I got stuck this past weekend.
Hope this is entertaining somebody 🙂
and I forgot to mention here is the code I’m using in my htaccess file for mod_pagespeed testing, in addition to CoreFilters being on from the main .conf file at server level, eventually this would be a <directory> directive in the .conf and not in htaccess for better optimization.
<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>CHANGE to my prior htaccess code for expire headers to solve one javascript file for comments in the core wp code:
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>I also added these to the end of the htaccess after the cache control headers, to solve the ETag problem and also the damn spammers hitting my ping script.
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
<IfModule mod_alias.c>
RedirectMatch 403 /xmlrpc.php
</IfModule>AS EVER: do not make changes to any of your files/settings unless you have backups done.
THis is all experimental at this point; when I have a solid Apache-friendly setup, I will share all the settings in all the files for those interested in this discussion. 🙂
Cheers,
Christopher Simmons
member: PRSA, ASCAP
CEO, Neotrope®
Torrance, CA, USA
(please don’t call me asking for help on anything at this point in time; I will resume my consulting biz once I have my own ducks back in a row, as it were!)
Ooops: one more.
For those who are testing for speed-speed-speed and want to fix all their “you could optimize image xyz” warnings. I actually wrote an article on this once upon a time on my old site no longer seen anywhere since it was behind a login.
BASICALLY:
1) backup all your images
2) install the wp regenerate thumbnails plugin
3) check your wp settings > media and make sure the S / M /L sizes match what is being used by theme so you don’t end up with more thumbs than needed (seriously this is the #1 mistake folks make with thumbnails in general)
4) add the following code to your functions.php file in the theme root at the end –or– in your child theme (TIP: stop using a child theme)
add_filter( 'jpeg_quality', create_function( '', 'return 50;' ) );
5) run the regenerate thumbnails plugin under wp admin > tools
Voila!~ go rerun your speed test with Google and magically no more “you need to optimize image xyz to save 5kb” crap.
If your images don’t look as sparkly as they did, you can always delete the thumbs, put your original images back, and then try changing the “50” to “60” if you prefer.
For all those thumbnails all over the place “50” is recommended setting, and this uses both the built-in function of wordpress for images which hooks into the image mod stuff on the server. UPSHOT: when you make this change to your functions.php file – ALL YOUR FUTURE IMAGE THUMBS will be compressed automatically.
No more extra plugin to do that unless you really want to.
Simple. Easy. Quick.
Hello Chris,
nice tips and informations, thank you.
What version of mod_pagespeed are you using?
Did you tried one the last filters, “Deduplicate inline images”?
It seems really interesting:
https://developers.google.com/speed/pagespeed/module/filter-dedup-inlined-images
Thanks
Hi, Anna
we’re running the latest “stable” release from November. The current January version is an “edge” (or “Beta”) which is on different development track. So, hoping the stable version will be updated end of January with some of the new fixes.
Since our main sites are mission critical we dialed back all the filters server wide to just the CoreFilters minus one lazy load element (have an over-ride to lazy load images on page load and not on scroll as that did weird things).
Originally tested with a “full set of best choices for WordPress” but we’d see that something caused conflicts and so doing side by side speed of loading tests, most of the time the pages would load more quickly with mod_pagespeed OFF, which didn’t make much sense.
Now, I’m testing the filters sort of case by case, then testing the “mix” of elements (e.g., fonts, adsense, grvatar, addthis/social buttons) with each option, trying to use as few as possible to not actually slow things down (meaning why have mod_pagespeed do something which doesn’t actually need to be done — 10 extra filters adds some latency somewhere, although if done pre-cache not a biggie “in theory”).
It’s also worth noting I hacked the addthis plugin to add the “async” method which is not built-in (stupidly); which can be found in one of my other posts.
The adventure continues on Saturday!
Also note that some “master filter” settings enable sub filters, as so:
ModPagespeedEnableFilters rewrite_images (apache)
in the configuration file. This is equivalent to enabling
inline_images, recompress_images, convert_png_to_jpeg, and resize_images.
And then recompress_images is a master ‘group’ filter set for the following:
This is also a group filter, and is equivalent to enabling: convert_gif_to_png, convert_jpeg_to_progressive, jpeg_subsampling, recompress_jpeg, recompress_png, recompress_webp, strip_image_color_profile, and strip_image_meta_data.
So as you can see there are
master group >> sub master group >> end filters part of sub-master group
hence the phrase “tricky” 🙂
I am testing the master groups first to find what doesn’t work; then sub-groups, then down to specialized sub-filter settings.
Yeah baby… You first saw it here 🙂
Server is in NYC http://screencast.com/t/lEPSesG5frE
It actually loads faster than my other site with no CMS and 33% of the page size! http://screencast.com/t/f9rxWNJrfw0
@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!
FOR FIRST TIMERS SEEKING TO SPEED UP SITE.
you may find this useful, if you’re going to test using W3 Cache as part of your page speed strategy:
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.
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
After so much trial my website achivede the perfection.Its scored 100 in Pingdom,GTMATIX and Google Page Speed.Thanks Tagdiv team.
http://tools.pingdom.com/fpt/#!/pzZqn/www.mavcure.com
http://gtmetrix.com/reports/www.mavcure.com/F3yJNbue
http://developers.google.com/speed/pagespeed/insights/?url=www.mavcure.com
But there is wrroe coming saying cache
Cache directory is not writable: /home/curepaty/public_html/wp-content/uploads/spacker-cache/
Hi,
Please check that folder permission.
@nihar105479
wow. Really amazing.
Would you mind sharing how you achieved the score, specifically? Overall the pages load very slow from here in Calif., USA, but once loaded, everything is quick.
I notice today the PageSpeed Insights is down, but of course that is their pesky suggestions on stuff with your site being 76/mobile and 89/desktop and their own content causing issues, along with the normal social media bugs.
Great score on GTMetrix! 🙂
Hello,
Greetings
Please help me to speed up site , i have tried all the way you mentioned on this link(https://forum.tagdiv.com/topic/pagespeed/) still my site slow. kindly help me on this, i just want to display all the category without featured image and there should be no gab between two posts (if no image).
My site link http://connectkuwait.com/
Hello #nowsathkwt
be sure you do this
1) https://forum.tagdiv.com/how-to-make-the-site-faster/
page cache, speed booster plugin beta
2) add the elements to htaccess file for expires headers, caching, etc.
3) make sure your server had gzip/deflate compression
4) install image optimize plugin, or change default compression in functions.php, re-render your images for compression
5) run speed test at GTmetrix (etc.); fix suggestions
Your site
http://gtmetrix.com/reports/connectkuwait.com/j8vmwWPR
note issues
* you don’t have expires headers on your site content; you need to add those to your htaccess file per my recommendations in this topic thread
* need to optimize images further
* you won’t be able to fix the stuff you’re loading off other sites like the .me.uk domain which is responsible for many of your “rating errors” — you’re loading images, CSS, JS and such from many other sites, and these all slow down your site and don’t meet the current optimization standards.
Can you tel me what are the thumb, medium and large sizes? Here I see that theme creates 9 thumb sizes http://import.tagdiv.com/newspaper/doc/#start I don’t know which are correct to enter in “media”.
I have regenerated thumbnails, butstill have google worning. In my media I have this dimensions:
Thumbnail size: 80*80
Medium size: 310*600
Large size: 1024*1024
In my theme I enabled:
CROP FEATURED IMAGE
Enable if you want to crop the featured images to (700px x 357px).
I would like to re-run regenerate thumbnails with corect thumb. inputs in my media filds.
Can you help me Christopher?
zokolus
look at the standard sizes found in the theme docs, here:
https://forum.tagdiv.com/modules-and-blocks/
I think we did
sm = 100×65
md = 326×159
lg = 700×357
NOTE: I highly recommend adding a custom compression amount to photos for WP as I’ve found that some of the pix created by theme with default WP compression level are waaaay to big.
For example on our site which is not yet optimized,
original article image 700×406 I uploaded is 31.14kb
http://publishersnewswire.com/META/PNW-Feb14-loudest.jpg
the theme/and WP created a 700×357 version, 63kb (!).
The hack to add the compression amount down to something like “50” is someplace in my prior posts. Recommended!!!
—updated——–
the code:
add the following code to your functions.php file in the theme root at the end –or– in your child theme (TIP: stop using a child theme)
add_filter( ‘jpeg_quality’, create_function( ”, ‘return 50;’ ) );
– then run the regenerate thumbnails plugin under wp admin > tools
EDIT (( AND REMEMBER TO BACKUP YOUR ORIGINAL PIX FIRST – !! ))
And one more FYI:
ga-ga is our test/optimization site
PNW is our “stock” site being used for comparison
(I have been called to other projects the past month and not working on either … hence why I was not around here for couple of weeks … and I will disappear again next week… sigh….deadlines!)
I have done everything as it says. Add code “add_filter( ‘jpeg_quality’, create_function( ”, ‘return 50;’ ) );” and run reg.thumb plugin. After that I run g. pagespeed, but the score was the same as previous mobile:52 / desktop:67 and I still get the message about optimazing images. It looks that they still weren’t optimized.
But then I tried another thing. I changed my expire headers in .httaccess with your expire headers you have posted in this post: https://forum.tagdiv.com/topic/what-is-your-googlespeed-value/ and WOW!!! after I run g. pagespeed test I saw complitely diferent score: mobile:72 / desktop:82 — THAT IS FANTASTIC FOR ME!!! (I am on shared hosting for 5$ a month) — and when I test my page speed with google I have everything enabled and all ads on the site, so that new score is fantastic for me!!!
Christopher THANK YOU!!! 🙂
Yes! Image optimization is only ONE part of the process. You need to ideally optimize your images prior to upload for smallest size, and then set the default compression.
The htaccess file stuff for expires and also making sure that gzip/deflate are enabled on your server are also hyper critical.
Read back through some of my long winded posts for some great tips 🙂
And, you are very welcome !
Hi,
Thanks for good advices! I spent hours to try optimize my website, read all topics and it’s works! 🙂 ( but only on main page. I can’t optimize other pages)
PageSpeed is sometimes 99/100: https://developers.google.com/speed/pagespeed/insights/?hl=en&url=mefus.nazwa.pl%2FGettinEnglish%2F
I have one problem. After I install tagDiv speed booster and I don’t have latin-ext fonts. How can I fixed it.
Thanks!
Cheers
P.S. Sorry for my English! 🙂
With my earlier theme, I had Google pagespeed of over 90. Now with Newspaper it is belwo 70, with W3 Cache in place.
The major problem seems to be the CSS/HTML image scaling. AFAIK, each uploaded image has multiple size versions automatically available, so why not use them rather than HTML scaling?
AFAIK the theme only scales images on responsive resize, but I don’t have the latest version running yet. Meaning, the sizes when viewed on desktop at 100% match the thumbnails created. Maybe post a GTMetrix score page or something for folks to peek at?
You should have higher speed rating than 70 if you have proper expire headers, browser caching, W3 Cache cleared fully before launching new theme and then after launching new theme, and images uploaded are optimized to begin with and/or using something like smushit, or modified the functions.php to increase compression level for thumbs.
