Make the home page lighter

[elondaits]

Currently a full refresh of the home page demands 340 requests for a total of 19 MB and takes up to a full minute to complete.

I'll analyse the different requests currently made and see what improvements can be made in order to:

• Make the site friendlier for mobile devices / connections over cell networks.
• Make the site faster, which will impact positively in its SEO (Google uses loading speed in its algorithms) and use experience.
• Lower the resource load in our hosting.

Since this issue has a lot of aspects to analyze, measure and consider I've created a Trello Board to tackle it:

https://trello.com/b/2tCt5REq

[elondaits]

The Events slider (timeline) in the home page currently loads 186 images, most of which will be never seen and which are somewhat large. Only 45 of these events started during the last year.

As far as I can see the Timeline JS plugin used doesn't support dynamic loading of the images (i.e. loading only as the user browses). It attempts to download and place every image in the timeline. This causes a very large data transfer between the server and client, hits the server with many unnecessary requests and makes the page heavier (RAM-wise) which is very bad for mobile access.

The easiest solution would be to limit the amount of events placed in the timeline... at least the one in the home page. Perhaps to only show:

• Future events
• Ongoing events
• Events which finished in the last... 3 months?

Opinions?

cc: @andreasdanielmatt @christophknoth @konrad-renner

[christophknoth]

@elondaits 3 month should be enough for the front page

[andreasdanielmatt]

yes, that should be fine. We can call the section at the home page "Current and upcoming events" (instead of "events") and keep the last three months as "extra" to review events. Maybe we can add somewhere a button (or small notice) "see all events" which links to the events page too. Maybe there is also an option to count x number of events back (at the moment we have many many events, but sometimes, there are not that many), so we are sure that we never exceed a certain amount of events (at least in the past).

[HexeBianca]

Just making sure, I understood it correctly: You are talking to change the behaviour of the events section at the front page only, right? I like the idea of changeing it to 'current and upcoming events', as Andreas suggested. However, at the event page of the platform, all events should be easily accessible. Would it be acceptable to keep it the way it is there? If not, how about a button to jump back one year?

[elondaits]

Yes, only the home page at the moment. The Timeline plug-in is operating beyond its normal operational parameters in the Events page as well... but at least its users intended to go there. Not every user in the home page want to see the events and they are forced to download 186 images.

Ideally some fix should be applied to the Events page as well... but it won't be easy and as a target for optimization is much less important than the home.

[elondaits]

The home timeline change is done and pending deploy. It cut the total size of the home page from 19MB to around 5MB (only events that finished in the last three months or that are in the future are shown)

[elondaits]

@christophknoth , I sent you new versions of the home page slideshow images which have a higher compression (but no noticeable loss of quality, hopefully) by email. Let me know if I can switch them.

[elondaits]

A new home slideshow has been deployed along with optimized versions of the top rotating gallery images. The size of the home page went down from 21.8MB to 6.5MB (will vary as events are added or removed). These savings not only impact users but also our hosting server, which will have a little less work.