Best practices for improving your website.

I had been a frontend developer for 3 years. In that time, I faced a lot of problems and tried to resolve.

For SEO, I followed Chrome Dev Tools and Lighthouse advices to improve the website. It’s not only SEO, but also performance, best practices for both desktop and mobile environments.

Google Analytics can let you know what’s going on user’s browser. You can use it to check performance as well. Of course it’s so helpful and rich of features.

Google Search Console can help you optimize the website. You should use it for every release and help Google’s Crawler knows about the urls. (But sometime it can’t see your website or error log isn’t clear enough.)

https://gtmetrix.com/ is also a great tool that would be used before you release your website. It’s independent your network speed, and it provides a lot of useful information about the website. You can find out many things to improve from there.

Facebook Debugger or Twitter Card Debugger helps you know your website look like when you share on SNS.

And there’re so many tools that you search on Google or Bing.

One tool that I want to recommend is Layer Panel. It’s built in Chrome Dev Tools, but I believe many developers don’t know or never use it.

First, you can open Layer Panel in Chrome/Edge here:

Layer Panel can expose layers in your website. You can imagine each z-index creates a new layer. Every time my website runs slowly, I think about Layer Panel first. It lets me know how many layers are created in my website.

One rule is: The desktop website will become slowly if there’re more than 40 layers.

You can select each layer in layer list to check the reason why browser need a new layer for that element.

For this case, browser will create a new paint layer for the button because it has a backdrop-filter property (CSS3). So the browser have to draw it over other elements. In general, you shouldn’t overuse these kind of properties. There is a list of CSS3 properties that make a new paint layer:

1. It is the root element (HTML).
2. Has the explicit positioning attribute (relative, fixed, sticky, or absolute).
3. It is transparent (opacity smaller than 1).
4. Has the CSS filter.
5. Has the CSS mask attribute.
6. Has the CSS mix-blend-mode attribute (not normal).
7. Has the CSS transform attribute (not none).
8. The backface-visibility attribute is hidden.
9. Has the CSS reflection attribute.
10. Has the CSS column-count attribute (not auto) or CSS column-width attribute (not auto).
11. Application of animations is into opacity, transform, filter, and backdrop-filter.
12. Overflow Clip Paint layer.
13. No Paint Layer

Ref: https://www.alibabacloud.com/blog/front-end-performance-optimization-with-accelerated-compositing-part-1_594194

If your website has a lot of animation, effect or require a lot of CSS properties, you need to very carefully check all of Paint Layers that browser created.

Hope it’s helpful for you. Have a nice day!