WordPress using Bitnami in the Google Cloud

WordPress using Bitnami in the Google Cloud

July 6, 2019 By Jake

There are so many different ways to optimize your WordPress site these days, and everyone has their favorite. Now, let not forget, that most of Timber-Boot’s components are already optimized, from CSS and JavaScript to Twig and Image Handling. The reason for this is so that external optimizations can concentrate on such things as critical CSS instead of optimizing a 150 MB image.

Depending on the server environment you are on, you will have different options availalbe. We will talk about the shared server environment in a future article. When you get into the VPS, Dedicated, or Cloud hosting environment you are more in control of what you want to install and configure. On our VM in the Google Cloud, we implement the PageSpeed Module for Apache and Memcached.

Under the previous configuration, this site’s mobile page speed was 3.5 seconds with a 4G connection. After implementing the changes described in the article Timber-Boot v2.5.1 in Action, the mobile page speed load time was reduced to 1.4 seconds on 4G.

In a previous post, we shared the settings of our VM we use. It is a Bitnami LAMP Stack with Bitnami WordPress modules. Over the last 18 months, we have made some changes to that configuration and added Memcached. So we are going to share these updated settings.

The Bitnami LAMP stack does include the PageSpeed module already, but you need to install Memcached. I did this by following these instructions from the Bitnami Community Forums.

Here are the settings we used for the PageSpeed module:

File: /opt/bitnami/apache2/conf/pagespeed.conf

Note:  We are only showing the section of “IfModule pagespeed_module”.  We also removed the remarked out comments and settings also.



<IfModule pagespeed_module> 
ModPagespeed on 
ModPagespeedLazyloadImagesAfterOnload off 
AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER text/html 
ModPagespeedFileCachePath "/opt/bitnami/apache2/var/cache/mod_pagespeed/" 
ModPagespeedLogDir "/opt/bitnami/apache2/logs/pagespeed_log" 
ModPagespeedSslCertDirectory "/opt/bitnami/common/openssl/certs" 
ModPagespeedMemcachedServers localhost:11211 
ModPagespeedCreateSharedMemoryMetadataCache "/opt/bitnami/apache2/var/cache/mod_pagespeed/" 51200
ModPagespeedEnableFilters add_head,combine_css,combine_javascript,convert_meta_tags,extend_cache,fallback_rewrite_css_urls,flatten_css_imports,inline_css,inline_import_to_link,inline_javascript,rewrite_css,rewrite_images,rewrite_javascript,rewrite_javascript_external,rewrite_style_attributes_with_url 
ModPagespeedFileCacheSizeKb 2000000 
ModPagespeedFileCacheCleanIntervalMs 3600000 
ModPagespeedLRUCacheKbPerProcess 1024 
ModPagespeedLRUCacheByteLimit 16384 
ModPagespeedFileCacheInodeLimit 500000 
    <Location /pagespeed_admin> 
        <IfModule mod_rewrite.c> 
            RewriteEngine Off 
        </IfModule> 
            Order allow,deny 
            Allow from localhost 
            Allow from 127.0.0.1 
            SetHandler pagespeed_admin 
        </Location> 
        <Location /pagespeed_global_admin>
            <IfModule mod_rewrite.c> 
                RewriteEngine Off 
            </IfModule> 
            Order allow,deny 
            Allow from localhost 
            Allow from 127.0.0.1 
            SetHandler pagespeed_global_admin 
        </Location> 
ModPagespeedStatisticsLogging on 
ModPagespeedMessageBufferSize 100000 
ModPagespeedFetchHttps enable 
ModPagespeedFetchWithGzip on 
SetOutputFilter DEFLATE 
ModPagespeedListOutstandingUrlsOnError on 
ModPagespeedHttpCacheCompressionLevel 9 
    <Location /wp-admin/> 
        ModPagespeed Off 
    </Location> 
</IfModule>


The code is above is the general settings for the PageSpeed Module.

The specific setting for each WordPress site

The first file to change is  /opt/bitnami/apps/wordpress/conf/httpd-app.conf

Note:  In this file, we are setting the cache headers properly for the PageSpeed Module to be able to re-write the assets, an https redirect, and to set access to the PageSpeed console.  Replace the XXX.XXX.XXX.XXX with the actual IP of your workstation.



RewriteEngine On 
RewriteRule /<none> / [L,R] 

<IfDefine USE_PHP_FPM> 
    <Proxy "unix:/opt/bitnami/php/var/run/wordpress.sock|fcgi://wordpress-fpm" timeout=300>
    </Proxy> 
</IfDefine> 

<Directory "/opt/bitnami/apps/wordpress/htdocs"> 
    Options +MultiViews +FollowSymLinks 
    AllowOverride None 
    <IfVersion < 2.3 > 
        Order allow,deny 
        Allow from all 
    </IfVersion> 
    <IfVersion >= 2.3> 
        Require all granted 
    </IfVersion> 
    
    <IfDefine USE_PHP_FPM> 
        <FilesMatch \.php$> 
            SetHandler "proxy:fcgi://wordpress-fpm" 
        </FilesMatch> 
    </IfDefine> 
    <filesMatch "\.(ico|pdf|flv|swf)$"> 
        Header set Cache-Control "max-age=2592000, public" 
    </filesMatch> 
    <FilesMatch "\.(jpg|jpeg|gif|png|js|css)$"> 
        Header unset ETag 
        Header unset Pragma 
        Header unset Last-Modified 
        Header set Cache-control "public, max-age=600" 
    </FilesMatch> 
    <IfModule mod_expires.c> 
        ExpiresActive On 
        ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year"
        ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" 
        ExpiresByType text/x-javascript "access 1 month" 
        ExpiresByType application/x-shockwave-flash "access 1 month" 
        ExpiresByType image/x-icon "access 1 year" 
        ExpiresDefault "access 2 days" 
    </IfModule> 
    <IfModule mod_headers.c> 
        <FilesMatch "\.(jpg|jpeg|gif|png|js|css)$"> 
            Header unset ETag 
            Header unset Pragma 
            Header unset Last-Modified 
            Header set Cache-control "public, max-age=600" 
        </FilesMatch> 
    </IfModule> 
    RewriteEngine On 
    RewriteCond %{HTTPS} !=on 
    RewriteRule ^/(.*) https://%{SERVER_NAME}/$1 [R,L] 
    RewriteBase / 
    RewriteRule ^index\.php$ - [L] 
    RewriteCond %{REQUEST_FILENAME} !-f 
    RewriteCond %{REQUEST_FILENAME} !-d 
    RewriteCond %{REQUEST_URI} !pagespeed 
    RewriteRule . /index.php [L] 
</Directory> 

<IfModule pagespeed_module> 
    ModPagespeedEnableFilters add_instrumentation 
    ModPagespeedStatistics on 
    ModPagespeedStatisticsLogging on 
    ModPagespeedLogDir "/opt/bitnami/apache2/logs/pagespeed_log" 
        <Location /mod_pagespeed_console> 
            <IfModule mod_rewrite.c> 
                RewriteEngine Off 
            </IfModule> 
            Order allow,deny 
            Allow from localhost 
            Allow from 127.0.0.1 
            Allow from XXX.XXX.XXX.XXX 
            SetHandler mod_pagespeed_console 
        </Location> 
        <Location /mod_pagespeed_beacon> 
            <IfModule mod_rewrite.c> 
                RewriteEngine Off 
            </IfModule> 
            SetHandler mod_pagespeed_beacon 
        </Location> 
        <Location /mod_pagespeed_statistics> 
            <IfModule mod_rewrite.c> 
                RewriteEngine Off 
            </IfModule> 
            Order allow,deny 
            Allow from localhost 
            Allow from XXX.XXX.XXX.XXX 
            SetHandler mod_pagespeed_statistics 
        </Location> 
        <Location /pagespeed_admin> 
            <IfModule mod_rewrite.c> 
                RewriteEngine Off 
            </IfModule> 
            Order allow,deny 
            Allow from localhost 
            Allow from XXX.XXX.XXX.XXX 
            SetHandler pagespeed_admin 
        </Location> 
        <Location /pagespeed_global_admin> 
            <IfModule mod_rewrite.c> 
                RewriteEngine Off 
            </IfModule> 
            Order allow,deny 
            Allow from localhost 
            Allow from 127.0.0.1 
            Allow from XXX.XXX.XXX.XXX 
            SetHandler pagespeed_global_admin 
        </Location> 
</IfModule> 

Include "/opt/bitnami/apps/wordpress/conf/htaccess.conf"


The last file to be dited is /opt/bitnami/apps/wordpress/conf/httpd-vhosts.conf.

Note: In the first section, we are setting the site to use HTTP/2 by setting the protocols and then doing the same again in the port:443 section.  In the port 80 section, we are forcing the redirect to HTTPS, to ensure that Safari does not throw an error about the SSL.  In the port 443 section, we are setting additional filters or disabling them. Make sure to replace yoursite.com with your site.



<VirtualHost *:80> 
    ServerName yoursite.com 
    ServerAlias www.yoursite.com 
    DocumentRoot "/opt/bitnami/apps/wordpress/htdocs" 
    Protocols h2 h2c http/1.1 
    RewriteEngine On 
    RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC] 
    RewriteRule ^(.*)$ https://%1$1 [R=permanent,L] R
    ewriteCond %{HTTPS} !=on 
    RewriteRule ^/(.*) https://%{SERVER_NAME}/$1 [R,L] 
    Include "/opt/bitnami/apps/wordpress/conf/httpd-app.conf" 
</VirtualHost> 

<VirtualHost *:443> 
    ServerName yoursite.com 
    ServerAlias www.yoursite.com 
    DocumentRoot "/opt/bitnami/apps/wordpress/htdocs" 
    Protocols h2 h2c http/1.1 
    SSLEngine on 
    SSLCertificateFile "/opt/bitnami/apache2/conf/yoursite.com.crt" 
    SSLCertificateKeyFile "/opt/bitnami/apache2/conf/yoursite.com.key" 
    ModPagespeedFileCachePath "/opt/bitnami/apache2/var/cache/mod_pagespeed/" 
    ModPagespeedDomain http*://yoursite.com 
    ModPagespeedMapOriginDomain http://localhost https://yoursite.com 
    ModPagespeedLoadFromFile "https://yoursite.com/wp-content/themes/TBv2.5/static/" \ "/opt/bitnami/apps/wordpress/htdocs/wp-content/themes/TBv2.5/static/" 
    ModPagespeedLoadFromFileRuleMatch Disallow \.php$ 
    ModPagespeedLoadFromFile "https://yoursite.com/wp-content/uploads/" \ "/opt/bitnami/apps/wordpress/htdocs/wp-content/uploads/" 
    ModPagespeedLoadFromFileCacheTtlMs 31540000000 
    ModPagespeedEnableCachePurge on 
    ModPagespeedPurgeMethod PURGE 
    ModPagespeedDisableRewriteOnNoTransform off 
    ModPagespeedEnableFilters rewrite_images,lazyload_images,insert_dns_prefetch,inline_google_font_css,hint_preload_subresources,prioritize_critical_css,defer_javascript,move_css_above_scripts 
    ModPagespeedDisableFilters inline_images 
    Include "/opt/bitnami/apps/wordpress/conf/httpd-app.conf" 
</VirtualHost>



You can see by the featured image at the top, Think With Google rates the site as 1.4 seconds load time for mobile at 4G. But if have read the post on How to Really Test WordPress Page Load Times, I should use Google Lighthouse for testing.

Mobile

Fast 3G 1st Visit – 2.34 Seconds

 

Fast 3G 2nd Visit – 1.09 Seconds

 

4G Avg U.S. Speeds 1st Visit – 0.85 Second

 

4G Avg U.S. Speeds 2nd Visit – 0.45 Second

 

4G Avg Denver Speeds 1st Visit – 0.59 Second

 

4G Avg Denver Speeds 2nd Visit – 0.58 Seond

 

Desktop

Desktop 1st Visit – 0.73 Second

 

Desktop 2nd Visit – 0.58 Second

As always, if you have any questions or comments, use the “Contact Us” button in the footer of this website.