From Mercedes-Benz, TechCrunch and Sony Music to The Rolling Stones and Katy Perry, people all over the web are using WordPress to publish beautiful websites, blogs and apps. The appeal comes from the freedom to really create anything you want. With thousands of customizable designs, powerful media management tools and SEO friendly features, it's no wonder this software has become one of the largest online blogging platforms.
If you manage a WordPress blog, you’re probably already aware of the endless number of plugins available for just about anything you could dream of. Let’s be honest, sometimes choosing the right plugin can be a bit overwhelming. There are plugins for caching, image-optimization, SEO and more.
WordPress plugins are convenient and can easily help you complete a number of tasks. However, if plugins are not kept up to date or not written well by the developer, you may be vulnerable to hacking and security issues. Additionally, if your site has too many plugins, you run the risk of certain plugins not interacting well with others ... making them less effective and causing a dramatic site slow down.
Now, I’m not saying go delete all of your evil plugins. I'm saying that there is a more effective alternative to achieving these fancy features without actually using the plugin.
WordPress accelerator: images and more...
We've created a simple Fly App that speeds up any WordPress site by optimizing images, reducing render-blocking resources and caching assets, which dramatically improves Lighthouse scores. What’s a Lighthouse score? Well, Google created a handy little tool called Lighthouse that basically measures how fast your site is perceived by users and assigns you a score of 0-100 (100 is good, 0 is gross). Take a look below at a sample WordPress blog that we tested before making any changes, and then tested again after we integrated it into this Fly app.
Before optimizations
With optimizations
What it does
This app primarily optimizes images and reduces render-blocking resources:
- Converts ALL images to webp for browsers that support it
- Lazy-loads offscreen and hidden images (image tags AND background images)
- Sets
srcset
attributes on image tags for proper image sizing
- Sets
defer
attributes on <script>
tags
- Stores assets in Fly's global cache, speeding your app up all over the world
Overall, this app optimizes any WordPress site for maximum performance by converting images to WebP, a modern format that developers use to create smaller, richer images that make sites faster. It lazy-loads offscreen and hidden images and defers scripts, for a faster First Meaningful Paint. In addition, it adds srcset attributes to images tags, which defines multiple sizes of the same image and allows the browser to appropriately select which image source to use based on the user’s device size. This app can be easily modified to support your site.
How to accelerate your own WordPress blog
- First, make sure you have the latest version of Fly installed by running
npm i -g @fly/fly
git clone https://github.com/superfly/wordpress-image-optimizer.git
cd wordpress-image-optimizer
fly server
- Visit http://localhost:3000 to view the app
You should see an example WordPress site (https://www.thewaltdisneycompany.com/)
- Navigate to the
index.js
file and change const origin
(line#6), const assets
(line#7), and const rewrites
(line#34) to appropriately match your own domain
- If your site contains background images, add their selectors to
const bgImages
(line#25) AND const images
(line#28) in image-observer.js
- Lines 167-173 focus on reducing render-blocking resources. You may need to modify this section to match your own render-blocking resources (if any)
- Save and visit localhost again
You should now see your own WordPress site with properly sized, lazy-loading, WebP images with no render-blocking resources! Run a Lighthouse audit and see for yourself just how well your site is performing ... and then, deploy!
- Run
fly login
(make sure you have a Fly account first, if you don’t, register at https://fly.io/app/sign-up)
- Run
fly apps create <app-name>
to create a Fly Edge App
- Then run
fly deploy
to deploy your Fly Edge App
Conclusion
Plugins are great! But sometimes plugins can actually be the cause of a slow site. We wanted to make it easy for you to achieve some of WordPress's most popular plugin features without actually dealing with plugins and compromising on speed. Time for take off!
Check this app out on GitHub, try it yourself and ⭐Star it if you love it.