Rendering Path Issue
Critical Rendering Path Performance
The rendering path is simply the process that the website goes through in order to display all of its 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 on Google’s Developer Network, you can find it here. Another more lamen example can be found at Varvy.
How The Browser Displays The Webpage
- The HTML file is downloaded
- Browser downloads the CSS and HTML file (code files that tell the page where to put text and images, how big fonts are, etc)
- Browser downloads the Images
- Browser then displays the Website
Things That Make The Critical Rendering Path A Mess
- Social sharing buttons
- Multiple CSS files (they can be combined)
- Audio or Video – big deal
- Too Many Images
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 the number 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 many 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
How Long Will This Take?
For the average person who does not know to code, 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.