How to Speed Up Wordpress Hosted on AWS – Page Speed

I have tried a ton of things in this blog post to speed up the website.

Overview

wordpress plugin w3 total cache
wordpress plugin smush it
wordpress plugin better minify
cloudflare CDN / caching / minify
testing wordpress wordfence plugin speed
testing wordpress disqus comment plugin speed
testing wordpress monarch sharing plugin speed
apache pagespeed
php-fpm and event mpm

The setup

wordpress
aws ec2 (bitnami wordpress ami)

SPEED

Testing this page: www.fullstack4u.com/wordpress/how-to-enable-wordpress-plugin-updates-on-aws-ec2-bitnami/

Speed up wordpress hosted on AWS

– load disqus on comment lazy load on scroll

Speed up wordpress hosted on AWS 2

BEFORE

Speed up wordpress hosted on AWS 3

Speed up wordpress hosted on AWS 4

– install wordpress better minify

– install w3 total cache
– enable cloudflare caching

– add this to functions.php


/**
* Remove open-sans Google API font load.
*/
if (!function_exists('remove_wp_open_sans')) :
function remove_wp_open_sans() {
wp_deregister_style( 'open-sans' );
wp_register_style( 'open-sans', false );
}
add_action('wp_enqueue_scripts', 'remove_wp_open_sans');
// Uncomment below to remove from admin
// add_action('admin_enqueue_scripts', 'remove_wp_open_sans');
endif;

/**

* Remove open-sans Google API font load.

if (!function_exists('remove_wp_open_sans')) :

function remove_wp_open_sans() {

wp_deregister_style( 'open-sans' );

wp_register_style( 'open-sans', false );

}

add_action('wp_enqueue_scripts', 'remove_wp_open_sans');

// Uncomment below to remove from admin

// add_action('admin_enqueue_scripts', 'remove_wp_open_sans');

endif;

BEFORE AND AFTER ADDING W3 TOTAL CACHE AND DISABLING WORDFENCE

Setup:
– cloudflare cdn + caching
– apache pagespeed
– hosting AWS ec2 small

Testing:
– google page speed insights
– web page test

Site:
– https://angularjs4u.com/ (homepage)

Mobile 69
Desktop 85

Speed up wordpress hosted on AWS 5

webpage test

DISABLE WORDFENCE SECURITY PLUGIN

Mobile 69
Desktop 87

pagespeed insights

webpage test 2

ENABLE W3 TOTAL CACHE PLUGIN

Mobile 69
Desktop 85

pagespeed insights 2

webpage test 3

So a few things are slowing it down.
– large images
– disqus comment engine
– google adsense

ADDING THE WP SMUSH PLUGIN

To reduce the image sizes.

wp smush plugin

Also found this:

Speed up wordpress hosted on AWS 6

functions.php


add_filter( 'wp_calculate_image_srcset_meta', '__return_null' );

add_filter( 'wp_calculate_image_srcset_meta', '__return_null' );

functionphp

webpage test 4

More speed enhancements coming soon stay tuned…

Apache pagespeed testing

webpage test 5

Test rerun (with changes to settings below)

webpage test 6

Conclusions:
– slower load time, more requests
– i think css moved to head was only major change, images are showing from the ip address of the ec2 instance so they are not being cached, need to fix this first and retun speed test.

I reverted back and added a couple of them and its slightly faster.

webpage test 7

Waterfall

waterfall

Old settings

old settings

New settings

new settings

Old settings

old settings 2

New settings

new settings 2

Reference
Pagespeed image settings https://developers.google.com/speed/pagespeed/module/filter-image-optimize#inline-images-into-html-or-css

Image source showing as an ip address

image source showing ip address

Replace ALL with domain name:

UPDATE wp_posts SET post_content = replace(post_content, ‘https://52.1.19.97’, ‘https://www.angularjs4u.com’);
UPDATE wp_postmeta SET meta_value = replace(meta_value, ‘https://52.1.19.97’, ‘https://www.angularjs4u.com’);

query 1

query 2

Rerun speed test

webpage test 7

– now getting a B for compressed images

Fix gravatar image slowing site load time

WP User Avatar (i was already using this one so decided to tweak settings)

Now its locally loaded and can be cached with no http request.

Rerun speed test

webpage test 8

Waterfall

waterfall 2

Reference:
https://woorkup.com/using-locally-hosted-gravatars/

Fix font awesome web font browser caching

fix font

TBD

Fix server response time

reduce server response time

TBD

Fix open sans font loading

fix open sans


/**
* Remove open-sans Google API font load.
*/
if (!function_exists('remove_wp_open_sans')) :
     function remove_wp_open_sans() {
          wp_deregister_style( 'open-sans' );
          wp_register_style( 'open-sans', false );
          wp_deregister_style( 'et-gf-open-sans-css' );
          wp_register_style( 'et-gf-open-sans-css', false );
     }
     add_action('wp_enqueue_scripts', 'remove_wp_open_sans');
     // Uncomment below to remove from admin
     // add_action('admin_enqueue_scripts', 'remove_wp_open_sans');
endif;

/**

* Remove open-sans Google API font load.

if (!function_exists('remove_wp_open_sans')) :

function remove_wp_open_sans() {

wp_deregister_style( 'open-sans' );

wp_register_style( 'open-sans', false );

wp_deregister_style( 'et-gf-open-sans-css' );

wp_register_style( 'et-gf-open-sans-css', false );

}

add_action('wp_enqueue_scripts', 'remove_wp_open_sans');

// Uncomment below to remove from admin

// add_action('admin_enqueue_scripts', 'remove_wp_open_sans');

endif;

Looks like the monarch plugin is loading this.

fix open sans 2

So two ways to fix this:

– manually comment out open-sans in monarch.php
– disable monarch

Reference:
https://wordpress.stackexchange.com/questions/66524/remove-open-sans-from-twenty-twelve-theme

Remove emoji crap loading in the head

Add to functions.php

//remove emoji
remove_action( ‘wp_head’, ‘print_emoji_detection_script’, 7 );
remove_action( ‘wp_print_styles’, ‘print_emoji_styles’ );

Reference:
https://crunchify.com/not-using-emoji-on-your-wordpress-blog-stop-loading-wp-emoji-release-min-js-and-css-file/

Move jquery to footer

move jquery footer

add to functions.php


 if( !is_admin()){
          wp_deregister_script('jquery');
          wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"), false, '1.12.3', true);
          wp_enqueue_script('jquery');
     }

if( !is_admin()){

wp_deregister_script('jquery');

wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"), false, '1.12.3', true);

wp_enqueue_script('jquery');

}

This also loads jquery from google api cdn which can speed up your site too.

move jquery footer 2

– wow mobile just went up from 77 to 87!!!!!!!!!

Fix avoid a character set in the meta tag

fix avoid a character set

https://gtmetrix.com/avoid-charset-in-meta-tag.html

TBD

Leaverage Browser Caching

leaverage browser chaching

leaverage browser chaching 2

most of this looks like google adsense slowing it down…

the ones that aren’t are:

WARNING – (2.0 hours) – https://www.google-analytics.com/ga.js
WARNING – (4.0 hours) – https://www.angularjs4u.com/wp-content/themes/WP4U/fonts/fontawesome-webfont.woff2?v=4.6.2
WARNING – (4.0 hours) – https://www.angularjs4u.com/wp-includes/js/wp-emoji-release.min.js?ver=d9fdbd55d5e45bfc36004b961b5c6e77
WARNING – (4.0 hours) – https://www.angularjs4u.com/wp-content/plugins/monarch/css/fonts/ETmonarch_2.ttf

google analytics
font awesome woff2
emoji ( monarch font ttf

PHP-FPM & Event MPM testing

“In conclusion, the Apache event MPM increases the performance of Apache, allowing it to serve more requests with less memory. If you want to deploy a PHP application you should use PHP-FPM to handle PHP requests. This is highly recommend for running applications in servers with limited memory, such as like cloud instances with 512MB or 1Gb RAM.”

BEFORE

webpage test 9

TBD

References:

PHP-FPM vs MPM https://blog.bitnami.com/2014/06/performance-enhacements-for-apache-and.html
Apache event MPM https://wiki.bitnami.com/components/apache/apache_mpm_event

Move crayon syntax highlighter css/js to build tool and Optmise settings

settings:
crayon syntax

add to functions.php


/**
* Remove crayon syntax highlighter files (they are included in theme build)
*/
function remove_plugin_styles() {
  global $wp_styles;
  $paths_to_remove = array(
    '/crayon-syntax-highlighter/',
    // Additional references here
  );

  foreach($wp_styles -> registered as $registered) {
    foreach ($paths_to_remove as $path) {
      if (strpos($registered->src,$path) !== false) {
        wp_dequeue_style( $registered->handle );
        wp_deregister_style( $registered->handle );
        if (WP_ENV === 'development') {
          echo "n<!-- Removed style reference: " . $registered->src . " (" . $registered->handle . ") -->";
        }
      }
    }
  }
}

/**

* Remove crayon syntax highlighter files (they are included in theme build)

function remove_plugin_styles() {

global $wp_styles;

$paths_to_remove = array(

'/crayon-syntax-highlighter/',

// Additional references here

);

foreach($wp_styles -> registered as $registered) {

foreach ($paths_to_remove as $path) {

if (strpos($registered->src,$path) !== false) {

wp_dequeue_style( $registered->handle );

wp_deregister_style( $registered->handle );

if (WP_ENV === 'development') {

echo "n";

}

add your css and js to your build path

crayon syntax 2

Disable monarch and disqus plugins from wordpress and test speed.

AFTER

pagespeed insights 3

speed test

webpage test 10

webpage test 11

Time to first byte

first byte

TBD

Finished results

Homepage
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.angularjs4u.com&tab=desktop

Desktop 93/100
Mobile 86/100

page settings

pagespeed insights 4

High image landing page
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.angularjs4u.com%2Ftables%2Ftop-10-angularjs-table-demos%2F

Desktop 88/100
Mobile 88/100

pagespeed insights 5

pagespeed insights 6

How to Speed Up WordPress Hosted on AWS – Page Speed

Apache pagespeed testing

Image source showing as an ip address

Fix gravatar image slowing site load time

Fix font awesome web font browser caching

Fix server response time

Fix open sans font loading

Remove emoji crap loading in the head

Move jquery to footer

Fix avoid a character set in the meta tag

Leaverage Browser Caching

PHP-FPM & Event MPM testing

Move crayon syntax highlighter css/js to build tool and Optmise settings

Disable monarch and disqus plugins from wordpress and test speed.

Time to first byte

Finished results

Leave a Reply Cancel reply

Get Your Free Angular 2 Book Chapters

Apache pagespeed testing

Image source showing as an ip address

Fix gravatar image slowing site load time

Fix font awesome web font browser caching

Fix server response time

Fix open sans font loading

Remove emoji crap loading in the head

Move jquery to footer

Fix avoid a character set in the meta tag

Leaverage Browser Caching

PHP-FPM & Event MPM testing

Move crayon syntax highlighter css/js to build tool and Optmise settings

Disable monarch and disqus plugins from wordpress and test speed.

Time to first byte

Finished results

Leave a Reply Cancel reply