Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: improve website performance #1368

Closed

Conversation

Shofiya2003
Copy link

Description

  • Made changes to rendering of author's profile image and blog's cover image in the blog page by using cloudinary URL for the these
  • Used cloudinary functions to get the URL of the image transformed according to the required dimensions
  • Cloudinary CDN is being used to render the images and this automatically renders images in performance friendly formats like AVIF if they are supported by the browser

Related issue(s)
#89

@netlify
Copy link

netlify bot commented Feb 25, 2023

Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 49ce9c8
🔍 Latest deploy log https://app.netlify.com/sites/asyncapi-website/deploys/645c6ab3961c320008291390
😎 Deploy Preview https://deploy-preview-1368--asyncapi-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Copy link

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.


setConfig({
Copy link
Author

@Shofiya2003 Shofiya2003 Feb 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@derberg we need to add the cloudinary cloudname here, without this the build will fail

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just created an account, name is dimfh6eps

what about API key and secret? don't you need them?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@derberg I researched. I did not find use of the API key and secret to configure cloudinary's image transformation service.
I think that the service is a part of the free plan and does not require API secret. In the free tier the size of a single image should be within 10 MB. referred this
Should we use the service? I don't think there would be any security issues as the service is free for all.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cool, 10MB is more than enough

so after adding the account name do you see it working in the preview?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@derberg
Yup I saw the preview and used lighthouse for analytics
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.
image

@Shofiya2003 Shofiya2003 changed the title Improve website performance refactor: Improve website performance Feb 25, 2023
@Shofiya2003 Shofiya2003 changed the title refactor: Improve website performance refactor: improve website performance Feb 25, 2023
@github-actions
Copy link

github-actions bot commented Mar 8, 2023

⚡️ Lighthouse report for the changes in this PR:

Category Score
🔴 Performance 41
🟢 Accessibility 98
🟢 Best practices 100
🟢 SEO 100
🔴 PWA 30

Lighthouse ran on https://deploy-preview-1368--asyncapi-website.netlify.app/

@akshatnema
Copy link
Member

ping @Shofiya2003. Kindly do let know what all sort of environment variables are needed to run this PR in development mode.

@Shofiya2003
Copy link
Author

Hey
@akshatnema I already got the env variables. I tried this solution only for the blog page to experiment. The problem is this solution is only solving tad of a problem. I used lighthouse to compare the present the performance of present blog page and the netlify deployed version of my PR. There is only small performance increase.
Also the current PR is not meeting the accessibility criteria set in the CI, so will have to work on that too.
How should I go about this? Do you want me to follow the approach you suggested in the issue or come up with the plan myself?
Thanks a ton
Apologies for inactivity

@derberg
Copy link
Member

derberg commented Jun 21, 2023

@Shofiya2003 lighthouse errors are fixed. You can continue, and please do 🙏🏼 as this PR makes good changes and really improves performance 🙏🏼

@AnishKacham
Copy link
Contributor

Hi @Shofiya2003 are you still working on this :3 ?

@Shofiya2003
Copy link
Author

Shofiya2003 commented Sep 4, 2023 via email

@derberg
Copy link
Member

derberg commented Sep 5, 2023

@Shofiya2003 sorry to hear that, but thanks for starting the very promising work 🙇🏼

@AnishKacham please go ahead. Please go ahead with new PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants