Speed Comparison - optimising your forum for speed

[Martin_K]

http://gtmetrix.com/ gives an interesting analysis of your site/forum.

For fun I compared http://phpbb.com with http://www.rmcgirr83.org with http://www.phpbb3bbcodes.com/ with http://opgo.co.uk/forum. I am working on improving my site score, and will post up the new score when everything has been improved.

Screen Shot 2013-02-01 at 11.14.21.jpg

If you analyse your own site a number of recommendations are made, from using image sprites, putting javascript in the footer instead of the footer, combing javascript files, combining css files, minimising both, and many more suggestions, some easy to implement, others harder, or not practical.

Sprites aren't easy, but they can dramatically reduce http requests, just for your info someone has set up a development site using sprites for the main standard phpbb images: http://www.midaym.com/devbb/

Just one question, what javascript is absolutely necessary to go in the header, and what can be moved to the footer? Putting javascript in the footer is probably one of the easiest things you can do to speed up page loads, without spending out on a more expensive server plan. This is what Yahoo performance team say about the benefits of this:

The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.

Other useful tools and pages:

• Yahoo exceptional performance site: http://developer.yahoo.com/performance/
• Image compressor: http://www.smushit.com/ysmush.it/
• CSS minifiers/compressors/tidiers: 11 Useful Tools To Check, Clean & Optimize Your CSS File
• (YUI Compressor 2.4.7.) Online JavaScript/CSS Compression Using YUI Compressor

You could use one tool to minify css, then another to beautify and expand, if you want to edit it again, or keep a backup.

Isn't it time for phpbb mod writers to start picking of all of the low hanging fruit for speed gains, and for mod users to request and think about getting the most out of their forums?

[Stoker]

Enabling mod_header and mod_expire is probably the best boost you can give.
Got quite a lot here by doing it.

[Martin_K]

Can you explain what mod_header and mod_expire do, and how to implement? A google search just left me confused.

Also when I switched on gzip compression, everything got f'cked up. I suspect Bluehost already runs some kind of compression automatically on html, but not css and javascript.

Sprites are coming to phpbb in version 3.1. Arty, http://www.artodia.com already uses sprites in his styles. I'd install one of his styles, as they look good, but I think there will be a lot of work taking my prosilver mods and customisation into a new style. I tried sprites for icons in a drop down menu, which works fine for all Mac browsers, but went horribly wrong in IE7 and IE8.

It would be great if someone could do a sprite mod for pre 3.1 and font replacement of small icons with font characters would also be a step forwards to reducing http requests and overhead for phpbb.

Apart from this I think the biggest gains are moving js into footer, minimising js and cs and combining js into files, plus having js only load on the pages that actually need them.

[Stoker]

Its an apache module for the server. Maybe you can get your host to install them?
i did it myself, but i also have my own server.

css sprites is more style related than directly phpbb related.
I think the better solution would be using less images and instead style it with css and using signs.

[Martin_K]

I've done a post on phpbb styles forum: Using Font Awesome as small icon replacement.

This could be a way to speed up page loads, by reducing http requests and get rid of some the scrappy little icons phpbb and mod writers provide and replace with smoother looking, scalable fonts as icons.

Of course sprites and icon fonts don't do much for the regular visitor as these images will get cached by the browsers to speed page loads, but will make a difference for new visits.

[Stoker]

Just tested the mobile and seo theme by arty.
Damn it is fast!

[Nully]

I understand nothing.
I have 55 components wich are not cookie-free. What does it mean ?
And how to

Defer parsing JavaScript to reduce blocking of page rendering.
jquery.min.js
totemsticker.min.js

[Martin_K]

Not sure about the cookie-free components, so can only guess, that they may be processes or scripts that alter the board cookies. Maybe this is one aspect we can't do much about, but accept that each cookie 'call' will have a small impact on speed.

Defer parsing JavaScript to reduce blocking of page rendering.
jquery.min.js
totemsticker.min.js

This is essentially about javascript in the header that will be loaded as or before the html loads, Js slows thing down, there is a way to defer js loading until the html has loaded, but the easiest way is to put as much of the js in the footer as possible, so the js loads after the html does. Only leave in the header any js essential to page display, or any feature that the user might start to try to use before the page is fully loaded.

Stoker may be able to tell you more about totemsticker.

Not having a dig at Stoker here, there are mod writers who in the past have given little consideration to the speed impact of placing loads of javascript in the header, when it may not be needed there. Good practice would be to ensure that only js that is really needed in the header goes there, otherwise have it all go in the footer. Also IF statements to ensure the js is only run for the groups, feature, page(s) that need it.

All these things have a small impact on their own, cumulatively they add up. Keeping things snappy gets harder the more and more mods you add.

[Nully]

Thank you Martin_K for your long reply and explanation.
I'l wait for Stoker about the .js

[Stoker]

First test is using m heavy modded SE Pro style:

1.png

Second test is using Artys Mobile style:

2.png