Speed of the web page rendering is a high-powered factor in user engagement and retention. With development of technologies users become more and more demanding, they want more quality, more speed, more entertainment. Let’s concentrate on the easiest goal to improve user experience - speed. First of all, it is important to conduct performance analysis and depending on its results search for the appropriate solutions. One of the possible options is PageSpeed module.
PageSpeed is a free and open-source tool that speeds up websites, reduces page load time, improves web page latency and bandwidth usage by optimizing web pages and their assets. This module automatically applies general front-end best practices to pages and associated resources (HTML, CSS, JavaScript, images) without the need to modify existing content or workflow.
Page load time is period of time starting from the moment user requests a new page to the moment the page is fully rendered by the browser. Page load time is one of the main characteristics of the website performance, especially from the client point of view. It is main focus of the PageSpeed, so to improve web performance PageSpeed automatically checks whether page corresponds to a number of different rules that represent best practices in web development. PageSpeed concentrates on the following practices.
Minimizing round-trip times
Round-trip time (RTT) includes time spent on sending a request by client and sending a response by server, excluding the time spent on data transfer.The less number of RTT is, the better web performance is.The main methods to reduce the number of round-trips times include minimizing DNS lookups and redirects, combining external JavaScript, external CSS and images using CSS sprites. It is the best to use asynchronous resources, optimize the order of styles and scripts, as well as to parallelize downloads across hostnames.
Optimizing caching
Web pages have assets that are rarely changed, e.g. HTML, CSS, JavaScript, images, etc. To reduce the page loading time it is necessary to save or cache these assets server-side. A file-system based cache is always employed on each server. In this case there is no need to download them each time, their copy will be used instead. Additionally to file cache memcached can be applied as a scalable network-accessible cache. Optimizing caching leads to reducing round-trip time, bandwidth, and total payload size of the responses.
Minifying request overhead
When client sends an HTTP request, it results in uploading additional data, e.g. all associated cookies set for domain. In order to minimize the client request time it is appropriate to reduce the request data size and serve static content from a cookieless domain.
Minifying payload size
As well as client’s request the server’s response includes some amount of data that has to be limited as much as it is possible in order to minimize network latency. Cutting down the payload size of both dynamic and static resources can be done by reducing HTML, JavaScript, and CSS code; enabling compression; optimizing images and unused CSS. Serving scaled images and resources from a consistent URL also helps in decreasing the size of downloads, responses, and cached pages.
Optimizing browser rendering
To improve the performance on client side it is best to format HTML, CSS, and JavaScript code according to the browser characteristics. Efficient CSS selectors, absence of CSS expressions, and inserting CSS in the document head will assist in the enhancing of the browser's page layout. Also it is important to specify image dimensions and a character set.
Optimizing for mobile
Focusing on the recent uprise in popularity of the mobile and tablet devices PageSpeed provides rewriters that take care of mobile performance features. Mainly they focus on making the landing page redirects cacheable and deferring parsing of JavaScript. All it takes is to choose right rewriters and PageSpeed will tune mobile performance accordingly.
How does PageSpeed work?
The main source of optimization are HTML, CSS, JavaScript, and images. PageSpeed uses custom optimization strategies for each type of web page asset to reduce their size, and extend the cache lifetime of each asset.
To optimize HTML PageSpeed module:
- collapses whitespace and combines head elements;
- removes quotes and comments.
To optimize CSS PageSpeed module:
- combines multiple CSS files (including external ones) into one;
- prioritizes and moves CSS blocks to the head area.
To optimize Javascript PageSpeed module:
- inlines small blocks of JavasSript instead of loading an external file and outlines larger blocks so they are available for caching and shared by multiple pages;
- removes comments and line breaks.
To optimize Images PageSpeed module:
- inlines images and pastes them into the HTML;
- converts and compresses images of various formats like JPG, PNG, WEBP, etc.
- removes unused meta data;
- adds image dimensions to
tags and resizes images specified there.
PageSpeed has a set of core filters for all of the optimizations mentioned above and safely avoids influence on the look and behaviour of the website. This module is frequently updated and already has over 40 additional configurable optimization filters to manage assets involved in page rendering. PageSpeed can be deployed by individual sites, big hosting providers, and CDNs.
Using advanced techniques PageSpeed is one of the best tools to reduce the payload size, optimize caching, improve the speed of delivery and rendering of the pages. Quintagroup applied this module in several projects and significantly increased page load time.
