Speedup UI by using CSS sprites and etags/expires/deflate for static files

thomascube

2009-05-28 d7f49d64d3e2d808e5fb037faef53ff5a5510909

Speedup UI by using CSS sprites and etags/expires/deflate for static files

 .htaccess

@@ -28,6 +28,22 @@
RewriteEngine On
RewriteRule ^favicon.ico$ skins/default/images/favicon.ico
</IfModule>
 

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
</IfModule>

<IfModule mod_headers.c>
# replace 'append' with 'merge' for Apache version 2.2.9 and later
Header append Cache-Control public env=!NO_CACHE
</IfModule>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month"
</IfModule>

FileETag MTime

Order deny,allow
Allow from all

 CHANGELOG

@@ -1,6 +1,7 @@
CHANGELOG RoundCube Webmail
===========================

- Speedup UI by using CSS sprites and etags/expires/deflate in Apache config (#1484858,#1485800)
- Support UID EXPUNGE: remove only moved/deleted messages
- Add drag cancelling with ESC key (#1484344)
- Support initial identity name from virtuser_query (#1484003)

 INSTALL

@@ -75,6 +75,11 @@
an example how you can setup the sqlite.db for roundcube:

# sqlite -init SQL/sqlite.initial.sql sqlite.db
Loading resources from SQL/sqlite.initial.sql
SQLite version 2.8.16
Enter ".help" for instructions
sqlite> .exit
# chmod o+rw sqlite.db

Make sure your configuration points to the sqlite.db file and that the
webserver can write to the file and the directory containing the file.
@@ -119,3 +124,80 @@
please refer to the instructions in UPGRADING guide.


OPTIMISING
==========

There are two forms of optimisation here, compression and caching, both aimed
at increasing an end user's experience using RoundCube Webmail. Compression
allows the static web pages to be delivered with less bandwidth. The index.php
of RoundCube Webmail already enables compression on its output. The settings
below allow compression to occur for all static files. Caching sets HTTP 
response headers that enable a user's web client to understand what is static
and how to cache it.

The caching directives used are:
 * Etags - sets at tag so the client can request is the page has changed
 * Cache-control - defines the age of the page and that the page is 'public'
   This enables clients to cache javascript files that don't have private 
   information between sessions even if using HTTPS. It also allows proxies
   to share the same cached page between users.
 * Expires - provides another hint to increase the lifetime of static pages.

For more information refer to RFC 2616.

Side effects:
-------------
These directives are designed for production use. If you are using this in
a development environment you may get horribly confused if your webclient
is caching stuff that you changed on the server. Disabling the expires 
parts below should save you some grief.

If you are changing the skins, it is recommended that you copy content to 
a different directory apart from 'default'.

Apache:
-------
To enable these features in apache the following modules need to be enabled:
 * mod_compress
 * mod_expire
 * mod_headers

The optimisation is already included in the .htaccess file in the top 
directory of your installation.

If you are using Apache version 2.2.9 and later, in the .htaccess file
change the 'append' word to 'merge' for a more correct response. Keeping
as 'append' shouldn't cause any problems though changing to merge will 
eliminate the possibility of duplicate 'public' headers in Cache-control.

Lighttpd:
---------
With Lightty the addition of Expire: tags by mod_expire is incompatible with
the addition of "Cache-control: public". Using Cache-control 'public' is 
used below as it is assumed to give a better caching result.

Enable modules in server.modules:
    "mod_setenv"
    "mod_compress"

Mod_compress is a server side cache of compressed files to improve its performance.

$HTTP["host"] == "www.example.com" {

    static-file.etags = "enable"
    # http://redmine.lighttpd.net/projects/lighttpd/wiki/Etag.use-mtimeDetails
    etag.use-mtime = "enable"

    # http://redmine.lighttpd.net/projects/lighttpd/wiki/Docs:ModSetEnv
    $HTTP["url"] =~ "^/roundcubemail/(plugins|skins|program)" {
        setenv.add-response-header  = ( "Cache-Control" => "public, max-age=2592000")
    }

    # http://redmine.lighttpd.net/projects/lighttpd/wiki/Docs:ModCompress
    # set compress.cache-dir to somewhere outside the docroot.
    compress.cache-dir   = var.statedir + "/cache/compress"

    compress.filetype = ("text/plain", "text/html", "text/javascript", "text/css", "text/xml", "image/gif", "image/png")
}



 skins/default/addresses.css

@@ -171,8 +171,7 @@
  color: #333;
  font-size: 11px;
  font-weight: bold;
  background-color: #EBEBEB;
  background-image: url(images/listheader_aqua.gif);
  background: url('images/listheader.gif') top left repeat-x #CCC;
  white-space: nowrap;
}


 skins/default/common.css

@@ -151,15 +151,13 @@
  z-index: 2;
}

#taskbar a,
#taskbar a:active,
#taskbar a:visited
#taskbar a
{
  font-size: 11px;
  color: #666666;
  text-decoration: none;
  padding: 6px 14px 6px 27px;
  background-repeat: no-repeat;
  background: url('images/taskicons.gif') no-repeat;
}

#taskbar a:hover
@@ -167,24 +165,24 @@
  color: #333333;
}

a.button-mail
#taskbar a.button-mail
{
  background-image: url(images/buttons/mail.gif);
  background-position: 0 0;
}

a.button-addressbook
#taskbar a.button-addressbook
{
  background-image: url(images/buttons/addressbook.gif);
  background-position: 0 -25px;
}

a.button-settings
#taskbar a.button-settings
{
  background-image: url(images/buttons/settings.gif);
  background-position: 0 -50px;
}

a.button-logout
#taskbar a.button-logout
{
  background-image: url(images/buttons/logout.gif);
  background-position: 0 -75px;
}


@@ -203,15 +201,15 @@
{
  width: 400px;
  margin: 0px auto;
  height: 24px;
  min-height: 24px;
  height: 22px;
  min-height: 22px;
  padding: 8px 10px 8px 46px;
}

#message div.notice,
#remote-objects-message
{
  background: url(images/display/info.png) 6px 3px no-repeat;
  background: url('images/display/icons.png') 6px 3px no-repeat;
  background-color: #F7FDCB;
  border: 1px solid #C2D071;
}
@@ -219,21 +217,21 @@
#message div.error,
#message div.warning
{
  background: url(images/display/warning.png) 6px 3px no-repeat;
  background: url('images/display/icons.png') 6px -97px no-repeat;
  background-color: #EF9398;
  border: 1px solid #DC5757;
}

#message div.confirmation
{
  background: url(images/display/confirm.png) 6px 3px no-repeat;
  background: url('images/display/icons.png') 6px -47px no-repeat;
  background-color: #A6EF7B;
  border: 1px solid #76C83F;
}

#message div.loading
{
  background: url(images/display/loading.gif) 6px 3px no-repeat;
  background: url('images/display/loading.gif') 6px 3px no-repeat;
  background-color: #EBEBEB;
  border: 1px solid #CCCCCC;
}
@@ -274,8 +272,7 @@
  color: #333;
  font-size: 11px;
  font-weight: bold;
  background-color: #EBEBEB;
  background-image: url(images/listheader_aqua.gif);
  background: url('images/listheader.gif') top left repeat-x #CCC;
}

/***** common table settings ******/
@@ -287,8 +284,7 @@
  vertical-align: middle;
  border-bottom: 1px solid #999999;
  color: #333333;
  background-color: #EBEBEB;
  background-image: url(images/listheader_aqua.gif); 
  background: url('images/listheader.gif') top left repeat-x #CCC;
  font-size: 11px;
  font-weight: bold;
}

 skins/default/ie6hacks.css

@@ -5,6 +5,15 @@
  behavior: url('skins/default/pngbehavior.htc');
}

#message div.notice,
#message div.error,
#message div.warning,
#message div.confirmation,
#remote-objects-message
{
  background-image: url(images/display/icons.gif);
}

ul.toolbarmenu li
{
  width: 130px;
@@ -15,4 +24,7 @@
  background-image: url('images/messageactions.gif');
}


#mailboxlist li
{
  background-image: url('images/icons/folders.gif');
}

 skins/default/images/buttons/addressbook.gif

Binary files differ

 skins/default/images/buttons/addressbook.png

Binary files differ

 skins/default/images/buttons/inbox_sel.png

 skins/default/images/buttons/mail.gif

Binary files differ

 skins/default/images/buttons/mail.png

Binary files differ

 skins/default/images/buttons/settings.gif

Binary files differ

 skins/default/images/display/confirm.png

Binary files differ

 skins/default/images/display/icons.gif

 skins/default/images/display/icons.png

 skins/default/images/display/info.png

Binary files differ

 skins/default/images/display/warning.png

Binary files differ

 skins/default/images/icons/folder-closed.png

Binary files differ

 skins/default/images/icons/folder-drafts.png

Binary files differ

 skins/default/images/icons/folder-inbox.png

Binary files differ

 skins/default/images/icons/folder-junk.png

Binary files differ

 skins/default/images/icons/folder-open.png

Binary files differ

 skins/default/images/icons/folder-sent.png

Binary files differ

 skins/default/images/icons/folder-trash.png

Binary files differ

 skins/default/images/icons/folders.gif

 skins/default/images/icons/folders.png

 skins/default/images/icons/sort.gif

 skins/default/images/listheader.gif

 skins/default/images/listheader_aqua.gif

Binary files differ

 skins/default/images/listheader_dark.gif

Binary files differ

 skins/default/images/listheader_light.gif

Binary files differ

 skins/default/images/sort_asc.gif

Binary files differ

 skins/default/images/sort_desc.gif

Binary files differ

 skins/default/images/taskicons.gif

 skins/default/mail.css

@@ -341,8 +341,7 @@
  height: 12px;
  margin: 0;
  padding: 3px 10px 4px 10px;
  background-color: #EBEBEB;
  background-image: url(images/listheader_aqua.gif); 
  background: url('images/listheader.gif') top left repeat-x #CCC;
  border-bottom: 1px solid #999;
  color: #333333;
  font-size: 11px;
@@ -378,8 +377,7 @@
  display: block;
  position: relative;
  font-size: 11px;
  background: url(images/icons/folder-closed.png) no-repeat;
  background-position: 5px 1px;
  background: url('images/icons/folders.png') 5px 1px no-repeat;
  border-bottom: 1px solid #EBEBEB;
}

@@ -401,37 +399,37 @@

#mailboxlist li div.collapsed
{
  background: url(images/icons/collapsed.png) bottom right no-repeat;
  background: url('images/icons/collapsed.png') bottom right no-repeat;
}

#mailboxlist li div.expanded
{
  background: url(images/icons/expanded.png) bottom right no-repeat;
  background: url('images/icons/expanded.png') bottom right no-repeat;
}

#mailboxlist li.inbox
{
  background-image: url(images/icons/folder-inbox.png);
  background-position: 5px -15px;
}

#mailboxlist li.drafts
{
  background-image: url(images/icons/folder-drafts.png);
  background-position: 5px -31px;
}

#mailboxlist li.sent
{
  background-image: url(images/icons/folder-sent.png);
  background-position: 5px -47px;
}

#mailboxlist li.junk
{
  background-image: url(images/icons/folder-junk.png);
  background-position: 5px -63px;
}

#mailboxlist li.trash
{
  background-image: url(images/icons/folder-trash.png);
  background-position: 5px -79px;
}

#mailboxlist li a
@@ -537,8 +535,7 @@
  vertical-align: middle;
  border-bottom: 1px solid #999999;
  color: #333333;
  background-color: #EBEBEB;
  background-image: url(images/listheader_aqua.gif); 
  background: url('images/listheader.gif') top left repeat-x #CCC;
  font-size: 11px;
  font-weight: bold;
}
@@ -546,17 +543,17 @@
#messagelist thead tr td.sortedASC,
#messagelist thead tr td.sortedDESC
{
  background-image: url(images/listheader_dark.gif); 
  background-position: 0 -20px;
}

#messagelist thead tr td.sortedASC a
{
  background: url(images/sort_asc.gif) top right no-repeat;
  background: url('images/icons/sort.gif') right 0 no-repeat;
}

#messagelist thead tr td.sortedDESC a
{
  background: url(images/sort_desc.gif) top right no-repeat;
  background: url('images/icons/sort.gif') right -14px no-repeat;
}

#messagelist thead tr td a

 skins/default/settings.css

@@ -244,8 +244,7 @@
  color: #333333;
  font-size: 11px;
  font-weight: bold;
  background-color: #EBEBEB;
  background-image: url(images/listheader_aqua.gif); 
  background: url('images/listheader.gif') top left repeat-x #CCC;
}

div.settingsbox