We must adopt a "mobile first" way of thinking when organizing CSS and JS.
This set of articles is all about how to get a high score on PageSpeed Insights. There are many articles that are just copy pasting 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 webpages.
The pain happens when you need to fix a large 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 basic optimizations that we can implement. They are the ones that are easy to understand, but sometimes not so to implement.
If you are using a CMS, there is a pretty good change that it’s 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 could be automated with npm packages. For smaller ones you may use IDE addons and watchers or do it manually with web tools.
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.
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. Basically, you need to activate gzip or deflate compression. There are different ways to enable compression, depending of what kind of server the page is hosting for example apache, IIS, nginx, etc. Fortunately, there is plenty of information in Google on this topic.
To be honest, most of the time I’m cheating using PageSpeed Insights’ bundle mentioned above and replacing the images with compressed ones.
I’ve tried Photoshop’s settings for exporting images, used different tools, but it’s time consuming in cases when you need to tweak the settings, because it is not the same for different images and formats.
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 many good articles explaining how it’s done and again the settings are different on 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’m strongly 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 won’t reflect too bad on the overall score or if else consider carefully the consequences.
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 and/or internal stylesheet (the CSS between <style> tag). Basically, 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.
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.