|
<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.