Hi,
I optimized my website using several methods , but I am not happy with the First View time results at all …
here is my test :
http://www.webpagetest.org/result/130122_P_JT7/
any opinions and suggestions is appreciated.
thank you
Not really a lot to work with there. If yo’re serious about wanting to make it faster there are only a couple of things you can do:
1 - Do some server-side tuning. Looks like around 300ms of the time was in server-side processing. With the HTML being cacheable you can put something like varnish in front of it or get down in the weeds with the server configs (ssd’s, lots of Ram, nginx).
2 - Inline the css and js directly into the html. Reduces the sharing across pages but would save ~200ms. If you don’t inline them, at least serve them from the same domain to avoid the additional DNS lookup.
3 - Inline the gif as a data URI for the browsers that support it (IE8+, and just about everything else)
Do all of those and you could theoretically get it down to around 500ms but #2 and #3 have downsides around resource sharing and cacheability that you’d need to consider.
thank you very much for the reply …
Unfortunately the 1st step is not possible for me at the moment …
About the inline CSS: you mean that I insert the CSS into my template pages instead of using stylesheet files ?
Yes, if you want to eliminate the additional requests for css and javascript then the only way to do it is to include the contents of the stylesheets directly in the HTML.
That said, it’s really not a good idea if your users visit more than one page - you will be improving the first view time for a single page at the cost of slower pages for people that browse multiple pages.
Without being able to optimze the back-end your only good choice is to serve the js, css and html all from the same domain to avoid the extra dns lookup. It won’t be much of an improvement though (and the page is already really fast so you should be happy with that).
well I have done some modifications in wordpress to re-write the categories as subdomains to optimize the SEO (google search) … and thats causing the issue… becasue W3TC serves the JS and CSS from the domain root … I should find a way to solve this issue.
thank you very much
Thanks to your suggestions I improved my results , here is two tests in a row :
http://www.webpagetest.org/result/130125_4A_H5/
http://www.webpagetest.org/result/130125_AP_JR/
Do you have anymore suggestions ? I know the remaining improvements are mostly server side (which I can not do at the moment) … but maybe there is something remaining I can do with the script …
(wordpress)
thank you… I have to say that your website is the best in its kind
Even though you can’t change the back-end itself, you may still be able to do some work to help the first byte time.
Are you already using a page cache on the server (like supercache or W3 total cache)? If not, those could help to get the response time down lower.
You can also run your front-end through a CDN (Cloudflare is free and MaxCDN is also inexpensive but good). Since the HTML is cacheable the CDN will be able to serve the page directly for you and never hit your server (well, hit it rarely anyway). By default Cloudflare will not cache HTML but you can configure it to.
thank you very much for the reply,
yes I am using W3Total Cache… and I do have a MaxCDN account , but I don’t know how to serve the html side of the wordpress via CDN ?
would you please give me more info on this part ?
thank you
You just CNAME your main domain to point to the MaxCDN address and all of your site traffic will go through the CDN, including the html. It does require control over the DNS records but nothing specific in the Wordpress configuration.
It actually simplifies things a little bit since the normal CDN content can be served from the same domain, you actually don’t need to configure wordpress to serve content from a different “CDN” domain.
btw, make sure you really do want your content to be able to be cached by the CDN before flipping the switch. If you expect different users to be seeing different content then it isn’t going to work well (and your current config would be broken for anyone behind a shared proxy).
If you do have all of your “dynamic” pages already working correctly with pragma: no-cache (or similar) and only the shared/common pages are cacheable then it’s a trivial change.
great step by step guide is on CDN77.com website http://www.cdn77.com/guides/wordpress-integration
I improved my wordpress alot, here is my results in WebPagetest.org :
http://www.webpagetest.org/result/130815_A2_42Y/
But something is kind of strange foe me , cause in google page speed test it gives me an error about my css file… I searched alot but I really don’t know how to solve it … would you please give me your ideas on this ?
http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fdogs.v3t.us%2Fwhy-is-my-cat-is-acting-weird-ever-since-i-got-pregnant-t52959%2F
It is part of the new PageSpeed recommendations that are geared around a fast mobile experience. With mobile the round trip times are sufficiently long that in order to deliver a fast above-the-fold rendering you should do it without referring to any external resources.
Their recommendation is to inline the critical css that you need for the above-the-fold and load the rest of the css later so that content can be displayed quickly. In your case it’s actually even more painful because the css is on a different domain so 2 extra round trips are needed (dns lookup and socket connection) though it’s cacheable so additional navigations will be faster.
Given how small your css is you could potentially just inline the whole thing (in your template where you normally have the link tag to include the css you could just use php’s include function to load the content directly into the response).
Thank you , as always your guides are great…
Great idea but my problem is the theme structure that I am using (Genesis Framework + Prose Child theme) . unfortunately this theme is different in serving stylesheet files. It serves it insert CSS files into the header from a php file because this theme has too many configurable options for CSS in admin area and it will make it so hard for me to do the changes after each update.
But to be honest its a fast theme and I am really happy with it but I wish I was able to be able to insert CSS codes directly into the header.
Anyways thank you very much Patrick, you and your great website are really helpful to all of us.
All the best,
Ali.