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

release-0.6
thomascube 16 years ago
parent fc1102509f
commit d7f49d64d3

@ -28,6 +28,22 @@ php_value mbstring.func_overload 0
RewriteEngine On RewriteEngine On
RewriteRule ^favicon.ico$ skins/default/images/favicon.ico RewriteRule ^favicon.ico$ skins/default/images/favicon.ico
</IfModule> </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 Order deny,allow
Allow from all Allow from all

@ -1,6 +1,7 @@
CHANGELOG RoundCube Webmail 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 - Support UID EXPUNGE: remove only moved/deleted messages
- Add drag cancelling with ESC key (#1484344) - Add drag cancelling with ESC key (#1484344)
- Support initial identity name from virtuser_query (#1484003) - Support initial identity name from virtuser_query (#1484003)

@ -75,6 +75,11 @@ You need sqlite 2 (preferably 2.8) to setup the sqlite db
an example how you can setup the sqlite.db for roundcube: an example how you can setup the sqlite.db for roundcube:
# sqlite -init SQL/sqlite.initial.sql sqlite.db # 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 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. webserver can write to the file and the directory containing the file.
@ -119,3 +124,80 @@ If you already have a previous version of RoundCube installed,
please refer to the instructions in UPGRADING guide. 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")
}

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

@ -151,15 +151,13 @@ img
z-index: 2; z-index: 2;
} }
#taskbar a, #taskbar a
#taskbar a:active,
#taskbar a:visited
{ {
font-size: 11px; font-size: 11px;
color: #666666; color: #666666;
text-decoration: none; text-decoration: none;
padding: 6px 14px 6px 27px; padding: 6px 14px 6px 27px;
background-repeat: no-repeat; background: url('images/taskicons.gif') no-repeat;
} }
#taskbar a:hover #taskbar a:hover
@ -167,24 +165,24 @@ img
color: #333333; 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 @@ a.button-logout
{ {
width: 400px; width: 400px;
margin: 0px auto; margin: 0px auto;
height: 24px; height: 22px;
min-height: 24px; min-height: 22px;
padding: 8px 10px 8px 46px; padding: 8px 10px 8px 46px;
} }
#message div.notice, #message div.notice,
#remote-objects-message #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; background-color: #F7FDCB;
border: 1px solid #C2D071; border: 1px solid #C2D071;
} }
@ -219,21 +217,21 @@ a.button-logout
#message div.error, #message div.error,
#message div.warning #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; background-color: #EF9398;
border: 1px solid #DC5757; border: 1px solid #DC5757;
} }
#message div.confirmation #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; background-color: #A6EF7B;
border: 1px solid #76C83F; border: 1px solid #76C83F;
} }
#message div.loading #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; background-color: #EBEBEB;
border: 1px solid #CCCCCC; border: 1px solid #CCCCCC;
} }
@ -274,8 +272,7 @@ a.button-logout
color: #333; color: #333;
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
background-color: #EBEBEB; background: url('images/listheader.gif') top left repeat-x #CCC;
background-image: url(images/listheader_aqua.gif);
} }
/***** common table settings ******/ /***** common table settings ******/
@ -287,8 +284,7 @@ table.records-table thead tr td
vertical-align: middle; vertical-align: middle;
border-bottom: 1px solid #999999; border-bottom: 1px solid #999999;
color: #333333; color: #333333;
background-color: #EBEBEB; background: url('images/listheader.gif') top left repeat-x #CCC;
background-image: url(images/listheader_aqua.gif);
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
} }

@ -5,6 +5,15 @@ img
behavior: url('skins/default/pngbehavior.htc'); 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 ul.toolbarmenu li
{ {
width: 130px; width: 130px;
@ -15,4 +24,7 @@ ul.toolbarmenu li
background-image: url('images/messageactions.gif'); background-image: url('images/messageactions.gif');
} }
#mailboxlist li
{
background-image: url('images/icons/folders.gif');
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 788 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 833 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 513 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 662 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 511 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 586 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 800 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 796 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 629 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 775 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 538 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 270 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 280 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 261 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 123 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 121 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

@ -341,8 +341,7 @@ td.formlinks a:visited
height: 12px; height: 12px;
margin: 0; margin: 0;
padding: 3px 10px 4px 10px; padding: 3px 10px 4px 10px;
background-color: #EBEBEB; background: url('images/listheader.gif') top left repeat-x #CCC;
background-image: url(images/listheader_aqua.gif);
border-bottom: 1px solid #999; border-bottom: 1px solid #999;
color: #333333; color: #333333;
font-size: 11px; font-size: 11px;
@ -378,8 +377,7 @@ td.formlinks a:visited
display: block; display: block;
position: relative; position: relative;
font-size: 11px; font-size: 11px;
background: url(images/icons/folder-closed.png) no-repeat; background: url('images/icons/folders.png') 5px 1px no-repeat;
background-position: 5px 1px;
border-bottom: 1px solid #EBEBEB; border-bottom: 1px solid #EBEBEB;
} }
@ -401,37 +399,37 @@ td.formlinks a:visited
#mailboxlist li div.collapsed #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 #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 #mailboxlist li.inbox
{ {
background-image: url(images/icons/folder-inbox.png); background-position: 5px -15px;
} }
#mailboxlist li.drafts #mailboxlist li.drafts
{ {
background-image: url(images/icons/folder-drafts.png); background-position: 5px -31px;
} }
#mailboxlist li.sent #mailboxlist li.sent
{ {
background-image: url(images/icons/folder-sent.png); background-position: 5px -47px;
} }
#mailboxlist li.junk #mailboxlist li.junk
{ {
background-image: url(images/icons/folder-junk.png); background-position: 5px -63px;
} }
#mailboxlist li.trash #mailboxlist li.trash
{ {
background-image: url(images/icons/folder-trash.png); background-position: 5px -79px;
} }
#mailboxlist li a #mailboxlist li a
@ -537,8 +535,7 @@ body.messagelist
vertical-align: middle; vertical-align: middle;
border-bottom: 1px solid #999999; border-bottom: 1px solid #999999;
color: #333333; color: #333333;
background-color: #EBEBEB; background: url('images/listheader.gif') top left repeat-x #CCC;
background-image: url(images/listheader_aqua.gif);
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
} }
@ -546,17 +543,17 @@ body.messagelist
#messagelist thead tr td.sortedASC, #messagelist thead tr td.sortedASC,
#messagelist thead tr td.sortedDESC #messagelist thead tr td.sortedDESC
{ {
background-image: url(images/listheader_dark.gif); background-position: 0 -20px;
} }
#messagelist thead tr td.sortedASC a #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 #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 #messagelist thead tr td a

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

Loading…
Cancel
Save