Smart Optimization of Web Page performance -- Apache extension mod_pagespeed

1 2 3 4

<IfModule pagespeed_module> # Turn on mod_pagespeed. To completely disable mod_pagespeed, you # can set this to "off". ModPagespeed on

This article mainly introduces the Apache extension module mod_pagespeed developed by Google. The goal of this module is to increase the speed of webpage loading. The specific implementation method is mainly to reduce the number of requests and request traffic by optimizing html code, css code, js Code, and scaling images, thus improving the loading speed of webpages.
?
First, we will show the effect of the plug-in. The mod_pagespeed module is not enabled yet.

In this case, the page is filled with a lot of spaces, as well as a long variable name and function name. In fact, these spaces and names are a waste for officially running systems. In addition, the source code of the web page is exposed, which is also dangerous for websites with high security requirements. Therefore, we can enable the pagespeed module to speed up website loading, enhance website security, and save server traffic.
 
It shows how the pagespeed module is enabled.

It can be seen that the pagespeed module omitted comments, spaces, and line breaks in the Code, while also compressing the variable name. This reduces network traffic and increases the loading speed of webpages.
However, this is only the tip of the iceberg, and more optimization filters are described in detail below.
Install
Next, we will introduce how to install pagespeed. In Linux, only one command is required for installation. However, due to the existence of a wall, resources outside China cannot be accessed. Therefore, you must first download the installation package to the firewall.
Agent Official Website: https://developers.google.com/speed/pagespeed/module
After the download is complete, double-click it to install it.

For the convenience of everyone, I upload the installation package to the domestic Network Disk: http://115.com/lb/5lbd38nljh5i
After the installation is complete, you must configure it before using it. The configuration method is described below.
Configuration
After the installation is complete, there will be no changes except a few more files on the system, and it must be configured before use. In Linux, the configuration file is located at/etc/apache2/mod-enabled/pagespeed. conf. If you do not find this file, it should be that the plug-in has not been installed, you need to re-check the installation process.
The first few lines of the configuration file should be as follows:
1. You need
ModPagespeed off
Change
ModPagespeed on
2. Find the line containing ModPagespeed, Which is annotated by default. Add the following code after it:
ModPagespeedEnableFilters rewrite_javascript, rewrite_css
ModPagespeedEnableFilters collapse_whitespace, elide_attributes
ModPagespeedEnableFilters combine_javascript, flatten_css_imports, remove_comments, trim_urls
3. Restart the server to make the configuration take effect.
Sudo apachectl restart
After these steps, we can see a lot of changes in the web page source code in the browser. However, from the user's point of view, in addition to improving the page loading speed, the page display effect has not changed.
The specific filters will be described in detail below.
Features

Automatically optimize websites and related resources

Use the latest web optimization technology

Over 40 content filters

Free, open-source, and fast update

Allows you to deploy hosts and CDN.

Filter

Filters are divided into the following categories:

Cache Optimization

Reduce the number of requests

Reduces extra request overhead

Reduce data size

Optimize browser Rendering

Others

Cache Optimization

Replacing the js Library

Replace the common js library with the corresponding CDN version. That is to say, the js library that users often use to browse our webpage will not be obtained from our own server, but from the public server, thus reducing the bandwidth pressure on the server.

Configuration code

ModPagespeedEnableFilters canonicalize_javascript_libraries

Extend Cache

Extend the cache time of static files.

Configuration code

ModPagespeedEnableFilters extend_cache

Extend the PDF Cache

Filters similar to "extended cache" are only optimized for PDF files.

Configuration code

ModPagespeedEnableFilters extend_cache_pdfs

LocalStorage Cache

The browser can use LocalStorage to save some data on the client. This filter utilizes this feature. Save some CSS, JS, and other files to LocalStorage. During the next loading, 304 Not Modified is no longer used to determine whether the cache times out. Instead, it is directly read from the local file.

Configuration code

ModPagespeedEnableFilters local_storage_cache

Separate CSS

Separate the nested css code from the HTML webpage into an external file. In this way, the embedded css can also enjoy the acceleration brought by the cache.

Configuration code

ModPagespeedEnableFilters outline_css

Separate JS

Similar to the "separate CSS" filter. This filter separates embedded js Code from independent files to enhance cache.

Reduce the number of requests

Merge CSS files

Merge multiple CSS files on the same page into one file, which reduces the number of requests and increases the page loading speed.

Configuration code

ModPagespeedEnableFilters combine_css

Expand CSS Reference

Expand @ import in css. This reduces the number of requests and increases the page loading speed.

Configuration code

ModPagespeedEnableFilters flatten_css_imports

Embedded CSS

Embed short css files into html to reduce the number of requests.

Configuration code

ModPagespeedEnableFilters inline_css

Expand Google Font API

Convert Google's font interface into css embedded into html to reduce the number of requests. The principle is similar to the built-in css Filter. we can regard the css of the Google font API as short css. In order to speed up the request, we can directly embed it into html.

Configuration code

ModPagespeedEnableFilters inline_google_font_css

Merge js

Similar to merging css, multiple js files in the same file are merged into the same file. In this way, you need to request multiple times to obtain multiple js files. Now you only need to request multiple js files once, reducing the number of requests.

Configuration code

ModPagespeedEnableFilters combine_javascript

Embedded js

Similar to built-in css. This filter embeds short js code in an independent js file into html, reducing the number of requests.

Configuration code

ModPagespeedEnableFilters inline_javascript

Before moving css to js

In some old browsers, css files are loaded only after js is loaded or even run. This is very undesirable, so this filter is needed to ensure that css is before js.

Configuration code

ModPagespeedEnableFilters move_css_abve_scripts

Dispersed Domain Name

The primary domain name is randomly distributed to multiple image domain names, so that the browser can achieve acceleration through concurrent requests.

Configuration code

ModPagespeedShardDomain domain_to_shard shard1, shard2, shard3...

Merge css Diagrams

Multiple background images may be used in css, such as the button press status and normal status. This filter combines these images into one image, then, the original image is located through background-position.

Configuration code

ModPagespeedEnableFilters rewrite_css, sprite_images

DNS pre-resolution

Use <link rel = "dns-prefetch" href = "###"/> to implement DNS pre-resolution. This type of filter analyzes the links in the web page, and then places the domain name to be used in the head to implement pre-resolution.

Configuration code

ModPagespeedEnableFilters insert_dns_prefetch

Reduces extra request overhead

Rewrite Domain Name

The domain name is changed to the domain name specified in the configuration.

Configuration code

ModPagespeedEnableFilters rewrite_domains

Reduce the length of webpage content

Collapse blank characters

Replace multiple consecutive white spaces with a single white space character. Of course, the previous question is not to change any form of expression. For example, consecutive spaces in the <pre> label are not folded.

Configuration code

ModPagespeedEnableFilters collapse_whitespace

Simplified html attributes

Simplify some valueless attributes. For example, you can simplify <a disabled = "disabled"/> to <a disabled/>.

Configuration code

ModPagespeedEnableFilters elide_attributes

Compressing js

Compress js, delete comments, line breaks, spaces, and so on, replace and shorten the variable name and function name, and extract common code.

Configuration code

ModPagespeedEnableFilters rewrite_javascript

Image Optimization

You can convert an image into an embedded encoding.

Allows you to re-compress images, such as gif to png, and jpg to increase the compression rate.

You can adjust the image size to reduce network traffic.

Configuration code

ModPagespeedEnableFilters rewrite_images

ModPagespeedEnableFilters inline_images

ModPagespeedEnableFilters recompress_images

ModPagespeedEnableFilters convert_gif_to_png

ModPagespeedEnableFilters convert_jpeg_to_progressive

ModPagespeedEnableFilters recompress_jpeg

ModPagespeedEnableFilters recompress_png

ModPagespeedEnableFilters recompress_webp

ModPagespeedEnableFilters strip_image_color_profile

ModPagespeedEnableFilters strip_image_meta_data

ModPagespeedEnableFilters pai_subsampling

ModPagespeedEnableFilters convert_png_to_jpeg

ModPagespeedEnableFilters resize_images

ModPagespeedEnableFilters convert_effec_to_webp

ModPagespeedEnableFilters convert_to_webp_lossless

ModPagespeedEnableFilters insert_image_dimensions

ModPagespeedEnableFilters resize_rendered_image_dimensions

Optimize browser Rendering

Convert meta information

Convert http-equiv meta information into an HTTP Header

Configuration code

ModPagespeedEnableFilters convert_meta_tags

Delay js execution

Delay the execution time of js Code after the onload event.

Configuration code

ModPagespeedEnableFilters defer_javascript

Image Preview

Embed thumbnails of images into html code to improve page rendering speed.

Configuration code

ModPagespeedEnableFilters inline_preview_images

ModPagespeedEnableFilters resize_mobile_images

Delayed image loading

Load the image when you see the image. This filter is suitable for websites with many images, which can save some bandwidth.

Configuration code

ModPagespeedEnableFilters lazyload_images

Move css to the header

This filter prevents the browser from repeatedly scanning the entire web page.

Configuration code

ModPagespeedEnableFilters move_css_to_head

Rewrite css

Compress and optimize css.

Configuration code

ModPagespeedEnableFilters rewrite_style_attributes

Add head labels

This filter is very simple. It only finds whether there is a head tag in the webpage. If not, it adds an empty head tag.

Configuration code

ModPagespeedEnableFilters add_head

Other filters

Record page loading

Add some js Code to the page to record the page loading information and feed it back to the server for subsequent optimization.

Configuration code

ModPagespeedEnableFilters add_instrumentation

Add js source map

To facilitate debugging of compressed JavaScript code, add the js source map for debugging.

Configuration code

ModPagespeedEnableFilters include_js_source_maps

Convert @ import in css to <link> label

The optimization function of this method is limited. You can use combine_css, rewrite_css, inline_css, and extend_cache for optimization.

Configuration code

ModPagespeedEnableFilters inline_import_to_link

Join Google Analytics

Add Google Analytics to the page

Configuration code

ModPagespeedEnableFilters insert_ga

ModPagespeedAnalyticsID <Analytics ID>

Asynchronous Google Analytics

Set Google Analytics to asynchronous loading. In the case of synchronous loading, other scripts cannot be loaded when Google Analytics is not fully loaded. This problem will not occur after asynchronous loading is enabled.

Configuration code

ModPagespeedEnableFilters make_google_analytics_async

Backward compatibility

Converts html5 code to improve html4 compatibility.

Configuration code

ModPagespeedEnableFilters pedantic

Run the experiment

In order to test the performance optimization effect, this filter can be used to record the experiment data to facilitate analysis of the optimization effect.

Configuration code

ModPagespeedRunExperiment on

ModPagespeedAnalyticsID UA-XXXXXXX-Y.