How Trendyol increased search result ranking by improving Core Web Vitals?
In today’s digital age, web performance and user experience have become crucial factors for businesses operating in any industry vertical. Understanding the correlation between user experience and conversion rates is key to success.
Metrics such as engagement rate, bounce rate, churn rate, and conversion rate are all impacted by user experience. Therefore, prioritizing user experience is essential for businesses looking to achieve success.
Improving user experience can lead to higher engagement rates and longer time spent on the website, ultimately resulting in improved metrics such as reduced bounce rate and churn rate while increasing the conversion rate.
This, in turn, can drive better business success by keeping users engaged and increasing the number of users completing desired actions.
Trendyol has around 30 million customers and 240,000 sellers propelled us to become the first decacorn in Turkey and one of the top e-commerce platforms in the world. This is particularly crucial for maintaining its position in the industry.
With Google’s announcement of Core Web Vitals, Google has started forcing all websites to improve some basic metrics to have a better user experience on the web. Google also says in its documentation, Core Web Vitals is a ranking factor means that affects search engine ranking, click, impression and overall organic traffic.
These metrics are:
- Largest Contentful Paint
- First Input Delay
- Cumulative Layout Shift
In essence, these metrics are important for improving user experience and are relatively easy to improve. I will not go into the details of these metrics, you can find all the details on web.dev. I want to give you the key results from our experience:
Do not focus on Core Web Vitals, focus on what your clients need.
Our main focus was on user experience. When you focus on user experience, these metrics will improve naturally. Never proceed to improve these metrics as an end goal because, as with any web performance metric, there are trade-offs with each improvement. You may have to lose something when you gain something. Therefore, you should define your website’s target audience and decide which metrics to prioritize.
For example, if you improve the FID value by 10%, but experience a 2% loss in the FCP value, which metric is more critical for you?
Always start by measuring the impact of all the metrics you are tracking on users.
How much does improving LCP, FCP, and CLS values affect bounce rate? Using A/B testing, how much change in CR results from a change in the FCP value? How do my users access the web? What device power and infrastructure do they have?
Measuring user behavior should be your first task, and based on the results, you can make data-driven improvements to optimize your site.
Here is our manifesto step by step after measuring and improving the web performance.
- Render all pages as SSR as much as possible
Rendering all pages on the server side can minimize the cost of JavaScript. Running JavaScript is currently the most expensive operation for browsers. However, this approach may result in an increase in the initial document size, which can negatively impact users with poor network bandwidth. It’s important to make decisions based on data. If server-side rendering causes scalability issues or results in a negative user experience, it’s best to move on to the next item.
2. Combine Intersection Observer with bfcache
If rendering the entire page as SSR results in a negative user experience, only render the viewport as SSR. Intersection Observer can be a savior in this situation. By lazy loading areas outside the viewport, we can keep both FCP values and initial load times low. However, this approach can also lead to CLS problems. Browser actions like navigating backward or forward can result in negative user experiences, particularly if placeholders are used. This is where bfcache comes to the rescue. It keeps the page in RAM, providing a smooth experience during page transitions. Additionally, not sending any requests to the backend services and provides better Core Web Vitals values.
3. Defer all scripts
As mentioned earlier, executing JavaScript is costly for browsers. All scripts within the head tag are parse-blocking processes. We want to render the entire page as soon as possible to show the user.
4. Preload your LCP image
The LCP image on the page is low-priority by default, and its discovery can also take a long time based on the document’s parsing speed. This negatively affects the LCP time. Therefore, by preloading it at the top of the head tag and adding the fetchpriority=“high” attribute, we can shorten the discovery time and achieve significant improvement in LCP time.
5. Do not lazy load images within the viewport
Lazy load means loading later, i.e., they should be used in areas that will be rendered after the user takes action. Things that the users see when they first open the page should be loaded instantly to achieve a good user experience.
Conclusion
Trendyol has a very large domain with many features, due to the nature of e-commerce, each of which requires significant development. Therefore, we use a micro frontend architecture internally. Along with the advantages, there are also some disadvantages. Scaling and optimizing such a large system simultaneously is very difficult.
After all the user-centric performance metric measuring, we found that some user experiences were poor through the Search Console, Pagespeed Insights, and CRUX report. We had CLS problems on the mobile web. After following all the items above step-by-step and implementing improvements across all our pages, we tracked both Search Console metrics and keyword ranking values.
Here are the reports after the improvements in the metrics:
Search Console reflects Core Web Vitals metrics in the reports approximately 20 days after waiting to collect user metrics following the implementation of the improvements.
After 20 days, all of our Core Web Vitals metrics improved to the “Good” status. Additionally, we noticed a 15% improvement in the ranking of the keywords we track, as well as a 23% increase in our Click metric and a 4% increase in our Impression metric.
These positive improvements in our SEO metrics are encouraging signs that our strategies for improving online visibility and engagement are working effectively.
Thank you for reading.
