Speed up — Moving my site from Tumblr to WordPress
My old portfolio site was always on WordPress, but two years ago, I wanted to try out how an updated site would work on Tumblr. So I got myself a nice Tumblr theme and started to build my personal blog on Tumblr.
Two years later, I am moving everything back to WordPress. There are several great blogging systems out there, but WordPress is something I know and it had a great overhaul with version 4. I have also been writing on Medium and thought of dropping my site completely. But I still believe I need to have a “real” website.
There are a few reasons that made me feel that Tumblr is not the right platform: Tumblr seems to be great for sharing small pieces of content: images, GIFs, quotes. But it was never intended as a real blogging platform.
Tumblr seems to be slow. I tested the speed of my site, and it was above 10 seconds. I like images in my blog posts, and Tumblr always compresses them in a way that they look pretty bad. So I uploaded the images to Flickr first and then embedded them into my site — which is one reason the site is so slow. No chance you could even get those images adaptive.
I want to write more in the future, but the editor is not fun to work with.
So I installed WordPress and got myself a nice theme from Elmastudios.
Then came the fun part: How fast can I get this site?
Caching It seems caching is a must on WordPress to make it faster. So I am using the W3 Total Cache plugin. I also tried WP Rocket, but in a few tests, W3 Total Cache was the fastest. But that might vary, and there is no real major difference.
Content Distribution Network I am not using my webspace to store any image. I am using my Amazon S3 account to upload images to the cloud. On top of that, I added a CDN, Amazon CloudFront. This is a content delivery network that stores images on a lot of servers all over the world. So they are not delivered from my web server in Germany but from different Amazon servers in 37 locations around the world. If you open this site in Sydney, the images will be delivered from the closest server that the CDN has. If you are somewhere else in the world, it looks for another server close to you.
For this, I am using the Amazon Web Services and the Amazon S3/Cloudfront Plugin.
But I saw that I still had a lot of CSS and Javascript on my server. I wanted to have this delivered through the CDN as well. So I am doing this through the CDN settings in the W3 Total Cache plugin I mentioned above (sadly, the Amazon Cloudfront Plugin is not yet capable of doing this, but it is on their roadmap). I could have used this plugin also for the images, but I did not like the configuration, and it seems it is just a pull CDN, but I wanted to have the images pushed to Amazon S3 / CloudFront once I upload them.
Adaptive Images A few years ago the web was easy. You had mainly desktop computers and fixed screen resolutions. But as time progressed, mobile and content is now visible on an almost unlimited amount of screen sizes; you have to build a responsive site. No worries here; Elmastudio took care of it.
But you also have to rethink how you work with images on responsive sites.
I also wanted to have retina images delivered to high-resolution screens, like my Macbook Pro or the iPhone/iPad. “Adaptive images” are the solution to this.
The basic idea is that the visitor to your site gets the smallest image possible delivered. So you don’t deliver a 975px image to a small smartphone screen. At the same time, you don’t want to create and upload ten images of different sizes plus @2x images for retina displays. All this needs to work in the background.
There are a few old plugins and scripts out there that have not been updated for a while. Then I found responsive.io, and their service via email was great. Their basic plan after a 30-day trial is $15. I think that’s worth it when you want to deliver your visitors the best possible experience on your site.
So as you can see right now, every image on this site is adjusted to the correct size, depending on the screen you are watching it on. This is great, and it saves you bandwidth and time to load content.
Lazy Loading Getting a site up to speed also involves thinking about Lazy Loading. This means you don´t load all images on the full site, but rather just the images that are visible. If you don´t integrate lazy loading, your browser will load all images first and then display the site. This means an unnecessary delay. But sadly, Lazy Loading does not work very well with adaptive images. At least, all existing plugins broke responsive.io (I was in contact with them, and they are thinking about integrating lazy loading into their plugin.) So we built a little tweak, and now we have lazy loading, and responsive.io is working.
This is what we did.
We added this to the footer.php file within my theme:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var elements = document.querySelectorAll('img'); Array.prototype.forEach.call(elements, function(el, i){
var watcher = scrollMonitor.create(el); watcher.enterViewport(function() { src = el.getAttribute('data-lazy-src'); if (src!=null) { el.style.opacity = 0; el.style.display = "block"; el.setAttribute('data-src',src); console.log(src); el.removeAttribute('data-lazy-src')
ResponsiveIO.refresh(el); (function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .1) > 1)) { el.style.opacity = val; requestAnimationFrame(fade);
}
})();
}
});
});
});
</script>
And in the code of the responsive.io plugin we changed the following: “data-src” to “data-lazy-src”.
Deferred Javascript When testing the speed of the site, I got an error message saying “Deferred Javascript Loading.” I did not dig deeper into it but just installed the WP Deferred Javascript plugin. There was nothing to configure, and when I tested the speed again, the issue was resolved.
That´s it for the speed! And wow, I am amazed at how fast I got this self-hosted WordPress installation on a 9 Euro per month server! I also pay $15 for the responsive images, plus a small fee depending on traffic for Amazon S3 / Cloudfront.
The best result I got was around 1 second. I checked all the load times of my visitors in the last few days since launching the site, and the average load time is around 2.2 seconds (in the test below it is at 2.6 seconds)! Compared to more than 12 seconds on Tumblr (I know, hard to compare, as I never did any speed improvements on Tumblr, but that seemed too hard for me as a non-developer).
What else? I am also using the following plugins:
- Akismet (standard spam comment plugin, everyone should activate that).
- All-in-one SEO Pack. I think it can´t hurt, but I never got deep into the overall SEO stuff. But probably I have to.
- Contact Form 7. This is the leading contact form plugin. With this plugin, you can integrate a nice looking contact form within a few seconds.
- „Pin It” Button for Pinterest adds the „Pin“ button to every image if you hover over it.
- Monarch Social Sharing. This comes with a subscription of 89$ of elegantthemes.com. Not a bargain, but I tried out all the other social media plugins, and this was by far the one I liked most. It is easy to integrate, and you have a lot of settings. It looks good, and it does not slow down the overall site too much. A great alternative is Mashshare (basic features for free).
- Oh, and I almost forgot: to get all the content from Tumblr to WordPress, I used the Tumblr Importer plugin.
Here we go, the site is up and running!
Let me know in the comments if you have any other ideas of speeding up a WordPress installation or other great plugins I should know.
Originally published at juergenalker.com on February 2, 2015.
