Improve overall performance of the website but especially Blog

[derberg]

Reason/Context

When I access the blog, I cry, like a baby 😄
Website is not fastest but blog performs like a 🐢

Description

• images sizes that can be easily improved with compression on a build level, or maybe Netlify offers something for free. This is an example of an image that has 4MB https://www.asyncapi.com/images/posts/organizing-asyncapi-documents.jpg
• analyze with some widely know page speed tools what quick fixes can be applied
• I don't think we have gzip enabled, must be doublechecked
• MUST HAVE - proper testing of PR, of the size of the images, to throw errors if they are way to big, even for compression
• MUST HAVE - have some validation of performance to make sure it is not getting worse over time again -> https://foo-software-lighthouse-reports.s3.amazonaws.com/lighthouse-report-1583237527152.html as there is out of the box GitHub action ready for that https://github.com/marketplace/actions/lighthouse-check
• MUST HAVE - Start using a CDN. Cloudflare's CDN is a great one and it has a nice API too: https://www.cloudflare.com/cdn/.
• Consider https://blurha.sh/

[orubel]

Store 'blob' object in cache rather than as BLOB. If is text/json/gson/bson/xml/etc, can easily be stored in cache and pulled quickly. BLOB is very slow and not ideal.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 30 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 30 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 30 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[Shofiya2003]

Also, we have to ensure text is displayed during font load. For that we can use font-display:swap in our css, the swap will display unstyled font while the font loads.

[Shofiya2003]

We are using lazy loading to load all the images, can we eagerly load the images above the fold eagerly because sometimes they are rendered late in the page and it increases the perceived load speed.

[Shofiya2003]

The optimization can be done by using the https://www.npmjs.com/package/react-window, to reduce the number of DOM nodes created in the blog due to repeated elements. Increased DOM depths is affecting the speed due to the style calculations.

[Shofiya2003]

These were the suggestions for the blog.
The image loading is a issue in the website too, will first solve that and get the statistics again using lighthouse.

[derberg]

Cloudinary free tier looks good, I would not worry about that. We host AsyncAPI website on Netlify for free too, and use other free services.

I like idea with automated thumbnail generation a lot! Sound like great idea for blog.
We also need transformation on images and cover image on individual articles. Also the same with other places on the website.

So basically the idea is that during build images will be transformed, uploaded to cloudinary and links to images updated to point to new location. Right? If I get it right, please go ahead and give it a try, once it works, I can create official account for AsyncAPI.

great research btw!!!

[Shofiya2003]

@derberg yes you got it right. Will start implementing the solution.
Thank you

[Shofiya2003]

@derberg I made the changes for the blog. Should we first check the performance of the blog and then change the rest of the website?

[derberg]

yup, such approach definitely makes sense

[Shofiya2003]

@derberg opened a PR with the changes need the cloudinary cloudname for deploy to be successful

[Shofiya2003]

@derberg
The solution seems to be improving the analytics of the blog page for the web but not for mobile. Will look into it and get back to you within a day with a better solution.
Thanks a ton

[akshatnema]

I'm expanding this issue to not only focus on Blogs but on the overall website of AsyncAPI. With the current reports of Lighthouse, it is fully understandable that the website has a very poor rating in terms of performance. We can't afford further addition of features/animations inside website since it can then decrease the performance of the website. It's now important to improve the performance of the website based on the errors we detect using Lighthouse reports and analysis of various tools and make a strict bar on Performance parameter inside Lighthouse results to become future-proof on these issues.

[akshatnema]

Refactor and improve the overall performance of the website

Description

This issue is now divided into 3 phases - Refactoring the codebase, Improving the performance of each page of the website and Creating strict bar on Lighthouse reports. These 3 parts should be completed in the phase of the Mentorship program effectively. The details for the subcategories of this issue are mentioned as follows:

Refactoring the codebase

There are many parts inside the website codebase that needs to be refactored in order to improve code quality and performance of the website. The reports show us that there are many parts of code that comes under "Unused Javascript" while rendering the website. Hence, the contributor has to identify those part of codes and restructure them to provide better code quality. Secondly, I see we are making duplication of implementation in certain part of components where the necessary code has already been implemented in some other files, yet not been used from it. Hence, these cases should be acknowledged properly.

Improving the performance of each page of the website

In the network of 3G or some other slow networks, our website is not responsive for many seconds which makes the website performance rating and user Feedback very poor. Hence, this part of the issue coves on detecting and improving those part of implementation inside the website that hinders the performance. The contributor should show his/her detailed research in his part of the proposal.

Creating strict bar on Lighthouse reports

In order to become future-proof regarding these issues, we should ensure that no such contributions in the future should hinder the Performance, Accessibility, SEOs, and many other factors of website efficiency. Hence, required workflows and checks should be created (just like we have lighthouse report workflow).

This issue is now part of AsyncAPI Mentorship program 2023 and will be accepting proposals regarding it. Till now, no mentors have been assigned for the issue, but it will be announced officially soon. All the interested candidates are requested to kindly make the proposals according to the need of the issue and the codebase, to have better chances of getting selected.

cc: @derberg @AceTheCreator

[Shofiya2003]

@akshatnema
where to send the proposal for this issue? what is the deadline for the same?

[akshatnema]

@Shofiya2003 Proposal submission round hasn't been started yet. You can view the timeline of the AsyncAPI Mentorship program here.

[akshatnema]

To inform all the interested candidates of this issue, I have retracted this project idea from the Mentorship program on the discussion with @derberg. We will right now focus on @Shofiya2003's PR to resolve this issue.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[sambhavgupta0705]

I am closing this issue as we have opened a new one for mentorship program
Ref #3186