Workshop using Cypress.io and following the guide.
According to a blog post made by Steve Souders, where he mentions a section of his book Even Faster Web Sites and another article on Writing Efficient CSS for use in the Mozilla UI by the Firefox contributor David Hyatt, the browser engine processes CSS selectors the following way:
The style system matches a rule by starting with the rightmost selector and moving to the left through the rule’s selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch.
Therefore, the key to optimizing CSS selectors is to focus on the rightmost selector, also called the key selector and matching the smallest number possible of elements with it.
Also, in my opinion, I value readability over performance, as long as it's not a very big performance hit.
- From:
#block_top_menu > ul > li:nth-child(3) > a - To:
li:nth-child(3) > a[title="T-shirts"]
- From:
#center_column a.button.ajax_add_to_cart_button.btn.btn-default - To:
.ajax_add_to_cart_button
- From:
[style*="display: block;"] .button-container > a - To:
a[title="Proceed to checkout"]
- From:
.cart_navigation span - To:
.standard-checkout
- From:
#center_column > form > p > button > span - To:
button[name="processAddress"]
This remains unchanged, since it uses an id selector, which is the fastest and is unique.
- From:
#form > p > button > span - To:
button[name="processCarrier"]
- From:
#HOOK_PAYMENT > div:nth-child(1) > div > p > a - To:
.bankwire
- From:
#cart_navigation > button > span - To:
#cart_navigation .button-medium
- From:
#center_column > div > p > strong - To:
.cheque-indent