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


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:
http://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

 

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

http://www.fullstack4u.com/wp-content/uploads/2016/06/image-source-showing-ip-address-2.png

Replace ALL with domain name:

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

query 1

query 2

query 3

Rerun speed test

webpage test 7

– now getting a B for compressed images


Fix gravatar image slowing site load time

gravatar

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

wp user avatar

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

wp user avatar 2

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

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:
http://wordpress.stackexchange.com/questions/66524/remove-open-sans-from-twenty-twelve-theme


Remove emoji crap loading in the head

remove emoji crap

Add to functions.php

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

Reference:
http://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

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) – http://www.google-analytics.com/ga.js
WARNING – (4.0 hours) – http://www.angularjs4u.com/wp-content/themes/WP4U/fonts/fontawesome-webfont.woff2?v=4.6.2
WARNING – (4.0 hours) – http://www.angularjs4u.com/wp-includes/js/wp-emoji-release.min.js?ver=d9fdbd55d5e45bfc36004b961b5c6e77
WARNING – (4.0 hours) – http://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:


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

settings:
crayon syntax

add to functions.php

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

Sam Deering is a web developer from England (currently living in Australia). In his spare time he enjoys coding, playing chess, reading and investing.

Leave a Reply

Your email address will not be published. Required fields are marked *