IP.Board IPB Pagespeed Config

Working on a configuration file for Invision Community Software (IPB). Please feel free to add your comments and suggestions to this thread.

Code:

##################################################
#### GOOGLE PAGESPEED
##################################################

INFORMATION
https://centminmod.com/nginx_ngx_pagespeed.html#howtoinstall

##################################################
#### PAGESPEED ON / OFF / TESTING
##################################################

Turn Pagespeed on
# pscontrol on

Turn Pagespeed off
# pscontrol off


##################################################
#### PAGESPEED CUSTOM CONF SETUP
##################################################

# nano /etc/centminmod/custom_config.inc

NGXDYNAMIC_NGXPAGESPEED='y'
NGINX_PAGESPEED='y'

##################################################
#### PAGESPEED VHOST MODIFICATION
##################################################

# ngx_pagespeed & ngx_pagespeed handler
# include /usr/local/nginx/conf/pagespeed.conf;
# include /usr/local/nginx/conf/pagespeedhandler.conf;
# include /usr/local/nginx/conf/pagespeedstatslog.conf;

##################################################
#### PAGESPEED CONFIGURATION
##################################################

https://community.centminmod.com/threads/this-forums-pagespeed-conf.62/

# nano /usr/local/nginx/conf/pagespeed.conf

Quick Edit
# pscontrol edit
# pscontrol editstats
# pscontrol admin

Stats OFF / ON
# pscontrol statson
# pscontrol statsoff

I've been using the below configuration on my offline testing system for a few days without issue.

I have yet to setup pagespeed statics to see the actual results.

Code:

pagespeed on;

#######################################################
# Purge nginx pagespeed cache
# https://developers.google.com/speed/pagespeed/module/system#flush_cache
#######################################################
pagespeed EnableCachePurge on;
pagespeed PurgeMethod PURGE;

#######################################################
# File cache settings
######################################
# needs to exist and be writable by nginx

pagespeed FileCacheSizeKb          1048576;
pagespeed FileCacheCleanIntervalMs 3600000;
pagespeed FileCacheInodeLimit      500000;

#######################################################
# By default, ngx_pagespeed adds an X-PageSpeed header with a value of the version of
# ngx_pagespeed being used. This directive lets you specify the value to use instead:
pagespeed XHeaderValue "ngx_pagespeed";

#######################################################
# let's speed up PageSpeed by storing it in the super duper fast memcached
# Ensure Memcached server installed http://centminmod.com/memcached.html
# default install for centmin mod is on port 11211, so localhost:11211 is correct
# uncomment - remove hash # in front of below 2 lines to enable
# timeout set at 100 milliseconds
#  pagespeed MemcachedThreads 1;
#  pagespeed MemcachedServers "localhost:11211";
#  pagespeed MemcachedTimeoutUs 100000;

#######################################################
## 1.11.33.0 beta save-data
######################################
# https://developers.google.com/speed/pagespeed/module/filter-image-optimize#image-quality

# https://developers.google.com/speed/pagespeed/module/reference-image-optimize#JpegQualityForSaveData
pagespeed JpegQualityForSaveData 60;

# https://developers.google.com/speed/pagespeed/module/reference-image-optimize#WebpQualityForSaveData
pagespeed WebpQualityForSaveData 60;

#######################################################
## 1.7.30.1 beta defaults
######################################
pagespeed PreserveUrlRelativity on;
pagespeed MaxCombinedCssBytes -1;
pagespeed ImageResolutionLimitBytes 16777216;
pagespeed EnableFilters inline_google_font_css;

#######################################################
## 1.6.29.3 beta defaults
######################################
pagespeed AvoidRenamingIntrospectiveJavascript on;
pagespeed ImageInlineMaxBytes 3072;
pagespeed CssImageInlineMaxBytes 0;
pagespeed MaxInlinedPreviewImagesIndex -1;
pagespeed MinImageSizeLowResolutionBytes 3072;

#######################################################
## ngx_pagespeed filters settings below ##
######################################

 # show half the users an optimized site, half the regular site
 # change UA-XXXXXXXXXX-1 to your GA unique id
 # uncomment - remove hash # in front of below 5 lines to enable
#  pagespeed RunExperiment on;
#  pagespeed AnalyticsID UA-XXXXXXXXXX-1;
#  pagespeed ExperimentVariable 1;
#  pagespeed ExperimentSpec "id=1;percent=50;level=CoreFilters;enabled=collapse_whitespace,remove_comments;";
#  pagespeed ExperimentSpec "id=2;percent=50";
 
# Filter settings
# filters outlined at https://www.modpagespeed.com/doc/config_filters
# PageSpeed offers three "levels" to simplify configuration: PassThrough, CoreFilters, and OptimizeForBandwidth. The CoreFilters set contains filters that the PageSpeed
# team believes are safe for most web sites. By using the CoreFilters set, as PageSpeed is updated with new filters, your site will get faster. The OptimizeForBandwidth
# setting provides a stronger guarantee of safety and is suitable as a default setting for use with sites that are not aware of PageSpeed.
pagespeed RewriteLevel PassThrough;
pagespeed EnableFilters collapse_whitespace,remove_comments;

# make_google_analytics_async
# https://developers.google.com/speed/docs/mod_pagespeed/filter-make-google-analytics-async
#  pagespeed EnableFilters make_google_analytics_async;

# make_show_ads_async
# https://developers.google.com/speed/pagespeed/module/filter-make-show-ads-async
#  pagespeed EnableFilters make_show_ads_async;

# responsive_images, responsive_images_zoom
# https://developers.google.com/speed/pagespeed/module/filter-image-responsive
pagespeed EnableFilters responsive_images,resize_images;
pagespeed EnableFilters responsive_images_zoom;

# convert_to_webp_animated
# https://developers.google.com/speed/pagespeed/module/filter-image-optimize#convert_to_webp_animated
pagespeed EnableFilters convert_to_webp_animated;

# inline_google_font_css
# https://developers.google.com/speed/pagespeed/module/filter-css-inline-google-fonts
# pagespeed EnableFilters inline_google_font_css;
# require FetchHttps if using https site
pagespeed FetchHttps enable;

# inline_css
# https://developers.google.com/speed/pagespeed/module/filter-css-inline
pagespeed EnableFilters inline_css;
pagespeed CssInlineMaxBytes 2048;

# prioritize_critical_css
# https://developers.google.com/speed/docs/mod_pagespeed/filter-prioritize-critical-css
# pagespeed EnableFilters prioritize_critical_css;

# move_css_to_head
# https://developers.google.com/speed/docs/mod_pagespeed/filter-css-to-head
pagespeed EnableFilters move_css_to_head;

# move_css_above_scripts
# https://developers.google.com/speed/docs/mod_pagespeed/filter-css-above-scripts
# pagespeed EnableFilters move_css_above_scripts;

# combine_css
# https://developers.google.com/speed/docs/mod_pagespeed/filter-css-combine
pagespeed EnableFilters combine_css;

# Uncomment this if you want to prevent mod_pagespeed from combining files
# (e.g. CSS files) across paths
#
pagespeed CombineAcrossPaths off;

# combine_javascript
# https://developers.google.com/speed/docs/mod_pagespeed/filter-js-combine
pagespeed EnableFilters combine_javascript;
pagespeed MaxCombinedJsBytes 122900;

# extend_cache
# https://developers.google.com/speed/docs/mod_pagespeed/filter-cache-extend
pagespeed EnableFilters extend_cache;

# rewrite_css
# https://developers.google.com/speed/docs/mod_pagespeed/filter-css-rewrite
pagespeed EnableFilters rewrite_css;

# rewrite_javascript
# https://developers.google.com/speed/docs/mod_pagespeed/filter-js-minify
pagespeed EnableFilters rewrite_javascript;

# inline_preview_images
# https://developers.google.com/speed/pagespeed/module/filter-inline-preview-images
pagespeed EnableFilters inline_preview_images;

# lazyload_images
# https://developers.google.com/speed/docs/mod_pagespeed/filter-lazyload-images
pagespeed EnableFilters lazyload_images;

# rewrite_images
# https://developers.google.com/speed/docs/mod_pagespeed/filter-image-optimize
pagespeed EnableFilters rewrite_images;
pagespeed EnableFilters convert_jpeg_to_progressive;
pagespeed EnableFilters convert_jpeg_to_webp;
pagespeed EnableFilters convert_to_webp_lossless;
pagespeed EnableFilters inline_images;
pagespeed EnableFilters recompress_images;
pagespeed EnableFilters extend_cache_images;

# sprite_images
# https://developers.google.com/speed/docs/mod_pagespeed/filter-image-sprite
# pagespeed EnableFilters rewrite_css,sprite_images;

# insert_dns_prefetch
# https://developers.google.com/speed/docs/mod_pagespeed/filter-insert-dns-prefetch
pagespeed EnableFilters insert_dns_prefetch;

# InPlaceResourceOptimization
# https://developers.google.com/speed/pagespeed/module/system#ipro
# Enabled by default as of 1.9.32.1
pagespeed InPlaceResourceOptimization off;

pagespeed LoadFromFile "https://<domain.com>//public/" "/home/nginx/domains/<domain.com>/public/";
pagespeed LoadFromFile "https://<domain.com>//uploads/" "/home/nginx/domains/<domain.com>/uploads/";
pagespeed LoadFromFile "https://<domain.com>//datastore/" "/home/nginx/domains/<domain.com>/datastore/";

pagespeed Disallow     "https://<domain.com>//<renamed-admin-directory>/*";
pagespeed Disallow     "https://example.org/*do=quote*";
pagespeed Disallow     "https://example.org/page/index.html";

#######################################################

---

 

Double slashes were just a mess-up when I removed my names from the doc.

Sound be the second one.

Code:

pagespeed LoadFromFile "https://mydomain.com/public/" "/home/nginx/domains/mydomain.com/public/";

 

@eva2000 do you know if having multiple LoadFromFile for the different domains on CMM will work or is the correct way of doing things? I read that LoadFromFile won't work on pagespeed domain specific configurations, only works in the main pagespeed file.

Code:

# DOMAIN 1
pagespeed LoadFromFile "https://domain1.com/public/" "/home/nginx/domains/domain1.com/public/";
pagespeed LoadFromFile "https://domain1.com/uploads/" "/home/nginx/domains/domain1.com/uploads/";
pagespeed LoadFromFile "https://domain1.com/datastore/" "/home/nginx/domains/domain1.com/datastore/";

# DOMAIN 2
pagespeed LoadFromFile "https://domain2.com/public/" "/home/nginx/domains/domain2.com/public/";
pagespeed LoadFromFile "https://domain2.com/uploads/" "/home/nginx/domains/domain2.com/uploads/";
pagespeed LoadFromFile "https://domain2.com/datastore/" "/home/nginx/domains/domain2.com/datastore/";

# DOMAIN 3
pagespeed LoadFromFile "https://domain3.com/public/" "/home/nginx/domains/domain3.com/public/";
pagespeed LoadFromFile "https://domain3.com/uploads/" "/home/nginx/domains/domain3.com/uploads/";
pagespeed LoadFromFile "https://domain3.com/datastore/" "/home/nginx/domains/domain3.com/datastore/";

 

Thanks!

 

Something like below, or do I need to stack the three first before the LoadFromFile(s)?

Code:

# DOMAIN 1
pagespeed Domain https://domain1.com;
pagespeed LoadFromFile "https://domain1.com/public/" "/home/nginx/domains/domain1.com/public/";
pagespeed LoadFromFile "https://domain1.com/uploads/" "/home/nginx/domains/domain1.com/uploads/";
pagespeed LoadFromFile "https://domain1.com/datastore/" "/home/nginx/domains/domain1.com/datastore/";

# DOMAIN 2
pagespeed Domain https://domain2.com;
pagespeed LoadFromFile "https://domain2.com/public/" "/home/nginx/domains/domain2.com/public/";
pagespeed LoadFromFile "https://domain2.com/uploads/" "/home/nginx/domains/domain2.com/uploads/";
pagespeed LoadFromFile "https://domain2.com/datastore/" "/home/nginx/domains/domain2.com/datastore/";

# DOMAIN 3
pagespeed Domain https://domain3.com;
pagespeed LoadFromFile "https://domain3.com/public/" "/home/nginx/domains/domain3.com/public/";
pagespeed LoadFromFile "https://domain3.com/uploads/" "/home/nginx/domains/domain3.com/uploads/";
pagespeed LoadFromFile "https://domain3.com/datastore/" "/home/nginx/domains/domain3.com/datastore/";

 

From what I'm reading, the only filter available for png is "convert_png_to_jpeg". PNG files are large, but they also contain an optional transparency layer. If I convert png files to jpeg which has no transparency, that could cause an issue.

There is convert_gif_to_png, recompress_png. that can be used.

Not sure I'm interested in either. I personally don't want the gifs converted. I see limited information about recompress_png. Unless there was a huge savings in re-compressing them, I'd skip this one too. Still looking for some information on recompress_png.

 

Most of those are already in the file:

Code:

# rewrite_images
# https://developers.google.com/speed/docs/mod_pagespeed/filter-image-optimize
pagespeed EnableFilters rewrite_images;
pagespeed EnableFilters convert_jpeg_to_progressive;
pagespeed EnableFilters convert_jpeg_to_webp;
pagespeed EnableFilters convert_to_webp_lossless;
pagespeed EnableFilters inline_images;
pagespeed EnableFilters recompress_images;
pagespeed EnableFilters extend_cache_images;

I'll have to look over this section more. Not sure if I want the convert_jpeg_to_progressive then convert_jpeg_to_webp, not sure if there is any benefit converting it to progressive and than webp.

 

I want to make one separate note. When I was running this on my demo box something wasn't right. In my conf file I have:

Code:

# By default, ngx_pagespeed adds an X-PageSpeed header with a value of the version of
# ngx_pagespeed being used. This directive lets you specify the value to use instead:
pagespeed XHeaderValue "show_something_different_please";

When I check, it still shows the default data = ngx_pagespeed.

Made me think that the config wasn't sticking for some reason. I should be able to curl and get that returned.

 

You can add that if you want. I don't want it to flatten PNGs, because I have a lot of transparent PNGs. Those are going to look horrible if they're converted to jpeg and the conversion grabs white / black for the areas where the transparency was.

 

Give it a try. Upload a few with transparent backgrounds and see how pagespeed handles them.

 

You can go with the filter groups if you want:

Code:

# Recompress Images Group
# This is a filter group consisting of convert_gif_to_png, convert_jpeg_to_progressive, convert_jpeg_to_webp, convert_png_to_jpeg,
# jpeg_subsampling, recompress_jpeg, recompress_png, recompress_webp, strip_image_color_profile, and strip_image_meta_data.
pagespeed EnableFilters recompress_images;

# Rewrite Images Group
# This is a filter group that includes inline_images, recompress_images, convert_to_webp_lossless, and resize_images.
pagespeed EnableFilters rewrite_images;

I might just go with these because it's easy. If I start having an issue, I can tweak from there.

 

Having a cdn doesn't make this any more easy.

 

Anyone have any insight on how I should setup pulling /uploads/ folder from a CDN and the rest of the files from the site?