YSlow: Avoid CSS expressions

Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

Overview

Expressions can produce thousands of unnecessary CSS evaluations.

How does your site score on this recommendation?

Details from Yahoo!

CSS expressions (supported in IE beginning with Version 5) are a powerful but dangerous way to dynamically set CSS properties.

These expressions are evaluated frequently: when the page is rendered and resized, when the page is scrolled, and even when the user moves the mouse over the page.

These frequent evaluations degrade the user experience.

Summary

CSS
Low
Easy
99%

YSlow recommends:

One way to reduce the number of times your CSS expression is evaluated is to use one-time expressions, where the first time the expression is evaluated it sets the style property to an explicit value, which replaces the CSS expression.

If the style property must be set dynamically throughout the life of the page, using event handlers instead of CSS expressions is an alternative approach.

If you must use CSS expressions, remember that they may be evaluated thousands of times and could affect the performance of your page.

Read More

Related PageSpeed Recommendations

Cookie Policy

By clicking "Allow All" you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View cookie details

Deny Allow All
×