Hi again, So I get the following scores on http://www.styzic.com
Desktop = 97
Mobile = 60
https://developers.google.com/speed/pagespeed/insights/?url=www.styzic.com
On desktop adsense ads are enabled and it’s still fair and better than theme demo page ( score = 90). But two things that are annoying for on mobile are:
1) Optimize Images: I have optimized all images and this warning does not show on desktop but only on Mobile. When I turn jetpack photon off the warning is gone. Jetpack uses quer strings to resize images and that’s the reason.
2) Eliminate render-blocking CSS: This warning doesn’t occurs for js as they are defered. My css are at the bottom of the page but still this warning appears. I’ve minified the css files.
So, any bdy out here who might be so generous to help with Photon and async css?
I’ve tried all plugins in the sticky threads here but none of them could async the 3 css files.
Thanks, Shashank 🙂
I disabled Photon an my scores went from:
Mobile: from 60 to 88
PC: 97 to 97
Is there a way to make photon use the url like
i0.wp.com/imagename-350×200.png
instead of
i0.wp.com/imagename.png?350×200
This would be great.
Well, in my own testing photon did NOT work properly on numerous fronts as it’s not the best way to manage optimization and placement, at least on our sites. It’s loading those images off wp.com and not your own site, so it will be slower and not managed locally by your own site/server speed. A lot of that stuff is for newbies who don’t want to dig in and manage their own site; it’s not for power users at all!
If you look through my posts on this topic, try instead
1) changing default setting for WordPress which uses server side imagemagik modules, change in functions.php by adding directive to set quality at 60 (default is 90)
2) use the plugin for auto creating featured images
3) use the plugin to auto resize images from featured image
These help to manage correct sizes, optimized images without going through another server (wp.com), and I don’t get warnings about any image issues from PageSpeed.
Thanks for your tips Chris, I’ve implemented these things. But Since wp.com delivers images with edge cast cdn it would be faster.
If we could change the url type or force the wordpress resized images to upload to photon, it would be something great. 🙂
Actually, if you’re using mod_pagespeed and caching on your server, then (at least in our case), our images load faster via local cache after the first visit. And you have no control over the issues you’re having – you can’t change the URLs as used by Photon as the CDN likely uses the ?= for cache control to manage updates automatically.
Always a trade off on that stuff. And you would need to do some actual tests on “page load speeds” for the images to see how that works.
In our case, our dedicated server with APC and mod_pagespeed was faster than Amazon’s CDN after first load, unless somebody happened to be in a really far away country.
Your mileage may vary, obviously. But only way to get around the issues with outside sites impacting your rating, is simply not to use them 🙂
You’re somewhat satisfactory Chris!
One more problem that I face for iages is the number of downloads. Since I’ve designed kinda homepage that there are almost 60 images. How can I divide them under different hostnames?
Currently I use one subdomain for images, There are 60 images, will using more subdomains be much beneficial?
Hi, Shashank
you know, I tried using a sub domain, and in our case with APC and mod_pagespeed I didn’t see much improvement since in theory once it’s cached, it’s not critical which locale on your server it comes from. I think there is some “number of connections” level where if you’re above that it CAN help, which I don’t recall off top of my head; maybe 15 or 20? Meaning if you were loading 50 images per page, then loading some off sub.yourdomain.xyz might speed things up. Again, you’d need to run some multiple speed tests on that to see how many msec you save.
And do something logical like
pix.mysite.zyz >> all portfolio images
mysite.xyz/images/ >> all business images
or something like that, otherwise you might end up with a nightmare of organization remembering what is where. 🙂
ALSO: remember a homepage is always a “special case” where loading many small compressed thumbnails doesn’t add much overhead. I think one of mine has 60+ images on it, also.
But remember most people these days don’t start at your home page, they start on a post found from social media, etc. (unless you’re tracking audience entry points and know the homepage is that critical for speed).
I agree Chris.
Yesterday I tried serving images from three and two subdomains, I could not see any major speed improvement but the warning “use more hostnames to parallelize downloads” went away.
@Shashank How did you get 97? WOW. That is amazing. I know that @Christopher’s website has 97 as well. My one is 86 on desktop and 65 : https://developers.google.com/speed/pagespeed/insights/?url=gdgtarena.com&tab=desktop
Can you please tell me how did you get there?
Thanks!
Yeah sure mehedi, I’ll be happy to help and once I disable adsense ads the score becomes 99!
Please answer these questions. 🙂
How are you eliminating render blocking js and css?
How are you caching?
Are you optimizing images?
How do you compress?
1. eliminating render blocking js and css — tried everything but didn’t helped.
2. caching – w3 total cache
3. image optimization – wpsmush.it
4. What do you mean by “how do you compress?”
thanks for the help!
Here are my answers:
1. I use the default newspaper speed booster + speed booster pack plugin.
2. same
3. I use photoshop to “save images for web” before uploading and then make wordpress default from 90 to 60
4. How do you minify, compress and combine html, css and js?
1. Do you have any “special” settings for the speed booster pack plugin? If so, what are they?
2. again, any special settings?
3. I use paint.net and my image files are 60-70kb..what do you mean by “before uploading and then make wordpress default from 90 to 60”
4. HTML: http://screencast.com/t/Z2Xn911vnL |JS: http://screencast.com/t/OZgTpxJCSono | css: http://screencast.com/t/eEsTU29YJ
Also, it would be great if you could send me a screenshot of the Speed Bosster Pack plugin’s option page.
Screenshot? Here’s every thing!
and I use ithemes security to tweak some of wordpress.
1. use google for js, defer load js, async css and minify
2. The plugin is very big, I’ve configured every part of it with time. I need to know your settings to say what lacks in there. 🙂
3. Before you upload images to wordpress, open that image in photoshop. Press alt+F There is an option “save for web”. Adjust your settings there.
then in the speed booster pack plugin there in default wordpress image compression level, set it to a lower value like 60 and regenerate images.
4. I can see yout html is minified but there are no minified css and js. I minify these files myself and upload them back to server. I don’t use total cache for it.
thanks for the tips, can you please send me a screenshot of your speed booster pack plugins’ settings page?
I don’t have any screenshot sharing website account. I’ll upload them on wordpress so save it as soon as you can, I’ll delete them.
http://ss-img.styzic.com/2014/08/Capture.png
http://ss-img.styzic.com/2014/08/Capturee.png
thanks! i think you should install the jing software for taking screenshots. its pretty easy and free. thanks for the tips! I will let you know after customizing everything!
Yeah I would love to see you at 97 or more. 🙂
Although I’m still optimizing, I’ll let you know about anything new I do.
I’m kinda poor in getting traffic and seo, are you gonna teach me? Lets see here: http://twitter.com/sstheshashank
@Shashank I minified the CSS and JS and uploaded them back to the server. But my score is now 85 (which is low). As you can see most of the problems is with Google’s Analytics and other sources. Here: https://developers.google.com/speed/pagespeed/insights/?url=gdgtarena.com
Any idea?
I think you’re not using total cache correctly.
I don’t minify anything with it. Turn minify off and use wp-html compression to minify html. It changes some url pattern and probable the warning with http://fonts.googleapis.com/…7CRoboto+Condensed%3A400%2C700&ver=3.9.2 will go.
After that just optimize the images, and done!
May i see your htaccess?
@Shashank I deactivated Minify from the W3 Total Cache and installed https://wordpress.org/plugins/wp-html-compression/ but it made it worst. Google now shows that I need to minify html…?
https://developers.google.com/speed/pagespeed/insights/?url=gdgtarena.com&tab=desktop
