We must adopt a "mobile first" way of thinking when organizing CSS and JS.
This is the first installment of my series of blog posts on Google PageSpeed Insights optimizations and recommendations.
Part 2: Eliminate render-blocking JavaScript in above-the-fold content
Part 3: Eliminate render-blocking CSS in above-the-fold content
This set of articles is all about how to get a high score on PageSpeed Insights. Many articles are just copying guidelines directly from the Google's documentation. Many are luring with titles like "get score 100/100," and many are using just some plain simple dummy web pages.
The pain happens when you need to fix a sizeable live website. Most of the articles are just clickbait and not about helping you with real-life practical solutions or examples.
Compared to the described above, my set of articles aims to save time and do the job right.
Let's take a look at the underlying optimizations that we can implement. They are the ones that are easy to understand, but sometimes not so to implement.
Minify JavaScript, CSS and HTML
If you are using a CMS, there is a pretty good chance that it is already using minification/compression (should not be confused with HTTP compression). If not, there are plenty of addons/plugins like the case in WordPress. For large projects, this can be automated with npm packages. For smaller ones, you may use IDE add-ons and watchers or do it manually with web tools.
In some cases, you can download a bundle of optimized resources straight from the PageSpeed Insights tool. There is a link at the bottom of the page called "Download optimized image, JavaScript, and CSS resources for this page.".
Personally, I use this bundle only for images and never for JS, CSS or HTML files, but the point here is that minifications are a common thing and there is always an easy solution.
You might come across to the term uglify. This is an additional minification only in JavaScript where all names (variables, functions, etc) are shortened. This is also a way to protect to some degree your code or at least make it harder to be copied.
Enable compression
This optimization is the HTTP compression mentioned above and is a little more difficult. It’s more difficult only because the activation depends on your hosting. You need to activate gzip or deflate compression. There are different ways to enable compression, depending on what kind of server the page is hosting for example Apache, IIS, Nginx, etc. Fortunately, there is plenty of information on Google on this topic.
Optimize images
To be honest, most of the time I am cheating using PageSpeed Insights' bundle mentioned above and replacing the images with compressed ones.
I have tried Photoshop’s settings for exporting images, used different tools, but it is time-consuming in cases when you need to tweak the settings because it is not the same for different images and formats.
For me, the easiest way to get the right images is to check them through PageSpeed Insights and download them with the "Download optimized image, JavaScript, and CSS resources for this page." link.
Leverage browser caching
Check which files PageSpeed Insights wants to cache. If all of them are from your server, you need to enable caching. There are again excellent articles explaining how it is done and again the settings are different on a different type of servers for example Apache, IIS, Nginx, etc.
It becomes challenging when the files are external. For example, we are using Google Analytics on our website. The GA code snippet is downloading an external JS file from a different domain with different cache settings (https://www.google-analytics.com/analytics.js). The workaround is to download the JS file, upload it to our server and load it manually before the GA code. However, I am firmly against this as Google might make changes and the hardcoded JS may break the statistics. You should have the same concerns with other libraries too.
My recommendation is to leave alone all external JS files from third-party services as they will not reflect too poorly on the overall score or if else consider the consequences carefully.
Prioritize visible content
Google wants you to reduce the amount of HTML needed to render above-the-fold (upper half of the page) content. What does that mean? Well, probably there is too much inline or internal stylesheet (the CSS between <style> tag). The whole HTML document is too large. You could use too much-nested HTML tags, microdata, microformats or something that makes your HTML file too crowded.
In my case, most of the time it is the internal stylesheet. So be careful how much CSS you are writing directly into the HTML document. The same is right and for the internal JavaScript code.
Don’t worry too much about this optimization, in some cases, there will be no practical way to minimize further your HTML and it’s not so heavy on the overall score.
Next, we will focus on how to eliminate render-blocking JavaScript in above-the-fold content.
