The Importance of Frontend Performance(Chapter A of High performance Web Sites)
In any optimization effort, it’s critical to profile current performance to identify
where you can achieve the greatest improvements.It’s clear that the place to focus is
frontend performance.
First, there is more potential for improvement in focusing on the frontend.If we were
able to cut backend response times in half, the end user response time would
decrease only 5–10% overall.If, instead, we reduce the frontend performance by
half, we would reduce overall response times by 40–45%.
Second, frontend improvements typically require less time and fewer resources.
Reducing backend latency involves projects such as redesigning application architecture
and code, finding and optimizing critical code paths, adding or modifying hardware,
distributing databases, etc.These projects take weeks or months.Most of the
frontend performance improvements described in the following chapters involve best
practices, such as changing web server configuration files (Chapters 3 and 4); placing
scripts and stylesheets in certain places within the page (Chapters 5 and 6); and
combining images, scripts, and stylesheets (Chapter 1).These projects take hours or
days—much less than the time required for most backend improvements.
Third, frontend performance tuning has been proven to work.Over 50 teams at
Yahoo! have reduced their end user response times by following the best practices
described here, many by 25% or more.In some cases, we’ve had to go beyond these
rules and identify improvements more specific to the site being analyzed, but generally,
it’s possible to achieve a 25% or greater reduction just by following these best
practices.
where you can achieve the greatest improvements.It’s clear that the place to focus is
frontend performance.
First, there is more potential for improvement in focusing on the frontend.If we were
able to cut backend response times in half, the end user response time would
decrease only 5–10% overall.If, instead, we reduce the frontend performance by
half, we would reduce overall response times by 40–45%.
Second, frontend improvements typically require less time and fewer resources.
Reducing backend latency involves projects such as redesigning application architecture
and code, finding and optimizing critical code paths, adding or modifying hardware,
distributing databases, etc.These projects take weeks or months.Most of the
frontend performance improvements described in the following chapters involve best
practices, such as changing web server configuration files (Chapters 3 and 4); placing
scripts and stylesheets in certain places within the page (Chapters 5 and 6); and
combining images, scripts, and stylesheets (Chapter 1).These projects take hours or
days—much less than the time required for most backend improvements.
Third, frontend performance tuning has been proven to work.Over 50 teams at
Yahoo! have reduced their end user response times by following the best practices
described here, many by 25% or more.In some cases, we’ve had to go beyond these
rules and identify improvements more specific to the site being analyzed, but generally,
it’s possible to achieve a 25% or greater reduction just by following these best
practices.
