CodeVoyager

Pagespeed module

Edit Page

Pagespeed module

Install ngx_pagespeed

Build-script for nginx pagespeed module on debian: pitchup/ngx_pagespeed_deb

Enable Google Pagespeed

In every server block where PageSpeed is enabled add, but this is configuration for HTTPS:


echo '

# Turn on ngx_pagespeed
#
pagespeed on;

# Use memcached
#
pagespeed MemcachedThreads 1;
pagespeed MemcachedServers "localhost:11211";

# using shared mem, writable by nginx daemon
# directive is mandatory, even if not needed with memcached
pagespeed FileCachePath /dev/shm/ngx_pagespeed_cache;
# OR: pagespeed FileCachePath /var/www/ganzohr.ch/web/_pagespeed_cache;

# filter settings: https://developers.google.com/speed/pagespeed/module/config_filters
pagespeed RewriteLevel CoreFilters;
pagespeed EnableFilters collapse_whitespace,remove_comments;

# pagespeed RespectVary on;
pagespeed DisableRewriteOnNoTransform off;

# preserve url relativity
pagespeed PreserveUrlRelativity on;

# Mandatory for SSL
# Avoid HTTP transport altogether
pagespeed LoadFromFile "http://www.save-up.ch"  "/var/www/vhosts/save-up.ch/httpdocs/";
pagespeed LoadFromFile "https://www.save-up.ch" "/var/www/vhosts/save-up.ch/httpdocs/";

# Req for pagespeed optimized resources go to pagespeed handler & no extra headers get set
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
location ~ "^/pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }

' > /var/www/vhosts/save-up.ch/conf.d/ngx_pagespeed.conf

Make sure that this is included:

1
2
3
4
5
6

echo '

# additional directives accessible via ftp
include /var/www/vhosts/save-up.ch/conf.d/*.conf;

' >> /var/www/vhosts/system/save-up.ch/conf/vhost_nginx.conf

Some pagespeed-rules

Check config with service nginx configtest, reload service nginx reload and test if ngx_pagespeed is active:

curl -s -I http://www.save-up.ch/ | grep -i "X-Page-Speed"

Configure ngx_pagespeed

Problem with temp-cache path in shared memory

First of all, if using memcached I don’t think this is important anymore.

The cache directory for FileCachePath directive must already created and writeable by the Nginx daemon.

I can fix that with:

echo '
# fix-script executed from /etc/rc.local
#
mkdir -p /run/shm/ngx_pagespeed_cache/
chown www-data:www-data /run/shm/ngx_pagespeed_cache/
' > /usr/local/bin/ngx_pagespeed_setshm.sh

# make it executable
chmod +x /usr/local/bin/ngx_pagespeed_setshm.sh

TMP='[ -x \/usr\/local\/bin\/ngx_pagespeed_setshm.sh ] \&\& \/usr\/local\/bin\/ngx_pagespeed_setshm.sh'
sed -i -re "s/^(exit 0)/$TMP\n\1/g" /etc/rc.local

Configuring PageSpeed Filters Using ngx_pagespeed With nginx On Debian Wheezy

SSL support

There is an additional configuration directives needed to make ngx_pagespeed work properly with SSL.

How To Setup Nginx & Pagespeed with SSL

Instead MapOriginDomain we will use LoadFromFile which is the same thing except it uses the file-system instead of the network to retrieve the resource.

???

Purge / flush pagespeed cache:

http://example.com/pagespeed_admin/cache?purge=*

touch /var/www/ganzohr.ch/web/_pagespeed_cache/cache.flush

The system may take up to 5 seconds to take effect. This does not delete the old files but it tells PageSpeed to ignore those files.

Original cache lifetime of the resource is by default 5 minutes. So, whenever you change something on static files, there can be a lag until it’s seen online.

The file cache is always required since files larger than 1Mb cannot be stored on memcached (which is, by the way, not true), and it is important to optimize large images.

These are all filters that are not included in CoreFilters set:

pagespeed UseExperimentalJsMinifier on;
pagespeed EnableFilters include_js_source_maps;

pagespeed EnableFilters prioritize_critical_css;
pagespeed EnableFilters move_css_above_scripts, move_css_to_head;
pagespeed EnableFilters sprite_images;
pagespeed EnableFilters inline_google_font_css;
pagespeed EnableFilters convert_to_webp_lossless;
pagespeed EnableFilters insert_image_dimensions;
pagespeed EnableFilters inline_preview_images,resize_mobile_images;
pagespeed EnableFilters dedup_inlined_images;
pagespeed EnableFilters remove_comments,collapse_whitespace;
pagespeed EnableFilters insert_dns_prefetch;

# High risk
pagespeed EnableFilters defer_javascript;

Interesting filters:

Canonicalize JavaScript Libraries  |  PageSpeed Module  |  Google Developers

danriti/bootstrap-pagespeed · GitHub Perfect PageSpeed score with the help of mod_pagespeed - automation ftw! · Issue #4 · danriti/bootstrap-pagespeed · GitHub

Prioritize critical CSS and defer JavaScript are the two “workhorse” filters (just as you noted in your writeup), but they are disabled by default.

For critical CSS the server beacons back the “above the fold” CSS, so keep in mind that you’ll have to reload the page a few times before it begins to inline resources.

Nginx performance tips using ngx_pagespeed - MaxCDN Blog

Purging Pagespeed cache

Flush it

We can always flush: https://developers.google.com/speed/pagespeed/module/system#flush_cache but we first must set something:

# Enable URL cache purging
pagespeed EnableCachePurge on;
pagespeed PurgeMethod PURGE;

# Enable admin for HTTP cache purging. Changed "pagespeed_admin" to "_pagespeed" for basic security

pagespeed AdminPath /_pagespeed;
location /_pagespeed { allow all; }

And then flush with:

curl --request PURGE 'http://www.ganzohr.ch/*'

but this HTTP request should work also:

https://www.ganzohr.ch/_pagespeed/cache?purge=*

Or we can create a small PHP file like here: http://giantdorks.org/alain/exploring-methods-to-purge-varnish-cache/

Shorten TTL (not a viable solution)

We can shorten origin TTL update from a lot to say 10 min. https://developers.google.com/speed/pagespeed/module/faq#ignores-changes

The best solution is this

Pagespeed module works after processing by HTTP server, but watch out - this will change that for specified directory (static files).

Also, because PageSpeed is loading the files directly from the filesystem, no custom headers will be set. For example, no headers set with the Header set (Apache) or add_header (Nginx) directives will be applied to these resources.

Loading static files from disk

pagespeed LoadFromFile "http://www.example.com/static/" "/var/www/static/";

or:

pagespeed LoadFromFileMatch "^https?://example.com/~([^/]*)/static/" "/var/www/static/\\1";

And we CAN use (As of 1.9.32.1) script variables on nginx:

pagespeed LoadFromFile "http://$host/static" "$document_root/static";

This should only be used for completely static resources which do not need any custom headers or special server processing.

Real solution

I have that, but it didn’t pick up because it is set for ganzohr, and not for other domains. pagespeed LoadFromFile “https://www.ganzohr.ch” “{DOCROOT}/”;

tascolto.ch tout-ouie.ch

Huge everything, if needed:

pagespeed StatisticsPath /ngx_pagespeed_statistics;
pagespeed GlobalStatisticsPath /ngx_pagespeed_global_statistics;
pagespeed MessagesPath /ngx_pagespeed_message;
pagespeed ConsolePath /pagespeed_console;
pagespeed AdminPath /pagespeed_admin;
pagespeed GlobalAdminPath /pagespeed_global_admin;

location /ngx_pagespeed_statistics { allow all; }
location /ngx_pagespeed_message    { allow all; }
location /pagespeed_admin          { allow all; }
location /pagespeed_console        { allow all; }

touch /var/ngx_pagespeed_cache/cache.flush

This must be done from command line though. Also, keep in mind that this won’t remove the files form cache but, rather tell pagespeed not to consider them until the new versions of the files have replaced the old ones.

mkdir -p /var/ngx_pagespeed_cache chown www-data:www-data /var/ngx_pagespeed_cache mount -t tmpfs -o size=200M,mode=0755 tmpfs /var/ngx_pagespeed_cache

echo ‘# Temporary space for Google Pagespeed module’ » /etc/fstab echo ’tmpfs /var/ngx_pagespeed_cache tmpfs size=200M,mode=0755 0 0’ » /etc/fstab

Source: Nginx PageSpeed configuration - GetPageSpeed

PageSpeed System Integration  |  PageSpeed Module  |  Google Developers no pagespeed_admin - Google Search PageSpeed Console  |  PageSpeed Module  |  Google Developers PageSpeed Admin Pages  |  PageSpeed Module  |  Google Developers Seite nicht gefunden - Ganzohr.ch Using Pagespeed - EasyEngine Install Google mod_pagespeed - The place of all tech articles nginx “pagespeed_admin” laravel - Google Search PageSpeed Console  |  PageSpeed Module  |  Google Developers New Tab

http://benohead.com/mod_pagespeed-clear-the-cache/ https://github.com/pagespeed/mod_pagespeed/issues/133 http://www.haloseeker.com/how-to-clear-google-mod_pagespeed-cache-on-your-server/

How I achieved 100/100 pagespeed score?

  • Google Pagespeed module used extensively
  • nginx: gzip, but that can be skipped as pagespeed would do that if i have not
  • nginx: browser caching, but also not sure if google pagespeed can fix that also
  • Google Webfont Optimizer to load fonts using official Web Font Loader technique.
  • W3 Total Cache: used for nothing, except for simple page cache to speed up server processing
  • Used Busted! plugin to have bust a cache automatically.
  • I have temporarily disabled analytics, but that can be solved also by loading scripts locally. There is a plugin for that, also.

I have a problem of FOUT because of fonts. Well there is a huge discussion on it: FOUT, FOIT, FOFT

I have experimented with the following tools:

  • Plugin: Above The Fold Optimization The best feature is in moving the critical path CSS to inline and load CSS asynchronously with filamentgroup/loadCSS library.

    Anyway, loading CSS as it should is done good enough by pagespeed module.

    https://gist.github.com/AllThingsSmitty/a2e29d0c5bb395a5d865 https://www.filamentgroup.com/code/

    If you want to async load Google fonts, you also must to install more plugins.

    To have local Analytics scripts you must also install Autoptimize plugin and enabled Optimize HTML Code? in it. This also works with DuracellTomi’s Google Tag Manager plugin.

    Note: I tried to localize analytics scripts using Pagespeed module, but that was unsuccessful as the scripts are invoked at runtime

Above The Fold Optimization

Above The Fold Optimization I use it as a LoadCSS.

addyosmani/critical: Extract & Inline Critical-path CSS in HTML pages filamentgroup/criticalCSS: Finds the Above the Fold CSS for your page, and outputs it into a file

I think this is the most complete article on pagespeed optimization is this: Complete Guide: How to Speed Up WordPress

And this also: Google PageSpeed Insights - Scoring 100/100 with WordPress

  • pagespeed AvoidRenamingIntrospectiveJavascript off (probaj tako da keširaš analitiku) Radiće i analitika!

Beacons

Couple of visits.

pagespeed CriticalImagesBeaconEnabled false;

Filters using beacons are: lazyload_images, inline_preview_images, inline_images and prioritize_critical_css as they need to determine which images are above the fold or which CSS is actually used by the page.

Controlling the use of beacons Why are rewritten pages sending POSTs back to my server?

If beacon are disabled, lazyload_images will lazily load all images.

prioritize_critical_css injects JavaScript that uses a beacon to report back to the server the CSS that is used by the page. It takes at least two visits to instrument the page, collect the appropriate beacon data, and extract the required CSS before a fully optimized page is presented; until then all CSS is optimized as normal: minified, combined, etc.

Pagespeed Cache

GooglePageSpeed - Learn how to configure Google’s mod_pagespeed Apache module on Ubuntu 14.10

PageSpeed is designed to work without any caches between it and the user.

PageSpeed System Integration  |  PageSpeed Module  |  Google Developers

The file cache is always required since files larger than 1Mb cannot be stored on memcached, and it is important to optimize large images.

Finally, a per-process in-memory LRU cache and/or an interprocess shared-memory cache can be configured for rapid access to small objects.

Can I move PageSpeed’s file-based cache into RAM?

memcached

It is obvious that memcached is not the fastest solution.

Also it would be really perfect to make Nginx’s cache, not memcached. Memcached sucks, it slow’s down’s the whole structure and if i’ll add ngx_pagespeed + memcached to my server - i’ll see slow down and i’ll have no choice expect to remove ngx_pagespeed and memcached.

In-memory LRU Cache

To optimize performance, a small in-memory write-through LRU cache can be instantiated in each server process. Nginx typically runs with many fewer processes, so a larger LRUCacheKbPerProcess is appropriate there. In Kb

pagespeed LRUCacheKbPerProcess     8192;
pagespeed LRUCacheByteLimit        16384;

In-memory LRU Cache

All our caches evict the entry that has gone the longest without access, which is a “Least Recently Used” policy.

Shared Memory Metadata Cache

What is Pagespeed metadata? Pagespeed stores info on how to apply optimizations to web pages - metadata entries. They are small but frequently accessed.

CreateSharedMemoryMetadataCache

Shared Memory Metadata Cache

If not specified, there is fallback, default shared memory metadata cache that is always enabled by default.

Native URL fetcher

Pagespeed uses the serf fetcher by default, but it also has an experimental fetcher that avoids the need for a separate thread by using native Nginx events. In initial testing this fetcher is about 10% faster.

Tuning Threading

If you don’t want to use a disk cache with ngx_pagespeed there are currently two ways to do that:

  1. memcached
  2. file cache on tmpfs (ramdisk)

If you’re only on a single server then (2) is probably best; if you want to share your cache between servers then you need (1).

https://github.com/pagespeed/ngx_pagespeed/issues/182#issuecomment-14566493

Change Beacon URL as I don’t want pagespeed signature

BeaconUrl (bu) /ngx_pagespeed_beacon

Maybe disable beacons?

How do I enable or disable beacon POSTs being sent back to my server?

No need for noscript support Frequently Asked Questions  |  PageSpeed Module  |  Google Developers

pagespeed SupportNoScriptEnabled false;

Important explanation: PageSpeed does not pick up changes when I edit CSS or JavaScript files

Can’t rewrite gzipped resources

This is no longer needed; we fixed it about a year ago.

Check with: https://www.save-up.at/_nfo.php

cat <<'EOF' >> /etc/nginx/fastcgi_params

# Turn PHP compression off, so pagespeed can read it properly
fastcgi_param HTTP_ACCEPT_ENCODING "invalid";

EOF

Again, the above is not needed anymore.

In-Place Resource Optimization

pagespeed InPlaceResourceOptimization on;

Important! Tags can only be combined when no information will get lost.

Debugging pagespeed https://www.save-up.at/?PageSpeedFilters=+debug <!--deadline_exceeded--> You can try that in Screaming Frog or increase the value.

Also: <!--Cannot rewrite

Limiting the number of concurrent image optimizations, default 8 No need to change as no more cores.

https://developers.google.com/speed/pagespeed/module/system#image_rewrite_max

Fetch external resources with Pagespeed module

PageSpeed Authorizing and Mapping Domains

pagespeed MapProxyDomain target_domain/subdir origin_domain/subdir [rewrite_domain/subdir];

pagespeed MapProxyDomain https://www.save-up.at/shots https://s0.wordpress.com/mshots/v1 https://cdn.save-up.at/shots

# Localize analytics only with pagespeed
pagespeed MapProxyDomain https://www.save-up.ch/analytics/yandex/ https://mc.yandex.ru/             https://cdn.save-up.ch/analytics/yandex/
pagespeed MapProxyDomain https://www.save-up.ch/analytics/google/ https://www.google-analytics.com/ https://cdn.save-up.ch/analytics/google/

It’s beautiful! I don’t need no cache-buster!

Set the cache lifetime of css, js, and images to the maximum and insert a hash of their contents into the url.

It’s on by default: extend_cache

With this in place, PageSpeed is able to optimize the script and shave off a few more bytes next to cache-extend the file to a one year TTL according to confuration while still being able to respect the original cache TTLs and thereby force updates through to visitors at the desired frequencies.

pagespeed MapProxyDomain http://www.mydomain.com/gajs/ http://www.google-analytics.com/

Also

Canonicalize JavaScript Libraries

date 21. Dec 2016 | modified 10. Jun 2024
filename: Server » Nginx » Configure Google Pagespeed Module
Article Content