[#XWIKI-2022] Improve page loading times

XWiki Core

Improve page loading times

Created: 21/Jan/08 22:18 Updated: 09/Jul/08 15:36

Component/s:

Templates & User Interface

Affects Version/s:

1.2

Fix Version/s:

1.6 M1

File Attachments:

XWIKI-2022___Improve_page_loading_times.patch (4 kb)

Image Attachments:

1. yslow.png
(24 kb)

Issue Links:

Related

This issue relates to:

~~XWIKI-1642~~ Stylesheets are loaded twice

~~XWIKI-494~~ the skin on the filesystem, should not send no-cache on the header

Date of First Response:

22/Jan/08 12:18

Description

« Hide

Over time the xwiki skins in general have added JS, CSS, images. This is making xwiki pages slow to load as shown by YSlow (see attached image).

What we should do:

Reduce the number of JS to load by moving out JS that are not needed for all pages so that they are loaded on demand
GZip all HTTP response contents
Modify the build to automatically merge all CSS and JS files together in a single file (see http://aciddrop.com/2008/01/03/automatically-join-your-javascript-and-css-into-a-single-file/)
Add expire headers. We need to be careful with this and probably do what yahoo recommends: modify the file names when they change so that clients get the newer versions. Otherwise they'll need to remember to refresh their caches. This can be automated in the build and should be pretty easy especially if we merge all files into a single one.
Minify CSS and JS files

All

Comments

Change History

Sort Order:

Ascending order - Click to sort in descending order

[ Permlink | « Hide ]

Vincent Massol - 21/Jan/08 22:19

I'm scheduling for 1.3M1 for now even though I'm not sure who'll have the time to work on this. It's quite an important issue though hence the move to 1.3M1.

[ Permlink | « Hide ]

Vincent Massol - 21/Jan/08 22:20

Note: The YSlow stats were from the home page of xwiki.org

[ Permlink | « Hide ]

Vincent Massol - 22/Jan/08 08:41

It also seems that for some reason the style.css file is loaded twice for each page invocation. Need to find out why and remove the second loading.

[ Permlink | « Hide ]

Sergiu Dumitriu - 22/Jan/08 12:18

~~XWIKI-1642~~

[ Permlink | « Hide ]

Vincent Massol - 22/Jan/08 22:16

[ Permlink | « Hide ]

Vincent Massol - 29/Jan/08 13:35

Some resource links: http://vandelaydesign.com/blog/css/clean-css-code/

[ Permlink | « Hide ]

Vincent Massol - 31/Jan/08 16:42

The reason style.css is loaded twice is because we have this definition in stylesheet.vm:

<link href="$defaultStyleURL" rel="stylesheet" type="text/css" />
<link href="$defaultStyleURL" rel="stylesheet" type="text/css" title="default" />

This seems to be required (to be validated) because some browsers may not support alternate stylesheets properly... To be investigated.

Reference:
http://www.w3.org/TR/html401/present/styles.html

[ Permlink | « Hide ]

Sergiu Dumitriu - 31/Jan/08 18:23

Again, see the comment on http://jira.xwiki.org/jira/browse/XWIKI-1642

[ Permlink | « Hide ]

Vincent Massol - 04/Feb/08 17:38

An interesting framework to research: Jawr, see http://www.theserverside.com/news/thread.tss?thread_id=48318

[ Permlink | « Hide ]

Vincent Massol - 06/Feb/08 09:13

Interesting loading stats at http://ejohn.org/blog/library-loading-speed/

[ Permlink | « Hide ]

Vincent Massol - 12/Feb/08 10:06

A nice blog on performances: http://www.igvita.com/2008/02/11/nginx-and-memcached-a-400-boost/

[ Permlink | « Hide ]

Jean-Vincent Drean - 25/Feb/08 19:27

javascripts.vm and stylesheets.vm doesn't use XWiki.getSkinFile with the forceSkinAction flag everytime (with this action the response expiration is always set to 1 month). Patch attached.
WDYT ?

[ Permlink | « Hide ]

Sergiu Dumitriu - 25/Feb/08 19:31

I tried to do that once, and I got some velocity exceptions. I think that SkinAction should not parse all the js/css files it sends, but use a request parameter (something like "?parse=true").

[ Permlink | « Hide ]

Sergiu Dumitriu - 29/Feb/08 18:40

This can be applied now, as the parse error has been fixed. See ~~XSALBATROSS-18~~

[ Permlink | « Hide ]

Vincent Massol - 15/Mar/08 10:18

concatenate images into one
lazy loading of js

[ Permlink | « Hide ]

Vincent Massol - 24/Mar/08 19:34

Another link: http://ajaxian.com/archives/yahoo-releases-new-performance-best-practices

[ Permlink | « Hide ]

Vincent Massol - 01/May/08 21:28

http://feeds.feedburner.com/~r/oreilly/radar/atom/~3/281377463/more-on-high-performance-websi.html

Split the initial payload
Load scripts without blocking
Don't scatter scripts
Split dominant content domains
Make static content cookie-free
Reduce cookie weight
Minify CSS
Optimize images
Use iframes sparingly
To www or not to www

[ Permlink | « Hide ]

Vincent Massol - 04/May/08 00:26

Really great slides on http://feeds.feedburner.com/~r/oreilly/radar/atom/~3/281377463/more-on-high-performance-websi.html

[ Permlink | « Hide ]

Jordi Hernandez Sellés - 10/Jun/08 12:33

Hi, I'm the lead developer of Jawr (https://jawr.dev.java.net), which vincent pointed to in a previous comment. If you need any further information to decide wether you should use it, or want me to help out in integrating it let me know. I'll be happy to help