This blog..

.. is about optimisation that isn't evil.

Defer the loading of 3rd party addons

I just discovered the informative blog-post “Optimize the Performance of Widgets, Buttons & More” on w3-edge.com.

It’s a well known problem that 3rd-party services included in a web page can become a performance bottleneck.

The article explains how to defer the loading of 3rd-party widgets (like google ads, social network plugins etc.) until after the HTML is rendered. It gives a lot of code examples for the most popular addons (also for some that I didn’t hear of). These should enable you to add the JS functionality after the page has been loaded for these elements.

52 interesting Blogposts on web application performance

On the Dynatrace Blog a nice summary of their web application performance blog posts has been posted:
52 weeks of Application Performance – The dynaTrace Almanac

Take a look, they cover a wide range of problems with examples, from frontend to backend over management themes:

We hope that there are topics for everybody. The articles range from technical to conceptual areas of performance management.  They reflect what took our attention throughout the year. We hope that you enjoy reading them.

Of course, if you’re following the latest trends in web application performance or have been interested in it for a while, some of the articles don’t really have new information.

Better performance requirements

A task with performance engineering that’s often encountered is to define requirements for performance. This is a task that isn’t easy to accomplish, especially if you start from scratch.
On the SearchSoftwareQuality-Blog, a helpful article has been posted: Seven quick tips for better performance requirements
Continue reading Better performance requirements

Theory of performance tuning

I stumbled across a nice article at queue.acm.org titled “Thinking Clearly about Performance“.
Continue reading Theory of performance tuning

Improving speed of https pages

When it comes to secure sites, it’s not easy to achieve a fast loading page.

There are a few points that really help:
Continue reading Improving speed of https pages

yum install iostat

Sometimes you’re working on a machine and miss a certain tool. In my case, it was iostat I missed on a Red Hat server. iostat is a useful tool for a quick look at the I/O statistics of a unix/linux based machine.
Continue reading yum install iostat

JVM options

If you’re motivated (or desperate) enough to dive into the mysteries of the JVM, this (somewhat old) list will be helpful:

http://blogs.sun.com/watt/resource/jvm-options-list.html

Also, a good link list is available at the end of that page.

Use different servers for different content

Most of the content of web pages can be grouped in two types: Static and dynamic content.

These content types have different requirements on the server software.
Continue reading Use different servers for different content

Removing unused CSS whitespace with ant replaceregexp

If common CSS compressors are not working for you, it may be a more defensive approach to reduce the filesize of a CSS file with simple regular expression replacement. For this example, I chose Apache Ant (using replaceregexp) to shrink the CSS files.

In this  approach, I remove unused whitespace and linebreaks, but do not alter or optimize the CSS code at all.

Definition of the affected files

For easy reference, we define a fileset.

<fileset id="css.fileset" dir="your-css-folder" includes="**/*.css"/>

Comment removement

Remove comments in one or multiple lines.

<replaceregexp match="/\*.*\*/" replace="" flags="g" byline="true">
<fileset refid="css.fileset"/>
</replaceregexp>
<replaceregexp match="/\*.+?\*/" replace="" flags="gs" byline="false">
 <fileset refid="css.fileset"/>
</replaceregexp>

Whitespace removement

Multiple whitespace characters are reduced to one, leading/ trailing whitespace is removed.

<replaceregexp match="\s+" replace=" " flags="g" byline="true">
 <fileset refid="css.fileset"/>
</replaceregexp>
<replaceregexp match="^\s+" replace="" flags="g" byline="true">
 <fileset refid="css.fileset"/>
</replaceregexp>
<replaceregexp match="\s+$" replace="" flags="g" byline="true">
 <fileset refid="css.fileset"/>
</replaceregexp

Merging of lines

Blocks of CSS statements are collapsed to a single line, multiple line feeds are removed.

<replaceregexp match="\{[\n\r]+" replace="{" flags="g" byline="false">
 <fileset refid="css.fileset"/>
</replaceregexp>
<replaceregexp match="[\n\r]+\}" replace="}" flags="g" byline="false">
 <fileset refid="css.fileset"/>
</replaceregexp>
<replaceregexp match="[\n\r]+\{" replace="{" flags="g" byline="false">
 <fileset refid="css.fileset"/>
</replaceregexp>
<replaceregexp match=";[\n\r]+" replace=";" flags="g" byline="false">
 <fileset refid="css.fileset"/>
</replaceregexp>
<replaceregexp match=",[\n\r]+" replace="," flags="g" byline="false">
 <fileset refid="css.fileset"/>
</replaceregexp>
<replaceregexp match="([\n\r])[\n\r]+" replace="\1" flags="g" byline="false">
 <fileset refid="css.fileset"/>
</replaceregexp>

This can all be done in a few seconds during compile time.

Simple solution for a static-ressources domain

A well understood pattern of increasing frontend performance of a web application is to deliver static ressources from a different domain. Preferably free of any cookies to save additional bandwidth, the browser can download more of these files in parallel. (This mechanism is often refered to as “cookieless domain”.)

Sometimes the adjustments in the application required to achieve this are complicated and have a deep impact on the codebase.

Much handier is a solution that is transparent to the application. This solution needs to

  • manipulate the ressource paths of the applications response
  • redirect the requests to the static-domain back to the original application

As of Apache 2.2.7, the module mod_substitute is available. Mod_substitutes job description is to “Perform search and replace operations on response bodies”. Apaches Mod_rewrite is available for a very long time now, and “Provides a rule-based rewriting engine to rewrite requested URLs on the fly”.

If these two modules are combined, it’s possible to do the required tasks within Apache. In this example, two virtual hosts are used (app.localhost and static.localhost). All items in the /static/ folder are downloaded from the static domain.

Adjust the response to use the static domain for all elements in /static instead of the original applications domain.

<VirtualHost app.localhost>
DocumentRoot "your_docroot"
ServerName app.localhost
AddOutputFilterByType SUBSTITUTE text/html
Substitute "s|/static/|http://static.localhost/static/|nq"
</VirtualHost>

Rewrite the requests to the static domain back to the regular domain:

<VirtualHost static.localhost>
ServerName static.localhost
RewriteEngine On
RewriteRule ^http://static\.localhost/ http://app.localhost/ [L]
</VirtualHost>

To test these settings with your application, it’s possible to combine them with the reverse proxy of mod_proxy and directly access your application from a local installation of Apache without touching anything of your configuration. Happy benchmarking!

Downside

  • Every response needs to be changed, which is a waste of ressources compared to an application where an image domain is automatically set.
  • SSL may take more effort
  • Expressions to transform static paths are more complicated in real life. Think of absolute and relative paths, unorganised folder structures and items referenced in css and js code.
  • mod_substitute may cause some headaches, as it doesn’t always work as expected from a regular expression.