I live in the countryside that can’t get a better network bandwidth and I don’t trust any web hosting service in security. Maybe some people are facing the same problem to get their WordPress faster.
My poor upload bandwidth (438Kbps) shared with my family
In order to provide faster services to western users (mostly in US and Europe), I need to optimize the performance of WordPress installed on my 2011 iMac 27″ running OS X 10.10 (Yosemite).
There are 35 active plugins running in this WordPress. Apparently, it’s not a clean site.
Finally, I get 1 ~ 3 seconds from 7 ~ 18 seconds with all free services in the world. According to Pingdom Website Speed Test, it’s faster than other 80 ~ 90% sites tested.
I think this should be good for a WordPress site running amount of plugins in a poor network bandwidth without any paid CDN.
To know what’s the bottleneck, you always observer, analyze and benchmarking. Here are great two free network services that I used to benchmark my site.
WebPagetest – Website Performance and Optimization Test
According to the benchmarks before optimizations, my site is slower than 80% of other tested site. The major issues I got were:
Very bad first byte time. (Well, for a site running with 35 active plugins, not surprised.)
No cache for static resource.
CSS and JS that blocks the rendering.
Most noticeable time were used to loading the images. So I tried to reduce them first.
Smaller File = Faster Loading
Reduce all images file size
Use progressive JPEG for big images instead PNG. Mostly the screenshots without transparency should changed to progressive JPEG.
Reduce PNG images with ImageAlpha.app. Reduce PNG by only needed colors instead of full color space to save more than 60%.
There are over 1.3K image files in my site. So I build automation workflow services to do the reducing easier and faster in Finder.
Such as Reduce Image, Resize Image, Save as JPG, Execute Shell Script with parameters.
Serving Images Faster with Free Image Service
Even I reduced all images over 60%, my network bandwidth is still too slow for both the response time and transferring. So I got to find the image service which is worldwide available.
Faster Network = Faster Loading
I used Dropbox for this purpose before, but it’s really not fast enough on image files without CDN. And I finally found imgur which is fast, stable, easy to upload and free.
Upload all images to imgur with wp-imgur plugin which works really good with only few issues I found.
Use External Featured Image plugin(simple patched) to show the image on imgur by direct link for the issue that wp-imgur didn’t replace the feature image with imgur link.
Patched all plugins’s image links to use imgur link instead of loading from this site.
Patched theme icon links to imgur direct links.
Use Google Hosted jQuery instead of WordPress default copy.
Minified and package with BWP Minify.
Cache Server with Google App Engine Service
Build my first Google App Engine service in PHP to cache all the css and js files.
There are some other services that do the same job like a CDN, but I got to handle the cached files myself and I use my own ways to update the caches. (It’s related to the buster support of BWP Minfy) So I’ve to build my own custom service for it.
Redirect to the original site if cache missed. So the user request would build up the required css and js.
Build the second Google App Engine service in Python to send the cache missed XMPP(Jabber) message to myself. So I can get the message on all my devices in real time. (Well, this is my first Python program.)
Trying to create my first WordPress plugin to rebuild all the caches by accessing all posts/pages/categories.
TODO: Auto deployment to the cache server.
TODO: Modify the XMPP message service to get my message to deploy the caches. I’ll be able to deploy on all my devices. (Seems pretty cool.)
Patched all plugins and themes to use Google Fonts Service (CDN)
Cached and compressed by WP-SuperCache.
DOM Loading and Rendering Optimization
Re-order .js to prevent from blocking the rendering.
Dark tone for easier reading.
Full width layout for pages.
Patched for embedly which replaced the link to cards after layout. So, re-layout after the replacement. (jQuery, long time no see.)
Use ApachBench(ab) to test the server performance.
RewriteRule for the cached (compressed) page files without running WordPress.
Take care of this would get the response time much faster since the request would be redirect to the cached files instead of generating them by WordPress.
RewriteRule to ban bad bots and exploiting requests.
Custom 404, 403 pages without WordPress handling. Even bad requests flooded, they were handled by Apache directly.
The generated 404, 403 pages by WordPress would cost a lot CPU and much larger response data flow.
Disable unused modules to prevent security issues, such as HeartBleed, ShellShock, etc..
Compress text files (Content-Encoding)
Deflate all the html, js and css files.
ExpirationDay for each type of files.
You can get the results by entering my site’s URL in Pingdom Website Speed Test.
Detail Profile of Amsterdam
After all these optimizations, it still took helf time to connect and load the compressed html(only 7.3kB) directly from my site in such poor bandwidth. The other resources were loaded extremely fast. I believe you can easily made your site get loaded in 0.3s ~ 0.5s if you pay more effort on it, since most people had much faster network than my poor ADSL in Taiwan.
It’s a good week to hack, but nothing is perfect. Always ways to get it better if we looked further.
Let’s save everyone’s time for better things instead of waiting.
Optimize WordPress to 1 second Background I live in the countryside that can't get a better network bandwidth and I don't trust any web hosting service in security.