Tutorials • Dev

Configuring the Google PageSpeed module

In this article, the method for selectively activating or deactivating PageSpeed filters related to the additional SEO option will be presented.

Views 1734Updated 2 aniPublished on 04/06/2020by Alexandru Jurca

Introduction

In the event that activating the additional SEO option and implicitly the Google PageSpeed module creates unwanted differences within the site, either visually or functionally, various components of the module can be selectively deactivated by editing the .htaccess file.

Requirements

The access details for the control panel (Plesk or cPanel, depending on the case), for editing the .htaccess file through the File Manager.

Steps

To check if the PageSpeed module is responsible for the encountered issue, the entire module can be disabled by adding the following line in the .htaccess file from the root directory of the site:

ModPagespeed off

After this step, if the site loads correctly, the lines added above will be deleted and the process will continue to identify the specific element responsible for the erroneous display.
A first step would be to check the errors received when loading the page by accessing it with Developer Mode from the browser, the general shortcut for activation being F12 for usual browsers. For example, a loading error for JS or CSS will indicate a possible conflict with PageSpeed filters, which interact with these elements.

To disable a specific filter, the following rule should be added to the .htaccess file:

ModPagespeedDisableFilters filter_name

Where name_filter will be replaced with the desired identifier.

Alternatively, the operating mode of PageSpeed can be changed, so that you can selectively activate each desired element by setting:

ModPagespeedRewriteLevel PassThrough

Then, the desired elements for activation will be specified as follows:

ModPagespeedEnableFilters filter_name

Also, nume_filtru will be replaced with the desired identifier.

A .htaccess file can also be created with these rules in a subdirectory that contains styles (CSS, Javascript, HTML). In this way, the preferential rules will strictly apply to that subdirectory.
The items that are activated by default when enabling the additional SEO option are:
*These are also the identifiers that you can use in the .htaccess rules.

- add_head
  Adds an element of type <head> to the document if it does not already exist.
- combine_css
  Combines multiple CSS elements into one.
- combine_javascript
  Combines multiple JavaScript elements into a single one.
- remove_comments
  Removes comments from processed HTML files. However, it does not remove inline CSS or JavaScript comments.
- sprite_images
  Combine the background images from CSS into a single Sprite.
- collapse_whitespace
  Removes empty spaces from HTML files, excluding the tags: "pre, script, style, textarea"
- lazyload_images
  Loads images only when they become visible within the page.
- convert_meta_tags
  Adds a "response header" for each "meta" tag with an "http-equiv" attribute.
- extend_cache
  Extends the retention time for the cache related to images, CSS elements, and scripts that have not been optimized, by signing the URLs with a content hash.
  The following filters are implicitly active if extend_cache is enabled:
  extend_cache_css
  extend_cache_images
  extend_cache_scripts
  For a higher level of control, the filters mentioned above can be activated individually
- fallback_rewrite_css_urls
  Rewrite URLs for resources that could not be minimized or processed from CSS files.
- flatten_css_imports
  Recursively replaces each @import rule with the content of the imported CSS file to reduce the number of external requests.
- inline_css
  Adds small external CSS resources to the HTML document in inline form.
- inline_import_to_link
  Transforms "style" tags containing only CSS @import into equivalent "link" tags
- inline_javascript
  Rewrite small-sized JS resources as inlines within the HTML document.
- rewrite_css
  Rewrites CSS files to remove comments and excessive whitespace.
- rewrite_images
  Optimizes images by modifying them and removing extra pixels.
  Additionally, it adds small images as inlines in the document.
- rewrite_javascript
  Rewrites JavaScript files, removes excess whitespace and comments.
- rewrite_style_attributes_with_url
  Rewrites CSS from Style attributes if it contains the text "url(" using the filturl rewrite_css configured.

Introduction

Requirements

Steps

Similar Articles