Introduction

WPSpeed – The professional solution to boost your website performance

______________________________________________________________________________

Introduction

Google rolled out the new "Speed" reports within Google Search Console to confirm that the

speed factor will be more and more important for the ranking of a website.

As if this wasn't enough, Google Chrome is going to integrate a special badge to mark slow

websites, as already happened with the passage to the https protocol. This means that visitors

will be scared of sites marked as slow and Google Chrome will suggest abandoning them... as a

consequence having a fast website is no more an option but a 'must'!

The PageSpeed Insights (PSI) reports on the performance of a page on both mobile and desktop

devices, and provides suggestions on how that page may be improved. At the top of the report,

PSI provides a score which summarizes the page’s performance.

This score is determined by running “Lighthouse” to collect and analyze lab data about the page.

A score of 90 or above is considered fast, and 50 to 90 is considered moderate. Below 50 is

considered to be slow.

WPSpeed increases performance of your website by applying automatically several

improvements as suggested by Google PageSpeed best practices.

Main features of WPSpeed are:

• Scripts minification – Javascript can be minified to reduce the total scripts size and save

bandwidth

• Stylesheets minification – CSS can be minified to reduce the total CSS size and save

bandwidth

• HTML minification – the HTML source code can be minified to reduce the total page size

and save bandwidth

• Combine multiple JS and CSS files– Javascript and CSS can be combined in single files to

minimize the HTTP request overhead

• Lazy-load – Images, iframes and HTML elements that are out of view can be lazy-loaded

only when the user scrolls down the page to display them

• Images optimization – Large images can be rescaled, resized and optimized on the fly to

dramatically reduce the page size and bandwidth

• Htaccess optimization – A series of optimizations can be applied to the htaccess file in order

to leverage the browser caching

• Combine images – It's possible to generate a single container image for multiple backgrounds

applied through CSS

• HTTP/2 optimizations – WPSpeed works with HTTP/2 compatible servers to enable server

push

• CDN support – Links for all assets can be automatically rewritten to point to your CDN

domain

Main configuration

After installing the WPSpeed plugin on your Wordpress website, you can open plugin settings

and start to enable the various features and optimizations.

Combine assets

The basic optimizations that should always stay enabled, are the 'Combine Assets' and 'Minify

Assets' ones. Thanks to these features, multiple Javascript and CSS files can be minified and

combined into single files merging the contents of different assets into a unique resource.

This means that HTTP requests will be reduced to essential ones.

Once activated the combine and minify features, it's also possible to manage advanced options

such as:

• The cache lifetime for combined files

• The possibility to 'defer' styles and scripts to further improve the performance

• The possibility to load the whole Javascript asyncronously to further improve the

performance

• The possibility to improve Google fonts loading

Both Javascript and CSS files are

combined into aggregated ones

Assets are minified to reduce their size

Minify assets and HTML

Javascript and CSS code can be minified stripping out optional comments, spaces, tabulations,

etc.

Furthermore, also the HTML source code of the page can be minified to dramatically reduce the

total page size that is directly downloaded by a browser.

To activate the HTML minification it's enough to turn on the following settings:

Pay attention to the level of minification reserved to the HTML source code. Indeed for the

HTML there are 3 different stages and different types of compression that in certain cases could

cause undesired effects or conflicts.

For this reason you can progressively increase the level choosing:

• Low level - multiple whitespaces outside of elements will be reduced to a single one

• Normal level - comments and all not needed whitespaces or carriage returns will be

removed

• High level – comments, all not needed whitespaces or carriage returns, quotes or double

quotes from around attributes will be removed

If you experience issues due to a too much high level of compression, it's recommended to

reduce it to a lower level.

Obviously the higher the compression level the smaller the total page size will be. So from a

performance perspective it's better to reach the highest possible level while keeping the website

stable and working well with all various installed plugins.

Enable the minification of the HTML code

and choose the minification level

Inclusions and exclusions of assets

When the 'Combine assets' feature is enabled, it's not uncommon to experience issues, errors or conflicts

especially about the Javascript loaded on pages.

In most cases this is due to the change in the order of execution of scripts included by various plugins that

have been installed on the Wordpress website.

To handle and solve this kind of problems, WPSpeed has a powerful system to manage inclusions and

exclusions of assets that should not be included in the combined file.

When you choose to exclude a certain asset from the combined file, it will be extracted and listed in the

page source code normally, thus preserving the correct order of execution applied when the browser is

going to parse the HTML code.

First of all you can choose which resources should be included in the combined files using the following

settings:

• Include all assets – If this option is not enabled, only files that are part of the Wordpress core will

be included

• Include imported CSS files – In the case that CSS files with an @import directive are detected, the

target CSS file will be fetched and merged

• Include PHP and external resource files – In the case that there are dynamic CSS or JS files

generated by the server through PHP, they will be fetched and merged

• Include inline CSS styles – All inline stylesheets directly embedded in the HTML source code will

be merged

• Include inline scripts - All inline scripts directly embedded in the HTML source code will be

merged

Once you have chosen which assets must be involved in the combine process, you can go on and exclude

particular resources choosing them one by one or simply entering the name or substring.

It's possible to exclude:

• Single CSS files

• All CSS files for a given plugin

• Inline CSS styles

• Single Javascript files maintaining the original order of execution or not maintaining it

• All Javascript files for a given plugin maintaining the original order of execution or not

maintaining it

• Inline scripts

• Certain pages or URLs

Include settings for the assets that

will be merged in the combined files

There are even more advanced settings to apply global exclusions or to improve the loading of files that

have been excluded in order to preserve a performance improvement.

Files that are loaded in 'defer' mode (deferred) won't impact the page loading time, indeed they are only

executed once the HTML document has been fully parsed.

Exclude certain CSS files

Exclude all JS files for a given plugin

while preserving the original order of execution

Exclude a specific JS file without preserving

the original order of execution

Exclude the whole plugin on

certain pages or URLs

Keep the original position

for excluded files

Lazy-load

WPSpeed is capable to lazy-load images, iframes, video/audio tags that are out of view and also

HTML elements that are especially heavy, for example for the LCP (Largest Contentful Paint).

To lazy-load HTML elements it's required to use common CSS selectors to identify target tags.

Indeed there is no need to fetch all resources at the begining of the page load if they are not

immediately visible, they can be lazy-loaded only when the user scrolls down the page to display

them.

This feature dramatically reduces the loading time of the page and the usage of the bandwidth.

You can enable lazy-loading and choose preferred settings for example to exclude images or

apply a loading effect:

WPSpeed takes the lazy-load method to the next level making it possible to defer the loading of

entire parts of a page.

Thanks to a powerful system based on CSS selectors you can choose to load certain elements

such as the footer, only when the user scroll down to reach them or after a prefixed time delay.

Enable lazy-load for resources

Exclude images that

should not be lazy loaded

Enable loading effects, iframe lazy-load

and advanced settings

Lazy-load entire parts of a page

DIV tags having a class name 'wp-container-8' will

be lazy-loaded when the user scrolls down to them

Images optimization

WPSpeed has a powerful system to optimize heavy images on the fly that will be compressed

and cached to reduce the bandwidth usage and speed up your site.

Pay attention that as a consequence of the optimization, the quality of images may be

significantly decreased on large screens, so you have to properly evaluate which settings adapt

better to the contents and type of visitors of your website.

It's possible to choose various aspects such as:

• The minimum width of an image to apply the optimization for

• The conversion to the new format WebP, if supported by your server, and settings for the

quality for compressed images

• The resizing of optimized images

• The minimum width for an image to be resized

• The automatic generation of a srcset

• The optimization of images loaded through CSS and HTML background

• Exclusions for certain images that should not be altered in any way

Enable the optimization of images

Resize images

Convert images to the

next generation format 'WebP'

Automatically generate a

srcset for each image

Adaptive Contents

The Adaptive Contents feature makes it possible to remove certain parts of HTML or CSS/JS

files to generate a lightweight version of the website.

This dramatically raises the page speed score without losing website functionalities for regular

visitors.

Thanks to this feature when the page is crawled by bots and page speed tools such as the Google

PageSpeed Insights, Lighthouse or GTMetrix it's possible to:

1. Remove certain HTML elements from the page, for example to reduce the CLS value

2. Remove certain JS files

3. Remove certain CSS files

4. Remove all JS and CSS code

This is especially helpful to improve the following PageSpeed metrics:

• Minimize main-thread work

• Reduce Javascript execution time

• Avoid enormous network payloads

If necessary it's also possible to define a custom list of bots user-agent strings to match various

page speed tools.

This feature will not affect the normal version of the website that is loaded by visitors, indeed the

great advantage of Adaptive Contents is that it's possible to serve optimal contents for each use

case and reach the maximum score otherwise impossible to achieve with other technologies.

Enable Adaptive Contents and enter

CSS selectors for elements to remove

Choose certain JS or CSS files to remove

Choose to remove all JS/CSS code

Define the list of user-agent strings

Page Cache and Instant Page

WPSpeed integrates in its core a page caching system, so that there is no need to use a separate

plugin for this purpose, furthermore the great advantage is that the WPSpeed page cache

perfectly copes with the rest of optimizations.

Thanks to a page cache, the HTML source code of pages can be entirely cached to significantly

speed up the page load. Indeed there is no longer need to hit your server PHP to re-process the

final page each time, nor to query your database. The resulting page once that has been cached,

is reused as is for subsequent requests.

The page cache can be tricky while configuring the plugin or making changes to the site, in this

case pay attention to keep the page cache disabled or clear it.

WPSpeed also includes an innovative feature to have an instant page load for human visitors, in

order to optimize performance for bots but also for visitors.

This system is named 'Instant Page' and it preloads the page before that it's actually opened with

the result to have it rendered instantly if the user chooses to click and open it.

Enable page cache, choose settings

such as the cache lifetime

Enable the Instant Page system

Assets management

WPSpeed includes a special feature to remove Javascript and CSS resources that have an heavy

impact on the performance of the website.

Thanks to WPSpeed it's possible to easily remove the loading of these resources through below

settings, but keep in mind that removing a resource could cause the loss of important

functionalities for the website, or change its layout and aspect.

So you should use this feature carefully to disable only features that are not essential or assets

that are not used on your website.

Keep in mind that after removing a given resource you may need to clear the WPSpeed cache in

order to refresh the compiled JS/CSS files and apply changes.

Furthermore it's also possible to add custom snippets of JS and CSS code if you need for

example to apply certain fixes to styles or load dynamic scripts.

Type in the Javascript files that need be removed

Type in the CSS files that need be removed

Add custom JS or CSS code

HTTP/2

HTTP/2 Server Push is a modern technology that allows an HTTP/2-compliant server to send

resources to a HTTP/2-compliant client before the client requests them.

It is, for the most part, a performance technique that can be helpful in loading resources

preemptively.

If this option is enabled, WPSpeed will communicate to the server to operate using this

technology, keep in mind that this only works on a HTTP/2 compliant server.

If you have doubts about the compatibility of your server with the HTTP/2 protocol, it's

recommended to contact your hosting provider.

Server push lets the server preemptively “push” website assets to the client without the user

having explicitly asked for them. When used with care, it's possible to send what it's known the

user is going to need for the page they’re requesting. Resources can be downloaded in parallel.

Enable the HTTP/2 Server Push headers

Combine images

In the case that your template and installed plugins load several images through CSS background

styles, thanks to the 'Combine images' feature they can be combined into one single image

working as a container, in order to reduce the number of HTTP requests.

You can choose and customize several aspects of this functionality, mainly to avoid issues and

undesired results when original images are wrapped within the container:

To avoid issues and incorrect display, it could be particularly useful to:

• Manage the orientation of combined images within the container image

• Enable the auto-format

• Exclude specific images

• Include additional images

Enable and choose settings

to combine background images

CDN usage

If you use a CDN, you can take advantage of the WPSpeed plugin so that all static assets such as

background images, Javascript, CSS files, etc will be loaded automatically from your CDN

domain.

You can specify up to 3 different CDN domains for various assets loaded on the website, it's

enough to choose the scheme, domain and resource types:

For all CDN domains it's possible to set:

1. CDN domain

2. Type of files loaded from a CDN

3. Preconnect mode to further speed up loading of resources

Enable CDN domains for assets

Auto configuration and Google PageSpeed API

To simpify the process of configuring the plugin through its many settings, JSpeed includes an

auto configuration system capable of increasing the level of optimization and achieving the best

results while preserving the functionaly of the website.

Using the auto configuration tool is straightforward, just change the slider level and test the

website performance until you find the optimal combination of settings.

Once the level of optimization has been selected, save the configuration to apply settings. Of

course, after applying a certain level of optimization, you can still customize individual settings

one by one.

To test the performance of the website against JSpeed optimizations, you can take advantage of

the Google's built-in PageSpeed testing tool.

It's no longer necessary to manually test the Google PageSpeed score on an external website,

indeed JSpeed implements the Google PageSpeed API and integrates the results in the backend.

Thanks to the integrated tool, it's possible to monitor the performance and the score of each page

efficiently.

By default the tool will execute the Google PageSpeed test for your website homepage, but it's

also possible to enter a specific page URL to test.

Finally you could also register your own Google application and ApiKey, in this case just enter

the generated ApiKey in the relevant field.

Change the level of optimization for the plugin

This list includes all optimizations

applied for a given level

Click the button to start the Google

PageSpeed Insights test

Performance report for both

mobile and desktop version

The report applies to the

selected page URL

Advanced settings and features

FinallyWPSpeed includes some advanced features that could help to improve the performance

score of your website.

In more details WPSpeed is capable of:

• Extract Basic CSS Styles: this feature extracts basic CSS styles required to format the page

above the fold and put this in a <style> element inside the <head> section of the HTML to

prevent 'render-blocking'.

• Reduce DOM Tree: HTML5 DOM elements exceeding the limit of 600 below the fold will

be removed and loaded asynchronously using Javascript after that the page has been fully

rendered.

The plugin includes also a debug mode and a log system.

If you experience complex conflicts to solve, consider to enable the debug mode of WPSpeed.

Thanks to the debug mode of WPSpeed, each URL of an original file is included in the combined

files and the log system will be enabled so that you can inspect the log file at the path: root/wp-

content/plugins/wpspeed/logs

Advanced optimizations of WPSpeed

Debug mode and advanced settings

Htaccess optimization

WPSpeed is capable to optimize your htaccess in order to leverage browser caching for loaded

assets such as images, CSS, scripts, etc

This is accomplished adding special directives to leverage browser caching and gzip

compression, keep in mind that the Apache modules mod_expires, mod_headers and

mod_deflate must be enabled on the server in order to have these optimizations working. If you

have doubts about the activation of these modules on your server, it's recommended to contact

your hosting provider to get the list of installed and enabled Apache modules. It also adds

htaccess rules for the new Brotli compression that can be used if your server supports it.

To optimize your htaccess file it's enough to click once on the toolbar button:

WPSpeed cache

The plugin uses a cache for all combined assets in order to process them only once and keep

them valid until the cache becomes stale.

If you apply changes to the website you may need to clear the WPSpeed cache in order to get

modifications applied immediately, without waiting that the cache lifetime expires.

To do this, it's enough to click on the toolbar button 'Clear cache'. By clicking the 'Clear cache'

button, also the page cache will be deleted if it has been enabled.

As an alternative you can just refresh the cache by clicking on the button 'Refresh cache' so that

browsers will fetch updated contents.

There are also labels that show the amount of cache generated on your server by WPSpeed so

that it's possible to have its size and the number of files under control.

Click to optimize the htaccess file

Clear the JSpeed cache for

combined assets and images

Cache size and files

Auto updates

To update the WPSpeed PRO plugin using the Wordpress updates system you must enter the

exact email address used to register on our site https://storejextensions.org.

The email address is used to identify your account and the validity of the updates license for the

PRO paid version.

Free updates are included for 1 year from the date of the latest purchase.

More info about licensing and updates at our FAQ page https://storejextensions.org/faq.html"

Our commercial plugins requires a valid license in order to be updated using the Wordpress

updates system or manually by downloading and installing the latest package through the

Wordpress plugins installer.

Enter your email address used to

to validate your updates license