In this blog post, we want to share some tips and techniques to really speed up your website, regardless of what CMS or programming language your website is programmed in. Every webmaster and web developer can benefit from prioritizing resources within the rendering path to optimize delivery of resources and not only render your web page faster, but show search engines you care about User Experience. We'll be using Google's own PageSpeed Insights to check our web page for issues that need to be addressed, as they are the leading traffic source for many website owners.
Over at PCWDLD.com, we are consistently finding ways to make our site and user experience better and Faster for all our viewers. We've gone through our site extensively to really drill down into the fundamentals of what makes a web page better for the Internet as a whole while ensuring that the User Experience is top notch for our viewers. Our process is quite laborious, especially for those using any Particular CMS, such as WordPress, Drupal, Joomla or whatever you may be using to manage your site templates and content. Nevertheless, making the changes highlighted below will pay back tremendously when all the pieces of the puzzle come together.
Most Common Issues
Google is all about perceived speed and how quickly a browser can start rendering a web pages' content. Many webmasters think they need to achieve Loads Times below a certain threshold (1 - 2 seconds), which is true to an extent. But what we have found is that developers should be focusing on how fast their page starts to Render, rather than on overall load times.
Above the Fold CSS
The next piece of the puzzle is finding your Above the Fold CSS and inlining only the Above the Fold CSS styles into the <head> section of your page and then moving your CSS file/s to right above the </body> tag . This will allow the browser render the Above the Fold content using the inlined CSS Styles in your header rather than downloading your whole CSS file, which can be fairly large, and start styling the page within milliseconds.
In order to find your Above the Fold CSS, we use this Critical Path CSS Generator. All you have to do is copy the contents of your CSS file into the Left side box, Enter in your URL at the top of the page you want to extract the Critical CSS from and then hit the "Create Critical Path CSS" button. The site will churn in the background for a couple seconds and present you with the Above the Fold CSS. You can now copy the CSS styles and inline them into the head portion of your web page and move the link that points to your CSS file to the bottom of the webpage right before the "</body>" tag, as mentioned above.
Remember, Load times aren't the greatest determining factor of speed. Take careful consideration of TTFB and Critical Rendering path, because Google wants to see rendering of our webpage within Milliseconds rather than waiting 1 -2 seconds for a complete webpage to download and then started Rendering. Perceived Speed always trumps Load times in our book. Good Lucky and Happy Developing.