Google PageSpeed Insights – A Comprehensive Guide to Optimizing Website Performance

Eliminating render-blocking resources

For the browser to render the page correctly, it must process the HTML document (parsing the HTML and creating a DOM tree). If the code contains blocking resources (e.g., JavaScript that loads in the header), the browser interrupts code analysis to download and execute the specified files. This delays the display of the content to the user.

How to deal with this?

• Use inline scripts whenever possible if they are not too extensive.
• Add attributes async or defer in tags <script> – this will allow you to load JavaScript files asynchronously or execute them only after the document has been rendered.
• Move the scripts to the end of the source code (just before </body>) whenever possible.

This will allow the user to see the main content faster, and the files needed for extended website functionalities will be loaded simultaneously or immediately after the key elements are displayed.

Limiting the number of HTTP requests and file sizes

When a website loads, the server is sent numerous requests for files (images, CSS, JS scripts, etc.). Too many requests can significantly impact load times: each request requires time to be sent, processed, and responded to.

Simple ways to reduce requests and file sizes:

• Reduce the number of web fonts to a minimum – too many fonts from different sources increases the number of requests.
• Merging stylesheets and scripts into one file (or several larger ones instead of a dozen or so small ones).
• Compress image files while maintaining acceptable quality, for example using optimization tools such as TinyPNG or Squoosh.
• Checking the number of plugins (e.g. in WordPress) and removing unnecessary extensions.

Minification of CSS and JavaScript code

Minification Minification involves removing all characters from the source code that do not affect its interpretation, such as spaces, comments, and newlines. Additionally, long variable names are often replaced with shorter ones (e.g. userProfile on uP). This type of optimization does not harm the functionality of the website, but significantly reduces file size.

Minification tools:

• WebPack – a popular bundler used to combine and minify JS and CSS files,
• ParcelJS – allows you to quickly create packages and minify many resources,
• Autoptimize – a WordPress plugin that automatically minifies and merges CSS/JS files.

Regular code minification can bring tangible benefits in the form of faster page loading and higher rankings. Google PageSpeed Insights.

Reduce server response time (TTFB)

TTFB (Time to First Byte) measures how quickly a server responds to the first request sent by a browser. If the server response time is high, even the most optimized front-end code won't be enough to keep your website running quickly.

What influences TTFB?

• Hosting quality – cheaper shared plans may slow down during peak hours,
• Server configuration – incorrect cache settings or lack of caching mechanisms.

How to improve TTFB?

• Switching from shared hosting to a faster solution (VPS or dedicated server),
• Optimizing configuration and updating server software,
• Activating application cache and memory caching (e.g. Redis or memcached).

Lazy loading technique for images

Images can consume a significant portion of the data transfer needed to load a page. However, if a visitor has to scroll to see an image, there's no need to load it immediately.

Lazy loading (delayed loading) involves downloading images only when the user is at a location where the graphic is visible on the screen.

How to implement lazy loading?

• Using the native attribute loading=”lazy” in tags <img> (supported by Chrome and newer browsers),
• Use of ready-made JS libraries (e.g. Lozad.js, LazyLoad.js) or plugins in CMS systems.

Modern image formats

Google recommends switching to newer and more effective image formats such as WebP Whether JPEG 2000. Compared to traditional JPEGs or PNGs, files in these formats are smaller while maintaining comparable quality. This is especially important for graphically intensive websites, where size optimization can speed up loading times by up to several dozen percent.