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/
– load disqus on comment lazy load on scroll
BEFORE
– install wordpress better minify
– install w3 total cache
– enable cloudflare caching
– add this to functions.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/** * 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
DISABLE WORDFENCE SECURITY PLUGIN
Mobile 69
Desktop 87
ENABLE W3 TOTAL CACHE PLUGIN
Mobile 69
Desktop 85
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.
Also found this:
functions.php
1 2 3 |
add_filter( 'wp_calculate_image_srcset_meta', '__return_null' ); |
More speed enhancements coming soon stay tuned…
Apache pagespeed testing
Test rerun (with changes to settings below)
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.
Waterfall
Old settings
New settings
Old settings
New settings
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
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’);
Rerun speed test
– 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
Waterfall
Reference:
https://woorkup.com/using-locally-hosted-gravatars/
Fix font awesome web font browser caching
TBD
Fix server response time
TBD
Fix open sans font loading
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/** * 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.
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’ );
Move jquery to footer
add to functions.php
1 2 3 4 5 6 7 |
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.
– wow mobile just went up from 77 to 87!!!!!!!!!
Fix avoid a character set in the meta tag
https://gtmetrix.com/avoid-charset-in-meta-tag.html
TBD
Leaverage Browser Caching
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
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:
add to functions.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/** * 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 . ") -->"; } } } } } |
add your css and js to your build path
Disable monarch and disqus plugins from wordpress and test speed.
AFTER
Time to first byte
TBD
Finished results
Desktop 93/100
Mobile 86/100
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