Skip to main content
Topic: Opinion on how to reduce percived page loading time (Read 3409 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Opinion on how to reduce percived page loading time

This is something I thought just few seconds ago, so I have a rough idea of what I would obtain, and I'm using this also not to forget about it... xD
At the moment I'm thinking to use it just on one site and not put it into "core" because it's a specific case, though if it works the way I want,  it may be interesting.

One of the most annoying things is to open a page and have to wait in front of a white (or grey) screen the page that should load, but it doesn't: the time seems to stop and after half a second you are already annoyed.
Now, on a site I'm working on, this happens. Not frequently, but there are situations where it happens rather frequently. The annoyed person then reload the page and adds another request.
I cached what was possible, but most of the pages are just a "one hit" or so,so caching doesn't help much, because the first time the query has to be completed and since the user rarely reload the same page, the cached query is mostly useless.

So, what I was thinking?
Nothing that would solve entirely the issue, just something that would reduce it a bit.
Let's imagine to keep a track of the "slow pages", for example pages that take more than 5 seconds to load, if a user requests one of these pages, instead of serving the page directly we provide a "intermediary" page with a loading gif or something that shows the page is actually loading. With javascript we check the status of the "real" page, and when the real page is ready we simply do a refresh.

What's the advantage?
The user is not staring at a white screen waiting for something that may happens or not (and he doesn't know), he is now looking "at the site" and at something that is telling him "the page will be ready soon".

What's the truth?
We have no idea when the page will be ready, we may have a rough estimate based on previous page loads.
The page will likely take more to load (simply because we have to monitor through a javascript on finite time periods), but having a "real" page should convince the user the site is not doomed.
It's just a trick in fact.

Disadvantages?
Yes, I know what you want to say: to load a page you are pushing out several hundreds of page loads with all the hassles and sever load necessary to load everything.
Well, I was thinking to avoid this sending a cache id to the client, load the bare minimum things necessary to access the cache (that in 2.1 and what I'm working on basically means Settings.php and if it is not cached $modSettings) and check if the id has been generated.

Well, it's something I came up this morning just after wake up, so I may have missed something.
I'll leave it here and see. If I finish another thing I'm working on I'll give it a try. :P

Re: Opinion on how to reduce percived page loading time

Reply #1

Quick question. Do you witness the white page problem at wedge.or, too..?
I spent months refining my caching process and was curious to see if anyone had the same feeling as I do, I.e. it's rock solid.

Re: Opinion on how to reduce percived page loading time

Reply #2

What causes the page load delay then? The request itself? The server reaction time? The connection in your home?

If theres a persistent delay I would rather investigate those, rather than adding intermediary steps to load a single page. IMHO if the page needs that kind of attention, then its something wrong with it.

EDIT: I should read more carefully :P , my response wasn't really appropiate since you are talking about a placeholder on those times it delays for unknown reasons...

Re: Opinion on how to reduce percived page loading time

Reply #3

Sometimes things like HTTP requests, the use of opacity, large javascript files, too many page elements(I think over 800?), etc, etc, will slow down the BROWSER, which has nothing to do with the server, caching, or anything else for that matter. Firefox is a resource hog, and this issue is common on weak machines. I have a weak machines :/

I'm not saying this is the problem here, I'm just throwing out ideas.

Nowadays I put a body loader(overlay) in my designs to indicate that the page is still loading. I do this because of mobile devices which often have slow or weak-signal connections. I haven't gotten much feedback on it yet...

Re: Opinion on how to reduce percived page loading time

Reply #4

Actually that blank body page is caused by JS/CSS/Images download (And no im not insane)
Now most browsers have a standard to have only two opened connection to same domain at the same time and that is one reason we sometime experience page load delay.
The second main reason is rendering CSS (Trust me even today's computers take some time)

Long story short people are aware of that and have a few tricks

1.Not serving everything from same domain but to create few sub-domains to allow more connections/requests
2.Placing javascript files right above closing <\body> tag (These way we first load and render CSS + content, and only than downloading and dealing with JS. Processing JS is fast but downloading it...)
3.Caching pages/css/js at browser level (Not  familiar with these but every modern browser support it or even does it automatically)

Try with placing JS files right before closing body, if im right it will reduce some time (Just remember to clear cache or use incognito tab :P)

Re: Opinion on how to reduce percived page loading time

Reply #5

Eh, if you're using <= IE7. More modern browsers allow many more parallel connections. If I'm not mistaken, most are between 6-8.

Re: Opinion on how to reduce percived page loading time

Reply #6

Quote from: groundup – Eh, if you're using <= IE7. More modern browsers allow many more parallel connections. If I'm not mistaken, most are between 6-8.
Just googled it and yes you are right but its still a point,
We have images in theme + icons + 10 posts means ~10 avatars so its still allot of things to download excluding content...

Re: Opinion on how to reduce percived page loading time

Reply #7

The worst offender is going to be the editor ... each smiley and each bbc button is an image ... probably close to 50.  I'm sure there is a way to sprite those and and still deal with button and smiley order, and button and smiley active state etc, at least for whats in the core.  Then allow addons to add other as non-sprite should they want.  There is just a lot going on with the editor :P

Re: Opinion on how to reduce percived page loading time

Reply #8

Expires and max-age headers should eliminate the need to even send a HTTP request.

On the post page of this site, I am seeing max-age=0 on the smileys, which means it has to revalidate every time. If you allow caching, it should be faster. The BBC icons seem to be cached though. Not sure what's up with that.

Request headers:
Code: [Select]
GET /smileys/default/cheesy.gif HTTP/1.1
Host: www.elkarte.net
Connection: keep-alive
Cache-Control: max-age=0
Accept: image/webp,*/*;q=0.8
If-Modified-Since: Thu, 17 Oct 2013 22:04:05 GMT
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36
Referer: http://www.elkarte.net/index.php?action=post;board=1.0
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Cookie: (you don't need that)

Response headers:
Code: [Select]
HTTP/1.1 304 Not Modified
Server: nginx
Date: Wed, 11 Dec 2013 16:52:00 GMT
Last-Modified: Thu, 17 Oct 2013 22:04:05 GMT
Connection: keep-alive
Keep-Alive: timeout=300
Expires: Wed, 08 Jan 2014 16:52:00 GMT
Cache-Control: max-age=2419200
Pragma: public
Cache-Control: public, must-revalidate, proxy-revalidate

Edit: I did a hard refresh to update all of my cache headers. Looks like smileys are working like the normal BBC icons and everything is caching without additional HTTP requests. Good job.

Re: Opinion on how to reduce percived page loading time

Reply #9

Ice,
Speed optimizations will usually not result in something obvious once you get through the first page load. You can look at wedge.org which has embedded icons, proper js/CSS order and other niceties. Once the page is loaded, you won't notice it's particularly faster than here. Still, I devoted a lot of time on that first page load eheh.

Re: Opinion on how to reduce percived page loading time

Reply #10

Quote from: Nao – Ice,
Speed optimizations will usually not result in something obvious once you get through the first page load. You can look at wedge.org which has embedded icons, proper js/CSS order and other niceties. Once the page is loaded, you won't notice it's particularly faster than here. Still, I devoted a lot of time on that first page load eheh.

Actually i dont care about that "blank screen" for a first time loading...its not something that will kill people, you wait for a moment first time and than its all ok...Emanuele asked for our opinion on how to reduce loading time and i just expressed what i think, why it happens and possible way to fix it (Or at least try to fix it).

If you ask me i would go for a push state everywhere and kill the server :D

Re: Opinion on how to reduce percived page loading time

Reply #11

The two best ways to reduce perceived time drastically is to reduce HTTP requests & move JS to the bottom of the document.

Reducing HTTP requests can be done with sprites, data URI(which I use alot), or combining JS/CSS files. Each of the methods will most likely actually increase file sizes, but the perceived page load is quicker as the page loads more progressively because the browser makes less handshakes to make with the server. Sprites, JS/CSS get catached by the browser and loads faster afterwards, while Data URI has no HTTP request, but cannot be cached. Use Data URI only on small files, not large ones. Like using the Data URI of a sprite would be stupid, but using it for a simple single icon would be more efficient and worth the trade off. Of course, you wouldn't want to use Data URI on anything that may be customized by someone else.

Having JavaScript at the top or bottom doesn't have a change the time on complete page load. However, if effects perceived page load because when having JS anywhere except at the bottom causes the page to hang until it's loaded. Where having it at the bottom you still see the page loading progressively and makes the user think the page is loading faster.

Things like Ad's or social widgets can actually choke your perceived speed. So it's always best to hide/load them outside the viewport, or hide them within a collapsible/expandable parent.

Re: Opinion on how to reduce percived page loading time

Reply #12

Quote from: Xarcell – The two best ways to reduce perceived time drastically is to reduce HTTP requests & move JS to the bottom of the document.
Requests yes. JS, not so much. As I said above, I've seen it to be relatively wrong on Wedge. It's the loading time that is precious here, not the JS processing time, so after the first page load you could theoretically load your JS in the header, and you won't notice a difference, except in oldIE.

QuoteReducing HTTP requests can be done with sprites, data URI(which I use alot), or combining JS/CSS files.
Haven't had a single complain in the 3 years Wedge has been doing this. Data URI especially is very powerful.

Quotebut the perceived page load is quicker as the page loads more progressively because the browser makes less handshakes to make with the server. Sprites, JS/CSS get catached by the browser and loads faster afterwards, while Data URI has no HTTP request, but cannot be cached.
Oh, in my case they're cached... You probably didn't dig deep enough ;)

QuoteThings like Ad's or social widgets can actually choke your perceived speed. So it's always best to hide/load them outside the viewport, or hide them within a collapsible/expandable parent.
Or have them in an iframe, etc.

Re: Opinion on how to reduce percived page loading time

Reply #13

Well... the question was not really related to javascript or css, both may do a "huge" difference, but they do any kind of difference only when they are served "immediately", the scenario I explained in my first message (that is a scenario I'm facing right now) is that queries are slow and they take about 5+ seconds to generate a page **server-side**, so from the moment you click on a link to the moment php actually starts to send out the page to the browser there is a gap of at least 5 seconds.
This cannot be improved by any kind of js/css minification or spriting, because is mysql that is lagging due to the terrible amount of work it has to do...

Re: Opinion on how to reduce percived page loading time

Reply #14

What pages are you talking about?

If you are doing that intermediate thing, you are requiring Javascript. If you are requiring JS, just load the content via AJAX. No need to poll the server, just a JS callback.