{"id":3307,"date":"2020-01-24T11:58:47","date_gmt":"2020-01-24T09:58:47","guid":{"rendered":"https:\/\/blog.tomayac.com\/2020\/01\/24\/brotli-compression-with-mod-pagespeed-and-ngx-pagespeed\/"},"modified":"2020-01-24T11:58:47","modified_gmt":"2020-01-24T09:58:47","slug":"brotli-compression-with-mod_pagespeed-and-ngx_pagespeed","status":"publish","type":"post","link":"https:\/\/tomayac.com\/wordpress\/2020\/01\/24\/brotli-compression-with-mod_pagespeed-and-ngx_pagespeed\/","title":{"rendered":"Brotli Compression with mod_pagespeed and ngx_pagespeed"},"content":{"rendered":"\n\t\t\t

The PageSpeed<\/a> modules\n(not to be confused with the\nPageSpeed Insights<\/a>\nsite analysis service),\nare open-source webserver modules that optimize your site automatically.\nNamely, there is mod_pagespeed<\/a>\nfor the Apache<\/a> server and\nngx_pagespeed<\/a>\nfor the Nginx<\/a> server.\nFor example, PageSpeed can automatically create WebP versions for all your image resources,\nand conditionally only<\/em> serve the format to clients that accept image\/webp<\/code>.\nI use it on this very blog, inspect a request to any JPEG image<\/a>\nand see how on supporting browsers it gets served as WebP.<\/p>\n

\"Chrome<\/p>\n

The impact of Brotli compression \u2693<\/a><\/h2>\n

When it comes to compression, Brotli<\/a> really makes a difference.\nBrotli compression is only supported over HTTPS and is requested by clients\nby including br<\/code> in the accept-encoding<\/code> header.\nIn practice, Chrome sends\naccept-encoding: gzip, deflate, br<\/code><\/a>.\nAs an example for the positive impact compared to gzip, check out a recent case study shared by\nAddy Osmani<\/a>\nin which the web team of the hotel company Treebo<\/a> share their\nTale of Brotli Compression<\/a>.<\/p>\n

PageSpeed does not support Brotli yet \u2693<\/a><\/h2>\n

While both webservers support Brotli compression out of the box,\nApache via mod_brotli<\/a>\nand Nginx via ngx_brotli<\/a>,\none thing that PageSpeed is currently missing is native Brotli support,\ncausing resources that went through any PageSpeed optimization step to not be Brotli-encoded \ud83d\ude14.\nPageSpeed is really smart about compression in general, for instance,\nit always\nautomatically enables mod_deflate<\/code> for compression<\/a>,\noptionally adds an accept-encoding: gzip<\/code> header to requests that lack it<\/a>,\nand automatically gzip<\/code>s compressable resources as they are stored in the cache<\/a>,\nbut Brotli support is just not there yet.\nThe good news is that it is being worked on,\nGitHub Issue #1148<\/a>\ntracks the effort.<\/p>\n

Making Brotli work with PageSpeed \u2693<\/a><\/h2>\n

The even better news is that while we are waiting for native Brotli support in PageSpeed,\nwe can just outsource Brotli compression to the underlying webserver.\nTo do so, simply disable PageSpeed's HTTPCache Compression.\nQuoting from the documentation<\/a>:<\/p>\n

\n

To configure cache compression, set HttpCacheCompressionLevel<\/code> to values between -1<\/code> and 9<\/code>,\nwith 0<\/code> being off, -1<\/code> being gzip<\/code>'s default compression, and 9<\/code> being maximum compression.<\/p>\n<\/blockquote>\n

\ud83d\udce2 So to make PageSpeed work with Brotli, what you want in your\npagespeed.conf<\/code><\/a>\nfile is a new line:<\/p>\n

# Disable PageSpeed's gzip compression, so the server's<\/span>
# native Brotli compression kicks in via `mod_brotli`<\/span>
# or `ngx_brotli`.<\/span>
ModPagespeedHttpCacheCompressionLevel 0<\/span><\/code><\/pre>\n
\"Chrome<\/p>\n
Happy Brotli serving, and, by the way, in case you ever wondered,\nBrotli is a \ud83c\udde8\ud83c\udded Swiss German word for a bread roll and literally means "small bread".<\/p>\n\n\t\t\t
\n\t\t\t\t\"Thomas\n\t\t\t\tThis post appeared first on https:\/\/blog.tomayac.com\/2020\/01\/24\/brotli-compression-with-mod-pagespeed-and-ngx-pagespeed\/<\/a>.\n\t\t\t<\/p>\n\t\t","protected":false},"excerpt":{"rendered":"
\t\t\tThe PageSpeed modules
\n(not to be confused with the
\nPageSpeed Insights
\nsite analysis service),
\nare open-source webserver modules that optimize your site automatically.
\nNamely, there is mod_pagespeed
\nfor the Apache server and
\nngx_pagespeed
\nfor the Ng…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"intlwemo_wallet_address":"","footnotes":""},"categories":[],"tags":[],"class_list":["post-3307","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/comments?post=3307"}],"version-history":[{"count":3,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3307\/revisions"}],"predecessor-version":[{"id":3308,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/posts\/3307\/revisions\/3308"}],"wp:attachment":[{"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/media?parent=3307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/categories?post=3307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tomayac.com\/wordpress\/wp-json\/wp\/v2\/tags?post=3307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
One thing to have an eye on is server load.\nBrotli is more demanding than gzip, so for your static resources, you probably want to\nserve pre-compressed content<\/a>\nwherever possible, and for the odd chance of\nwhen you are Facebook, maybe disable Brotli for your dynamic resources<\/a>.<\/p>\n