https://www.webpagetest.org/result/1911 ... 95af6d4e6/
The diagram shows the load processes for a first visit to the forum (ie: no cookies set, no files cached). It's interesting stuff.
- The server can have 6 parallel connections downloading stuff, so a maximum of 6 files downloading at the same time.
- This means if you can halve the number of files by amalgamating tiny ones, things go faster.
- Actual HTML only takes 1.1 seconds to download. The rest of the waiting time is all the other crap.
- The first CSS file to download is stylesheet.css. That's the one that wastes a request, because it only contains @import rules for other files (which download much later), so this is all wasted time. If this file was ditched that would save 1/3 of a second right there.
- The second CSS file to download is for the Font Awesome icons, and it holds up a connection for 2/3 of a second. But, it's useless until the actual font file it applies to is loaded, and that isn't downloaded until much later (number 39 on the list). And all it does is make a handful of cute little icons anyway. So font-awesome.min.css is a prime candidate for deferred downloading. It's early place in the queue could be taken by something more immediately useful.
- The next file (theme/en/stylesheet.css) only does one thing. It puts the little diagonal "Online" stripe to the right of your avatar if you're online. To do that, it holds up a connection for half a second. This is rather stupid.
It would make more sense to put that tiny amount of code at the end of one of the later files.
- The next one to hit the queue is cookieconsent.css, which holds up a connection for another half a second. But, the cookie consent form relies on javascript to run, and the javascript won't function until the DOM Content Loaded event, which happens 2.7 seconds later. IOW, this CSS file could be deferred too.
- Buttonmenu.css is up next, and this one is actually useful (does the top site menu bar). Yay!
- The next one is postingbuttons.css. That one isn't required at all on most pages. It's only used when you're actually using the replies editor. It could usefully be removed from the head of the page, and called lower down in the posting template.
- Similar situation for quotethumbnails.css (#8). It's only used when you're inside a thread, so there's no point calling it anywhere else. Same goes for #11 (lightbox.css). Lightbox.css is useless without lightbox.min.js (#20) anyway, so these should ideally only be called inside threads.
- Numbers 9 and 10 (collapsiblecategories.css and boardannouncements.css) are useful early in the game, so probably leave those alone.
- Now we get to the first on the javascript files (jquery.min.js) and apart from the jpg banner it's the biggest file of the lot. For one thing, this beast could have been downloading 0.4 seconds earlier if the less important files before it were rationalised. For another thing, there's a handy trick you can do with javascript files. You can set them to defer:
Code: Select all
<script src="demo_defer.js" defer></script> - The other point is that at the moment I have the javascript for assigning the multiple Prosilver Dark Edition stylesheets after jquery.min.js and some of the other javascript files. If I put it in front that should reduce the "flash of unstyled content" problem with PSDE.
- Normalize.css and the next 10 CSS files are the ones that were called by @import in the stylesheet.css back at #2, but it's only now they get around to beginning to download. Something tells me this is not optimal.
And again, if some can be amalgamated that will free up connections.
- #33 is the one smiley I put in the board announcement, and by itself that blocks a connection for 1/3 of a second. By this time we're out to around 3.4 seconds since first contact, and could easily have knocked that back to under 2 seconds (even with the smiley).
- The rest of the time until completion is images and the Font Awesome font file. Site-logo-mine.gif will be disappearing, to be replaced with text that is part of the banner image.
- The banner itself could be optimised some more, and that could probably knock off another half a second until page completion.
- The remaining images aren't a big deal at this stage.
Edit: Oh yeah, while I think of it, Font Awesome has around 700 icons, and phpBB only uses less than 1/3 of them, so in theory font-awesome.min.css could be cut in size by around 2/3 by getting rid of rules for icons that aren't used. And then the rest of the CSS and javascript files can be minified too, which is not at all difficult and can save even more time.
