Andrew Dorokhov
First we should do to optimize our website is to make a test using such services as Lighthouse or GTMetrix.
Services
1. Lighthouse
Lighthouse is an open-source, automated tool for improving the quality of web pages.
There are several options how we can use it:
- Chrome: Lighthouse is integrated directly into the Chrome DevTools, under the “Lighthouse” panel.
- Using the open_in_new Chrome extension . The Chrome extension was available prior to Lighthouse being available in Chrome Developer Tools, and offers similar functionality.
- From the command line. You can automate your Lighthouse runs via shell scripts.
- As a Node module. You can integrate Lighthouse into your continuous integration systems.
- Web UI: open_in_new PageSpeed Insights .
2. GTMetrix
Homepage: open_in_new GTMetrix .
Optimization steps
Minimize main thread work
Images optimization
Convert all you images to WebP format. Here’s open_in_new a good service for this task.
Critical CSS and render-blocking styles
Browsers typically load CSS before painting HTML in a useful way — that is why stylesheets go in <head>.
1. Reduce delay from extra stylesheet downloads
Each external stylesheet needs a network round trip before content can be styled. Putting critical rules inline in <head> avoids that wait for the first paint:
<!doctype html>
<html>
<head>
<style>
/* Critical CSS here. */
</style>
...
2. Defer unused / non-critical CSS
Unused CSS slows building the render tree: the browser walks the DOM and matches rules to every node. More unused CSS means more work before first paint.
Critical CSS is the CSS needed for the initial page load — only that should block rendering. Styles for later UI (for example a modal opened by a click) are non-critical and can load after first paint.