SwissUpLabs Logo

Pagespeed QuickStart

Lets start

Problems list

Check your site pagespeed rank and take results screenshot We recomend use Google Page speed insights online tool Usally we also check results at Gtmetrix online tool.

Open configuration Store > Configuration > Swissup > Pagespeed

In Main section set Enable - Yes

Main section

Or enable using cli:

php bin/magento config:show pagespeed/main/enable
php bin/magento config:set pagespeed/main/enable 1

If your store is in developer mode, you need to enable developer mode compatability:

Enable in developer mode - Yes

To check current mode, use cli command:

php bin/magento deploy:mode:show

Enable compression

If on google pagespeed suggestion you can see something like:

Enable compression

Enable compression

Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.

Enable compression for the following resources to reduce their transfer size by 1.9MiB (76% reduction).

How to fix

When optimizing a website’s performance, the very first thing you should check is whether or not your site is taking advantage of GZIP Compression. If you see green message. All right. But if you see red error message than you need to enable and test gzip compression support on your web server.

The HTML5 Boilerplate project contains sample configuration files for all the most popular servers with detailed comments for each configuration flag and setting: find your favorite server in the list, look for the gzip section, and confirm that your server is configured with recommended settings.

You can check your site here.

For Apache

Find and uncomment deflate section in your pub/.htaccess and .htaccess files

Uncomment Default configuration
<IfModule mod_deflate.c>

    ############################################
    ## Enable apache served files compression
    ## http://developer.yahoo.com/performance/rules.html#gzip

    # Insert filter on all content
    SetOutputFilter DEFLATE
    # Insert filter on selected content types only
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript

    # Netscape 4.x has some problems...
    BrowserMatch ^Mozilla/4 gzip-only-text/html

    # Netscape 4.06-4.08 have some more problems
    BrowserMatch ^Mozilla/4\.0[678] no-gzip

    # MSIE masquerades as Netscape, but it is fine
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

    # Don't compress images
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

    # Make sure proxies don't deliver the wrong content
    Header append Vary User-Agent env=!dont-vary

</IfModule>
Or Add following code in end of .htaccess files
    <IfModule mod_php5.c>
        ## enable resulting html compression
       php_flag zlib.output_compression on
    </IfModule>

    <IfModule mod_deflate.c>

        SetOutputFilter DEFLATE
        AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php
        BrowserMatch ^Mozilla/4 gzip-only-text/html
        BrowserMatch ^Mozilla/4\.0[678] no-gzip
        BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
        BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
        SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip

    </IfModule>

    Header set Connection keep-alive

    # Expires Headers - 2678400s = 31 days
    <IfModule mod_expires.c>
      ExpiresActive On
      ExpiresDefault "access plus 1 seconds"
      ExpiresByType text/html "access plus 7200 seconds"
      ExpiresByType image/gif "access plus 2678400 seconds"
      ExpiresByType image/jpeg "access plus 2678400 seconds"
      ExpiresByType image/png "access plus 2678400 seconds"
      ExpiresByType text/css "access plus 518400 seconds"
      ExpiresByType text/javascript "access plus 2678400 seconds"
      ExpiresByType application/x-javascript "access plus 2678400 seconds"
    </IfModule>

    # Cache Headers
    <IfModule mod_headers.c>
      # Cache specified files for 31 days
      <FilesMatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
      Header set Cache-Control "max-age=2678400, public"
      </FilesMatch>
      # Cache HTML files for a couple hours
      <FilesMatch "\.(html|htm)$">
      Header set Cache-Control "max-age=7200, private, must-revalidate"
      </FilesMatch>
      # Cache PDFs for a day
      <FilesMatch "\.(pdf)$">
      Header set Cache-Control "max-age=86400, public"
      </FilesMatch>
      # Cache Javascripts for 31 days
      <FilesMatch "\.(js)$">
      Header set Cache-Control "max-age=2678400, private"
      </FilesMatch>
    </IfModule>
Check Apache configuration files Check and Enable AllowOverride option in you Apache configuration ``` AllowOverride All ``` Apache configuration file is located in one of these locations: ``` /etc/apache2/httpd.conf /etc/apache2/apache2.conf /etc/httpd/httpd.conf /etc/httpd/conf/httpd.conf ``` Check also ``` KeepAlive On ``` If you do not have any error you have AllowOverride None or All. Then alter the Deny/Allow to: ``` Deny From All ``` If you have the 403 result it's a AllowOverride All. Comment 'Deny From All' ``` #Deny From All #Check for AllowOverride All ```

For Nginx

/etc/nginx/nginx.conf

gzip on;
gzip_disable "msie6";

gzip_comp_level 6;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_proxied any;

gzip_types
text/plain
text/css
text/js
text/x-js
text/xml
text/html
text/javascript
image/svg
image/svg+xml
image/eps
application/javascript
application/x-javascript
application/json
application/xml
application/rss+xml
application/xml+rss;

gzip_vary on;

#browser caching of static assets
location ~*  \.(jpg|jpeg|png|webp|gif|ico)$ {
  expires 31d;
}

#browser caching of css
location ~*  \.(css)$ {
  expires 6d;
}

#browser caching of js
location ~*  \.(js)$ {
  expires 31d;
}

Minify JavaScript

If you see something like:

Minify Js

Minify JavaScript

Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time.

Minify JavaScript for the following resources to reduce their size by 235.8KiB (44% reduction).

How to fix

Open configuration Store > Configuration > Swissup > Pagespeed > JavaScript Settings

Enable

Merge JavaScript File - Yes
Minify JavaScript Files - Yes

JavaScript Settings

Please go to Cache Management and refresh cache types.

Remove render-blocking JavaScript

If you see something like:

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 1 blocking script resources. This causes a delay in rendering your page.

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

Remove render-blocking JavaScript:

How to fix

Open configuration Store > Configuration > Swissup > Pagespeed > JavaScript Settings > Deferred javascripts

Set option

Enable - Yes
Add Unpack - Yes

Please go to Cache Management and refresh cache types.

Minify HTML

If you see something like:

Minify HTML

Minify HTML

Compacting HTML code, including any inline JavaScript and CSS contained in it, can save many bytes of data and speed up download and parse times.

Minify HTML for the following resources to reduce their size by 1.4KiB (27% reduction).

How to fix

Open configuration Store > Configuration > Swissup > Pagespeed > Minify HTML Content

Minify HTML Content

Set

Enable - Yes
Js Content Minification Enable - Yes
CSS Content Minification Enable - Yes
Minify Templates - Yes

Please go to Cache Management and refresh cache types.

Minify CSS

If you see something like:

Minify CSS

Compacting CSS code can save many bytes of data and speed up download and parse times.

Minify CSS for the following resources to reduce their size by 327B (16% reduction).

How to fix

Open configuration Store > Configuration > Swissup > Pagespeed > CSS Settings

CSS Settings

Set

Merge CSS Files - Yes
Minify CSS Files - Yes

Please go to Cache Management and refresh cache types.

Optimize CSS Delivery

If you see something like:

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 1 blocking CSS resources. This causes a delay in rendering your page.

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

Optimize CSS Delivery of the following.

How to fix

Open configuration Store > Configuration > Swissup > Pagespeed > CSS Settings > Optimize CSS Delivery

Set

Enable - Yes
Enable LoadCss - Yes

Please go to Cache Management and refresh cache types.

Be careful this option can cause FOUC.

For fix it you need do Prioritize Visible Content.

Prioritize Visible Content

If you see something like:

Prioritize visible content

Your page requires additional network round trips to render the above-the-fold content. For best performance, reduce the amount of HTML needed to render above-the-fold content.

The entire HTML response was not sufficient to render the above-the-fold content. This usually indicates that additional resources, loaded after HTML parsing, were required to render above-the-fold content. Prioritize visible content that is needed for rendering above-the-fold by including it directly in the HTML response.

Only about 7% of the final above-the-fold content could be rendered with the full HTML response.

How to fix

Open configuration Store > Configuration > Swissup > Pagespeed > CSS Settings > Critical CSS (Prioritize Visible Content)

Generate your store critical css here.

Set

Enable - Yes
Default Critical CSS - [Set generated criticall css]

Please go to Cache Management and refresh cache types.

Check 404 errors on page.

Optimize images

If you see something like:

Optimize images

Properly formatting and compressing images can save many bytes of data.

Optimize the following images to reduce their size by 17.1KiB (14% reduction).

How to fix

Before images can be optimized, you will need to install the Optimizers as described in article

  sudo apt-get install jpegoptim
  sudo apt-get install optipng
  sudo apt-get install pngquant
  sudo npm install -g svgo
  sudo apt-get install gifsicle

Open configuration Store > Configuration > Swissup > Pagespeed > Image Processing Settings > Optimize Catalog images

Image Processing Settings

Set

Enable - Yes

Please go to Cache Management and refresh cache types.

Also you can run cli command for manual creating resized product images

  php bin/magento catalog:images:resize

One line command

curl -s https://raw.githubusercontent.com/swissup/swissup.github.io/master/m2/extensions/pagespeed/configure | bash -s
php bin/magento cache:flush
php bin/magento config:set pagespeed/main/enable 1
php bin/magento config:set pagespeed/main/devmode 1
php bin/magento config:set pagespeed/content/enable 1
php bin/magento config:set pagespeed/content/js 1
php bin/magento config:set pagespeed/content/css 1
php bin/magento config:set dev/template/minify_html 1
php bin/magento config:set dev/js/merge_files 1
php bin/magento config:set dev/js/enable_js_bundling 0
php bin/magento config:set dev/js/minify_files 1
php bin/magento config:set pagespeed/js/defer_enable 1
php bin/magento config:set pagespeed/js/defer_unpack 1
php bin/magento config:set dev/css/merge_css_files 1
php bin/magento config:set dev/css/minify_files 1
php bin/magento config:set pagespeed/css/defer_enable 1
php bin/magento config:set pagespeed/css/defer_onload 1
php bin/magento config:set pagespeed/css/critical_enable 1
php bin/magento config:set pagespeed/css/critical_default "$(curl --get --silent --fail "http://ci.swissuplabs.com/pagespeed/critical-css/generate?" --data-urlencode "website=$(php bin/magento config:show web/unsecure/base_url)")"
php bin/magento config:set pagespeed/image/optimize_enable 1
php bin/magento config:set pagespeed/expire/enable 1
php bin/magento config:set pagespeed/dnsprefetch/enable 1

php bin/magento cache:flush
php bin/magento config:show web/unsecure/base_url
php bin/magento config:set pagespeed/css/critical_default "$(curl --get --silent --fail "http://ci.swissuplabs.com/pagespeed/critical-css/generate?" --data-urlencode "website=$(php bin/magento config:show web/unsecure/base_url)")"
php bin/magento config:show pagespeed/css/critical_default
php bin/magento cache:flush
See also

Great! Now you might want to see previous:

Edit this Page