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.
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.
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.
