Critical Rendering Path Performance

The rendering path is simply the process that the website goes through in order to display all of it’s contents.

For example an optimized website should load the code first, then the text and navigation, then the little images and then the big images, in good order.

Most people would never think about optimizing the path that the page loads in the browser but it is becoming very important for SEO and ranking keywords in Google and other search engines.

There is a developer named Ilya Grigorik who has written a very nice article about it at Google’s Developer Network, you can find it here. Another more lamen example can be found at Varvy.

How The Browser Displays The Webpage

1. The HTML file is downloaded
2. Browser downloads the CSS and HTML file (code files that tell the page where to put text and images, and how big fonts are, etc)
3. Browser downloads the downloads the Images
4. Browser downloads the Javascript files
5. Browser then displays the Website

Things That Make The Critical Rendering Path A Mess

• Social sharing buttons
• Multiple CSS files (they can be combined)
• Multiple javascript files (they can be combined)
• Audio or Video – big deal
• Widgets
• Too Many Images

For information on combining CSS and Javascript files you can read this article or try using this CSS script combining tool.

Fixing These Page Speed, Weight & Rendering Issues

These are the things you can do to fix page speed and load issues to make the site load and render faster…

• – Fix above the fold content to render pages quicker
• – Enable browser caching
• – Reduce amount of CSS files by combining as many of them as much as possible to minimize HTTP requests (which will improve performance).
• – Making the combination of CSS files work within one file without conflicts.
• – Minimize CSS Files to a bare minimum
• – Removing as much as possible CSS code that is bad for page speed
• – Minimizing all functional images found.
• – Combining as much functional images as possible in CSS sprites when found optimal.
• – Replacing all functional images that are used (also in CSS files) with Base64 code (no HTTP requests from functional images anymore)
• – Optimizing images to reduce data size
• – Reducing amount of Javascript files to a bare minimum by combining as many of them as much as possible.
• – Making the combination of Javascript files work within one file without conflicts.
• – Minimizing Javascript files to a minimum

How Long Will This Take?

For the average person who does not know coding, about 100+ hours of learning. For someone who knows a little about WordPress and code, 40+ hours of learning. For someone who does page speed and optimization for a living, about 8-18 hours.

How Important Is Page Speed Time?

VERY, the average website must load in 4 seconds or less. Page speed COULD be the reason you can’t beat out the competition in Google or other search engines.

What Does Page Speed Optimization Cost?

Depends on where you go and what they do and how well they do it. Can vary from $100 to $1200 and for large e-commerce websites, $5000+ each website.