Fortinet black logo

Handbook

Creating PageSpeed profiles

Creating PageSpeed profiles

PageSpeed provides a technology solution to speed up web application response and optimize web pages and resources in real time.

As a module on FortiADC device, PageSpeed is simple to deploy and does not require any integration into Web application servers or any client installation on end-user devices. With the PageSpeed feature, you can select the approach(es) to make your web site faster and more user-friendly.

A PageSpeed profile specifies the option(s) for optimizing the delivery of web applications. To take full advantage of the benefits that PageSpeed offers, you must first create your own PageSpeed profiles and then select the application optimization option(s) to add to them. Once you have your own PageSpeed profiles created, you can simply select them to include in any PageSpeed configurations you create.

FortiADC offers options for optimizing the delivery of the following web content:

  • HTML
  • CSS
  • Image

For more information and instructions on how to use these options, see Table 1.

To create a PageSpeed profile:

  1. Click Server Load balance > Application Optimization.
  2. Select the Page Speed Profile tab.
  3. Make the entries or selections as described in Application optimization parameters.
  4. Click Save when done.

Application optimization parameters

Parameter Description
HTML

Disable (default) or enable HTML optimization. If enabled, you must also select a specific option(s) below.

Note: FortiADC supports optimization of compressed HTML files.

Move CSS to Head

If selected, FortiADC will move CSS elements above script tags.

Note: This ensures that the CSS styes are parsed in the head of the HTML page before any body elements are introduced,. In so doing, it can effectively reduce the number of times web browsers have to re-flow HTML documents.

CSS

Disable (default)/enable CSS optimization.

Note: If enabled, you must also select the specific option(s) below.

Combine CSS

If selected, FortiADC will combine multiple CSS elements into one.

Note: This option replaces multiple CSS files with a combined CSS file that contains the contents of all individual CSS files. As a result, it can reduce the number of HTTP/HTTPS requests web browsers make during page refresh. This is particularly beneficial to older browsers that can handle only up to two connections per domain. Not only can this reduce the overhead for HTTP/HTTPS headers and communications warm-up, but also work well with TCP/IP slow-start because it increases the effective payload bit rate through a browser's network connection.

Maxi Combine CSS Byte

Specify the maximum number of CSS bytes that can be combined. The default is 4,096.

Note: Valid values range from 1 to 10,240.

Image

Disable (default)/enable image optimization.

Note: If enabled, you must also select the specific option(s) below.

Resize Image

Disabled by default. If enabled, this will reduce the dimension of an image to the "width=" and "height=" attributes defined in the <img> tag or in the inline "style=attibute".

Note:

  • The option will remove color profile and metadata.
  • The re-sized image may also be re-compressed or converted to a new format and quality based on user configuration.
  • This option applies to .jpg, .png, and .webp images only.
JPEG Sampling

Disabled by default.When enabled, it will apply 4:2:0 chroma subsampling to .jpg images, in which hue and saturation have only 25% as many samples as brightness. Because the human eye is less sensitive to hue and saturation than to brightness, this subsampling technique can greatly reduce image size with no noticeable effect on perception

Creating PageSpeed profiles

PageSpeed provides a technology solution to speed up web application response and optimize web pages and resources in real time.

As a module on FortiADC device, PageSpeed is simple to deploy and does not require any integration into Web application servers or any client installation on end-user devices. With the PageSpeed feature, you can select the approach(es) to make your web site faster and more user-friendly.

A PageSpeed profile specifies the option(s) for optimizing the delivery of web applications. To take full advantage of the benefits that PageSpeed offers, you must first create your own PageSpeed profiles and then select the application optimization option(s) to add to them. Once you have your own PageSpeed profiles created, you can simply select them to include in any PageSpeed configurations you create.

FortiADC offers options for optimizing the delivery of the following web content:

  • HTML
  • CSS
  • Image

For more information and instructions on how to use these options, see Table 1.

To create a PageSpeed profile:

  1. Click Server Load balance > Application Optimization.
  2. Select the Page Speed Profile tab.
  3. Make the entries or selections as described in Application optimization parameters.
  4. Click Save when done.

Application optimization parameters

Parameter Description
HTML

Disable (default) or enable HTML optimization. If enabled, you must also select a specific option(s) below.

Note: FortiADC supports optimization of compressed HTML files.

Move CSS to Head

If selected, FortiADC will move CSS elements above script tags.

Note: This ensures that the CSS styes are parsed in the head of the HTML page before any body elements are introduced,. In so doing, it can effectively reduce the number of times web browsers have to re-flow HTML documents.

CSS

Disable (default)/enable CSS optimization.

Note: If enabled, you must also select the specific option(s) below.

Combine CSS

If selected, FortiADC will combine multiple CSS elements into one.

Note: This option replaces multiple CSS files with a combined CSS file that contains the contents of all individual CSS files. As a result, it can reduce the number of HTTP/HTTPS requests web browsers make during page refresh. This is particularly beneficial to older browsers that can handle only up to two connections per domain. Not only can this reduce the overhead for HTTP/HTTPS headers and communications warm-up, but also work well with TCP/IP slow-start because it increases the effective payload bit rate through a browser's network connection.

Maxi Combine CSS Byte

Specify the maximum number of CSS bytes that can be combined. The default is 4,096.

Note: Valid values range from 1 to 10,240.

Image

Disable (default)/enable image optimization.

Note: If enabled, you must also select the specific option(s) below.

Resize Image

Disabled by default. If enabled, this will reduce the dimension of an image to the "width=" and "height=" attributes defined in the <img> tag or in the inline "style=attibute".

Note:

  • The option will remove color profile and metadata.
  • The re-sized image may also be re-compressed or converted to a new format and quality based on user configuration.
  • This option applies to .jpg, .png, and .webp images only.
JPEG Sampling

Disabled by default.When enabled, it will apply 4:2:0 chroma subsampling to .jpg images, in which hue and saturation have only 25% as many samples as brightness. Because the human eye is less sensitive to hue and saturation than to brightness, this subsampling technique can greatly reduce image size with no noticeable effect on perception