Jump to content

Invision Community Blog


Managing successful online communities

Matt
 

4.4: Turbo charging loading speeds

It might seem a little odd starting a blog on increasing Invision Community's speed with the word "lazy",  but I'll explain why this is a good word for performance shortly.

Earlier this year, Google announced that page speed is a ranking factor.

Simply put, if your site is slow, it will be ranked lower in Google's search results.

It is always a challenge making a large application like Invision Community as efficient as possible per page load. A single Invision Community page can pull in widgets from multiple applications as well as a lot of user-generated content with attachments, movies and images used heavily. 

This is where being lazy helps.

Lazy loading is a method by which attachments, embeds and images are not loaded by default. They are only loaded when the viewer scrolls down enough to make them visible.

This allows the page to load a good deal faster now it doesn't have to load megabytes of images before the page is shown as completely rendered.

I was going to take a fancy video showing it in action, but it's hard to capture as the system loads the media just before you get to it, so it looks fairly seamless, even with sluggish connections.

blank.thumb.jpg.47f7560ceb09fa6206f48eac81151829.jpg

Not the most dynamic image, but this shows the placeholder retains the size of the image

In addition to image attachments, we have also added this lazy loading to maps and Twitter emoji images.

Improving non-image attachments
Once we had implemented the lazy loading framework, an area we wanted to improve was non-image attachments.

We have listened to a lot of the feedback we had on this area, and have now made it very clear when you add an attachment into a post. We've even returned the download count now it's being loaded on demand.

lazy1.thumb.jpg.0a48f6a4a814a93228e3d6bcf20c8a05.jpg

Using attachments when posting

All the letters
When we first implemented the letter avatars in 4.3, we discussed whether to use CSS styling or use an image.

We decided to go with an image as it was more stable over lots of different devices, including email.

We've revisited this in 4.4, and switched the letter avatars to SVG, which are much faster to render now that the browser doesn't have to load the image files.

Other performance improvements
We've taken a pass at most areas with an eye for performance, here is a list of the most significant items we've improved.

  • Several converter background tasks have been improved, so they work on less data
  • Duplicate query for fetching clubs was removed in streams
  • Notifications / follower management has been improved
  • Member searches have been sped up (API, ACP live search, member list in ACP, mentions, etc.).
  • Stream performance has been improved
  • UTF8 conversions have been sped up
  • Elasticsearch has been sped up by using pre-compiled queries and parameterisation, as well as the removal of view filtering (and tracking)
  • HTTP/2 support with prefetch/preload has been added
  • Several PHP-level performance improvements have been made
  • Implemented rel=noopener when links open a new window (which improves browser memory management)
  • Several other performance improvements for conversions were implemented that drastically reduce conversion time
  • IP address lookups now fetch IP address details from us en-masse instead of one request per address
  • Cache/data store management has been streamlined and centralised for efficiency
  • Many background tasks and the profile sync functionality have all been improved for performance
  • Brotli compression is now supported automatically if the server supports it
  • Redis encryption can now be disabled if desired, which improves performance

Phew, as you can see, we've spent a while tinkering under the hood too.

We'd love to hear your thoughts. Let us know below!

This blog is part of our series introducing new features for Invision Community 4.4.


Comments



Recommended Comments

On 11/16/2018 at 12:47 PM, Alismora said:

I've been catching up on all the 4.4 updates and I'm intrigued by some of the new changes coming, however, I did have a question about 4.4 in general.  The first update stated it was set to release by the end of 2018, but I haven't seen mention of it in the others.  Is it still on track or will we see it pushed to 2019?

We won’t quite make it this year but will have a public alpha and/or it installed here on our site in the next few days.

Share this comment


Link to comment
Share on other sites
On 12/11/2018 at 6:56 AM, Mr 13 said:

Still can't get why should we use something in around 300 KB when it could be implemented in around 1 KB. Mobile data is expensive and slow in most cities of the world, even in america, isn't it?

A little addition: Just in case you'll change your mind about raster images in backgrounds, here is some SVG examples:

svg.7z (yes 3 backgrounds, sized just in 2 kb in compressed state).

Share this comment


Link to comment
Share on other sites
1 hour ago, dayh said:

Does this mean the end of the page jumping about whilst loading pages with multiple embedded tweets in Safari? 🙏

Can't comment on embedded tweets but certainly Twitter timeline embeds are notoriously jumpy in my experience (font sizes randomly changing every second etc), but on any non-IPS web page not just within IPS. They settle down for a while and then you have to remove them again when they start up misbehaving again. 

Share this comment


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  Ask A Question ×