Mar 5, 2009

Cheap ways to increase performance of a TYPO3 web site

Update: this article represents historical information.

Normally increasing web site performance means buying better hardware or playing with Apache, MySQL and operating system settings. Certainly better hardware can make the site perform faster. Unloading some Apache modules and tuning Apache settings will help too. Optimizing MySQL also helps. It all helps but it costs a lot too. Hardware is costly and server optimization is costly.
What can be done to improve the web site performance without upgrading hardware?

The idea

The idea lies in the optimizing the output of the page. Some time ago Yahoo developer network published their guidelines to optimize web page loading speed. Interestingly the methods they propose also help to lower the load on the server thus leaving more time to the server to process requests. So it is two–in–one help:
  • pages load faster on the client side
  • server is more relaxed and can handle more requests
However two things should be considered when implementing Yahoo recommendations:
  1. Yahoo is a large company. They have many servers and their optimization ways will slightly differ from the single server optimization
  2. Each web site is different. Therefore having the same universal recipe does not look possible. It is like with medicine: if it helps to my friend, it does not mean it will help to me.
Yahoo recommendations are useful. However they should be analyzed for each web site separately. They should never be used blindly.
One good post that I found on the subject, comes from Percona, the company that optimizes web site performance and owns the MySQL Performance blog. This is what they write in the blog:
"When I visit customers quite often they tell me about number of creative techniques they heard on the conferences, read on the blogs, forums and Internet articles and they ask me if they should use them. My advice is frequently - do not. It is fun to be creative but creative solutions also means unproven and people who had to become creative with their system often did that because they had no choice. Of course when they came to the bunch of conferences and told their story which resonated across the Internet sticking to the people mind as a good practice.
There are 2 things you should ask yourself. First is the scale comparable - the recipes from Facebook, YouTube, Yahoo, are not good for like 99.9% of the applications because they are not even remotely close in size and so capacity requirements. Second if this “smart thing” was truly thought out architecture choice in beginning or it was the choice within code base constrains they had, and so you might not have."
Percona guys are good in everything they do and they got it absolutely right. This is what I always tell to my own clients: "Never blindly follow it some advice that you read somewhere! Your system is different and needs individual approach!"
Let's see two analysis examples.

How this TYPO3 web site was tuned to the maximum performance

When I started this blog 3 years ago, I did not have any idea about web site optimization. I read about SEO and I was familiar with the topic. But I did not know many other things that I know now. In particular I did not know how to make a better markup (semantic markup) and how to lay out file references inside HTML properly. So I just took the first blog skin that appealed to me and used it for my blog. It worked for quite some time until I started to realize that it does not perform well.
As a result I reworked the site completely. Not everyone can change the design so radically but in most cases it is not necessary. One of the major things are hidden from users and they are on the HTML level. Take a look to my YSlow (why slow?) result for the home page:

This is as far as a standalone web site can get. YSlow rates pages from A to F and from 0% to 100%. I got an A and 90%.
How did I do that?
Firsts, I have a single CSS file for all styles (plus print version which must be in a separate file). It is a minified file that contains Eric Meyer's reset.css, parts of CSS styled content extension inline styles and styles specific to this site. When compressed it takes less than a half of the original combined sizes of all three files. And it takes a single HTTP request to load! This helps a lot because browsers typically have a very hard limit on the number of simultaneous requests per server. So minimizing number of requests loads page faster (and unloads the server too!).
I got rid of all default styles produced by extensions. Most of them are never used. So I just removed them without loosing anything.
I also removed default TYPO3 JavaScript. I do not use it, so I do not need it. The only [minified] JavaScript file that I have comes from comments extension and it appears only when the comment form is displayed on the page. Oh, yes, and I have Google Analytics script but this is not under my control.
I also disabled most of the [junk] markup that TYPO3 generates. I even got rid of the <!--TYPO3SEARCH_xxx--> markers in the normal output. It is not needed there.
Compressing components speeds up their loading for approximately two times according to FireBug. And it uses less bandwidth. I use mod_gzip for Apache 2 due to certain reasons, not mod_deflate.
Client caching helps to speed up page loading by fetching only HTML from the server. Images, CSS and JavaScript are cached in the browser.
All these measures took me several days to set up, check and tune. These were not complete days, this was made is passes: tune, check logs, analyze, tune, ... Now I can say that the site is pushed almost to the limit.
What else can be done on this site?
There can be further markup clean up. In particular I do not like how CSS styled content presents images. There is too much HTML code there. While space can be optimized, There is too much of it in the source code. Some HTML comments can be removed.
I will certainly do it later. I want this site to be as much optimized as possible. The only thing why I can never get 100% is because I do not plan to pay for CDN. This is one of things from Yahoo that does not apply to most sites around.

What score does typo3.org have?

typo3.org is the site that many people use daily. In particular I do. How well does it perform? Let see:

Not very good, right? The grade is F and it is 53%. So there is a lot of room for performance optimization. Let's check the markup inside the <head> tag:
<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_0e37a58086.css" />
<link rel="stylesheet" type="text/css" href="fileadmin/templates/css/typo3.all-main.css" />
<link rel="stylesheet" type="text/css" href="fileadmin/templates/css/typo3.org-main.css" />
<link rel="stylesheet" type="text/css" media="print" href="fileadmin/templates/css/typo3.org-print.css" />
<link rel="stylesheet" type="text/css" href="fileadmin/templates/css/newsimporter.css" />
<link rel="stylesheet" type="text/css" href="fileadmin/templates/indexed_search.css" />
<script type="text/javascript" src="typo3temp/javascript_a1cb3a5978.js"></script>
So there are six stylesheets and an inlined JavaScript file. I guess it should be easy to optimize by reducing the number of stylesheets to two and minifying them.
In addition typo3.org does not perform any compression for these files or client caching. So each request loads all these files in the uncompressed format from the server for each page visit or link click. What a waste of server resources!
The rest of HTML is full of the unnecessary markup:
<!-- END: Content of extension "newsimporter", plugin "tx_newsimporter_pi1" -->

<!-- Inclusion of other records (by reference): [end] -->
</div>
<!-- CONTENT ELEMENT, uid:4709/shortcut [end] -->

<!-- CONTENT ELEMENT, uid:4712/html [begin] -->
<a id="c4712"></a>
<!-- Raw HTML content: [begin] -->
<br class="clear-all" />
</div>
<!-- Raw HTML content: [end] -->
<!-- CONTENT ELEMENT, uid:4712/html [end] -->
<!--TYPO3SEARCH_end--></div>
If amount of this markup is multiplied by the number of visits, the figure must be large! In addition server resources are spent to generate this markup!

How to optimize TYPO3 web sites for performance?

This is a tricky question. While there are some basic principles, each site is different. So it is best if this work is performed by someone who knows how to do it. Alternatively it can be done "in house" by trail and error way. What is the best? Everyone decides for himself.

14 comments:

  1. Hi,



    you can get rid of the CDN by adding your domain to the cdn list of firefox. YOu would just get an A there if you would use a CDN as yahoo does.



    anyway a nice article and thx for all others.

    PS: Please get rid of the upper and lower characters in captcha!!

    ReplyDelete
  2. This article is really so so usefull. Thanx a lot Dmitry!





    Kind regards

    Frank

    ReplyDelete
  3. Thanks Dmitry, excellent tips...will definitely have a look at this....

    ReplyDelete
  4. Christian TraboldMarch 5, 2009 at 2:42 PM

    Nice article!



    You say: "Firsts, I have a single CSS file for all styles (plus print version which must be in a separate file)."



    I solved this by putting a "@media print {}" arround all print-Styles.



    Afterwards I concatinated print + screen-css (and others) in one file.



    HTH



    Christian

    ReplyDelete
  5. it's a nice article to show how hard it is to optimize TYPO3. If even the people behind TYPO3.org cannot optimize it well, who can???



    Ries

    ReplyDelete
  6. Christian, thanks for the idea! :) I should definitely try it :)



    Ries, some people can ;) As to typo3.org, I think no one actually thought about it. Or may be they do not have skills for it.

    ReplyDelete
  7. Nice and good article Dmitry (as always).



    Else I can recommend Michiel post about optimizing TYPO3 backend, most of it are good advice for frontende to.



    http://typofree.org/articles/optimizing-typo3-backend-responsiveness/



    And TYPO3 isn't more difficult to optimize than other CMS. Quite opposite would I say, but some skills are needed.



    Regarding typo3.org. I think time, interest and priority (lack of) are the most important reasons for lack of optimizing. Not neccessary lack of skills.

    ReplyDelete
  8. Hi, i've optimized a typo3 page several days ago and discovered nearly the same. I hope with TYPO3 4.3 minifying and gzipping of JS/CSS will be much easier (awfully our webhoster doesn't support mod_gzip/mod_deflate). It took me some days, till all my css and JS are merged, minified and gziped dynamical without any problems.



    Thanks for the article and kind regards

    Patric

    ReplyDelete
  9. Good article!

    I followed your early tips and those from Michiel mentioned above and got my "A (90)" after a couple of days; moving beyond that became difficult. It required reducing http-requests. I decided to create a condition which gives recent browsers base64 encoded images (mostly those for navigation) and serves Images to IE.

    Voila, A92-A94!

    This also helps with lowering the price of Google Adwords: A fast landing page with good content results in a higher quality score and this gives you a lower click price.

    Google Analytics remains a headache though. Drupal has a module to store it locally. That would allow to compress it, right?

    Anyway, thanks a bunch

    ReplyDelete
  10. Jens, you can store analytics script on your server and "wget" it once a week to ensure updates. This is what I did for some sites. Usually it is already minimized but they do not send expiration headers or gzip it.

    ReplyDelete
  11. Dmitry,

    thanks for the hint and Happy Birthday to you!

    I will try a wget/curl and cron solution, I am a bit concerned that Goggle may deliver the file faster than my server can do - but one htt-request less may get me to the magig 3 requests.And now go :beer

    ReplyDelete
  12. Great reminder on constant improvement Dimitry.



    On first try, Acqal.com's home page got an ugly 44/F. Within an hour it's 83/B by adjusting our .htaccess files with the gzip/etag settings.



    Regarding that excess HTML content removal stuff, to drop page weight, these are the TypoScript template setup helpers.



    tt_content.stdWrap.prefixComment =

    config.disablePrefixComment =

    ReplyDelete
  13. Jens, if you set up expiration headers to 7 days or so, visitors will not redownload this file. Even if Google updates the file, nothing will break (they always care about it). And after 7 days users will get a new version.

    ReplyDelete
  14. Michael Cannon, I like your story :)

    ReplyDelete