Bigger & Slower
-
I’m very confused with this plugin after at least 20+ hours of trying to figure it out & having signed up to Amazon S3 … very frustrating. Maybe I don’t know what i am doing but i think i’ve followed the installation instructions and loads of online tutorials.
According to Pingdom.com – if I use minify “auto” mode the CSS breaks but my site seems really fast and the fewest requests and the size is reduced quite a bit but not drastically (I’m guessing the js won’t work either).
If I use minify “manual” mode the css works, but the site gets bigger (1.5MB > 2.2MB) and the request increase (43 > 53).….. just when i thought i am getting somewhere!!!
Any ideas or suggestions?
site: https://www.anthonypeyper.com (excuse the mess right now)Any help will REALLY be APPRECIATED!!!!!!!!!!!!!!!!! ??
-
If all you want to do is load site faster, the greatest improvement you can get by using a CDN – content delivery network.
Hi Dave,
Thanks for the suggestion – this is actually part of my problem. I am using Amazon S3 for CDN, but doesn’t seem to work as I expected. Still seems to take quite long to load.
My site seems to perform better without W3 Total Cache!
(I’m feeling really stupid here)
A.Some suggestions:
– Do not use Amazon S3 but Amazon Cloudfront instead. S3 is not a real CDN, but only a “bucket”.
– Use cache preloading. The official version of “3c total cache has some faults in cache preloading, use this version instead. I use it and it works brilliantly.
– switch minify to manual and use the “help” wizzard to exclude those .js or .css files which “break” your site. Simply leave those files out.
– if you are on shared hosting, do not use database caching, sometimes object caching causes problems.
Thanks wp-fan! Does this mean I have to cancel everything with S3? And ONLY use Cloudfront? I don’t need both do I? A lot of research showed people using S3…
I’ll do some more research.
thanks again!Managed to figure out the Cloudfront thing – think it’s working cos all my image links are now Cloudfront links.
Still struggling with the minify thing though…. Deleted all the css files in the help mode and still the pages break in Minify Manual Mode!
:/
Poo! I thought I had the CDN thing sorted and checked via YSLOW and get the following ratings:
—————
Grade F on Use a Content Delivery Network (CDN)
There are 13 static components that are not on CDN.
You can specify CDN hostnames in your preferences. See YSlow FAQ for details.
https://www.anthonypeyper.com: 9 components, 523.4K (63.7K GZip)
connect.facebook.net: 1 component, 178.3K (58.9K GZip)
prophoto.s3.amazonaws.com: 3 components, 47.0KGrade F on Add Expires headers
There are 5 static components without a far-future expiration date.
(2013/2/1) https://connect.facebook.net/en_US/all.js
(2012/12/20) https://prophoto.s3.amazonaws.com/img/ajaxLoadingSpinner.gif
(no expires) https://d3ypcvrw8p9k6.cloudfront.net/wp-content/uploads/p4/images/about-me.jpg
(no expires) https://prophoto.s3.amazonaws.com/img/facebook_sketched_128.png
(no expires) https://prophoto.s3.amazonaws.com/img/twitter_sketched_128.png
——————————–I feel so lost I’m not even sure I was playing the game in the first place!!!
Thanks wp-fan! Does this mean I have to cancel everything with S3?
Yes. Delete the S3 bucket and use the cloud front upload option in total cache.
Grade F on Add Expires headers
Please use the expiry settings of the screenshots shown in the post that I have linked above. And and recommend to use the w3 total cache version that I have linked above!
You can specify CDN hostnames in your preferences
I have checked your site with tools.pingdom.com . In the “waterfall” tab, I can see some of your pictures are still not being served by cloudfront.
I recommend using 10 CDN hostnames (for example, cdn1, cdn2, cdn3 …). In the beginning, I have only used one, and with 10, more elements should be picked up and served by cloudfront.
In your sourcecode, I can see you have not registered the cloudfront CNAMES with your hosting company. While this does not make any difference in speed to my knowledge, it just does not look nice and may not be beneficial to your SEO. Please check this description how to change this.
Deleted all the css files in the help mode and still the pages break in Minify Manual Mode!
Maybe the problem is with one of the .js files? Try to delete suspicious .js files from minify setup. When you find the culprit, re-add all other .js and .css files, but leave out the .css file which is related to the faulty .js file.
And one more time: Use the w3c total cache version that I have linked in my post above. Definately switch on preload cache with the settings in the screenshot that is part of the post I have linked to. This will make your site a _lot_ faster, too.
Let us know how you are proceeding!
PS: Great photos, by the way.
PPS: Picture missing here. Pitty…
Thank you so much! I am going to try figure out all you are saying. I’m just a bit confused about the S3/Cloudfront setup. It just seem like Cloudfrotn needs S3…. though i probably hav it totally wrong!
I’ll let you know how it goes!
Thnaks again!!
One thing that you must really check is by deactivating all these plugins , deleting them and then checking the site load time. It may so happen that these plugins take up some space and increase the number of requests in some rare cases.
Although do keep a backup of blog before deleting the plugins , and also after you have deleted them
This is just to check how much improvement you get by using plugins.
All I mean to say is that you may end up using all these plugins without much effect to site load time.
Also save your settings for plugins like w3 etc so that when you install them again, you don’t have to rework the whole settings.My pleasure, acp73.
It just seem like Cloudfrotn needs S3
No, it does not. in AWS console, you can give your Cloudfront instance a freely chosen name, no need to distribute a S3 bucket. Cloudfront will search and store the files by itself, no need to store them in a S3 bucket. I know many people get this wrong, but believe me, I have the same setup and it works very well.
To summarize things: From my experience the biggest impact has
– precache loading (the original version 0.9.2.5 from the official plugin repository has a fault, use the one that I have linked above instead!)
– using a CDN
– _manual_ minifying (and leaving out the .css and .js files that won’t work with minify)
– using all browser cache optionsKind regards,
Thomas
You’ve been really helpful. I think I am getting the hang of it slowly but surely. Seems there are 3 options with using a CDN
1. Simple Bucket – S3
2. Push content – Cloudfront + S3 bucket
3. Pull content – Cloudfront with domain origin (as opposed to S3 bucket origin)I’ve managed to get the pull content working (thanks to your help) but as soon as II create and a 2nd distribution such as: absgdfetrhwh.cloudfront.net – Get the following error message:
Domain name absgdfetrhwh.cloudfront.net is not in distribution CNAME list.Maybe you meant something else by using 10 CDN hostnames. Is each hostname a new Distribution created in Cloudfront?
Now I just need to figure out how to install the other version W3TC as you have recommended…..
I might write a summary after this to explain to anybody else with no experience at all how to do this.
On the link you gave: https://www.wmiles.com/2013/01/03/w3tc-cache-preload-for-version-0-9-2-5
it states to update the plugin code, but the code I have in my version (already 9.2.5) is not the same as shown on his page. Doing anything here I might just screw up royally! Pity ??
So not sure what to do about “Add Expire Headers”CDN is still at F but I am guessing thats down to using 10 CDN hostnames which I am not sure how to create.
Some good news: I found the js culprit (jetpack) causing the page to break in Minify Manual Mode.
All good on that side now.Y Slow rating “B”
but still F on CDN & E on Expire Headers ??On the link you gave: https://www.wmiles.com/2013/01/03/w3tc-cache-preload-for-version-0-9-2-5
it states to update the plugin code,You can download the whole plugin in a modified version from that very page and replace the existing version. Please read carefully.
On the bottom of the same page, there is a detailed step by step guide on how to upgrade to the modified version.
So not sure what to do about “Add Expire Headers”
Check this guide for some good settings.
My recommendation for the “preload cache” settings, once you have installed the modified version linked above:
Garbage Collection Interval: 86400
Cache Preload Update Interval: 300
Pages per Interval: 50@thomas – thanks! Think I’ve been trying too many things and didn’t read correctly. I’ll get on it as soon as I have a chance. Does this include using multiple CDN hostnames?
Still struggling a bit setting up a CNAMES – thought I done it but still see the Cloudfront URL in the source code. I’ll keep you updated with my developments and hopefully it will benefit others too.
Thanks again! you’re a legend!Try this tutorial to set up cnames with your hosting provider, cloudfront and w3c total cache.
I mentioned it is better to setup 10 cnames, right? This is because wordpress aka total cache will request your files from several different cloudfront servers, not only from one. This adds up to speed again – at least this is what I have read on the web and this is my experience, too.
I am based in Germany, your website speed feels better already over here. And I am very confident it will work even faster after you have implemented all steps in this thread. But don’t trust me – trust pingdom :=)
- The topic ‘Bigger & Slower’ is closed to new replies.