Careem's Website Audit: 10 Issues You Can't Afford to Ignore

Welcome to this in-depth audit of Careem's website! 🚗 In this video, I'll be uncovering 10 crucial issues that demand immediate attention for a smoother user experience and enhanced website performance.
Optimizing Section Dividers: We'll explore the benefits of using SVG overlay section dividers instead of large background section images, potentially reducing file size from 1.1MB to a mere 10KB.
Font Optimization: Learn how to enhance website speed by using web-optimized fonts (woff2) and removing unnecessary characters with the font subsetter tool at everythingfonts.com/subsetter.
Smart Image Styling: Discover the best practices for styling images by using div blocks with border radius and placing images inside, a superior approach compared to applying border radius directly to images in design tools.
Accessibility Matters: I'll stress the importance of adding alt text to images for better accessibility and user understanding.
Color Contrast Concerns: We'll address color contrast ratio issues in certain sections, ensuring a visually appealing and accessible design. coolors.co/contrast-checker
Proper Class Targeting: Explore the significance of targeting elements with classes rather than using a single ID for multiple items, avoiding pitfalls associated with using the same ID for multiple elements.
Heading Structure for SEO: Delve into the critical role of a well-organized heading structure for SEO and accessibility improvements, ultimately boosting your website's scores.
SVG Icons for Optimization: Learn the advantages of using SVG icons over PNG for better website performance and sharper visuals.
Lazy Loading for Efficiency: Implement the "loading=lazy" attribute for images below the fold, enhancing website loading times and user experience.
Mobile Slider Section Fix: I'll identify and discuss the overflow issues in the slider section on mobile, providing insights on how to address and fix these concerns.
Convert png to webp: squoosh.app/editor
Don't miss out on these essential tips for improving Careem's website! Implementing these changes will not only enhance user satisfaction but also contribute to better SEO and accessibility scores. Let's dive in and make Careem's online presence even more exceptional! 🌐✨
Connect with me at:
Instagram: / ahmedqayyum32
Twitter: / ahmedqayyum32
LinkedIn: / ahmedqayyum32

[@brainybitesOfficial035]

Great effort Ahmad bhai...
Let me add few things...
If we are on webflow we can directly convert images into webp format through the asset pannel.
And for the video if we are using code we can put defer keyword in like this
And do this for all codes which are used in webflow.
And remove all unused extra classes.
Remove unused animations.
Set social links loading into prefetch
And most important thing the main image of the page should be set loading by default not in lazy loading.
And if you are using some links in the project you should set rel=preconnect keyword in the link snippet.
Also add some indirect links into the project and reduce unused JavaScript code as well.
These are some few suggestions regarding to webflow seo performance.
Myself Muhammad Arslan and you have commented on my LinkedIn profile last time😅

[@ahmedqayyum]

Yes, that's correct. However, the reason for mentioning Squoosh image conversion tool is because we can adjust the quality and preview the image size.

[@ahmedqayyum]

Thank you for considering the defer attribute. That's correct.

[@ahmedqayyum]

I appreciate the helpful suggestions you provided. Thank you for your guidance, and I'm eager to learn more from you.

[@ahmedqayyum]

Can you please send me a message on Linkedin, so we can connect again.

[@brainybitesOfficial035]

​@@ahmedqayyum thanks bro for considering these suggestions i will send you message on LinkedIn