You don’t need a subscription to read today’s Friday Archive Dive!
Even if you’re not a member of the site, you can read the entire post, which ran April 30, 2014. If you’ve ever been curious about the kind of information, tutorials and advice that you’ll get as part of your subscription to Webcomics.com, this is a good sample.
If you’d like to join the site, you can get a 12-month subscription for $30 — or you can get a one-month Trial for $5 … with no obligation after your 30 days expire.
This post was kindly submitted by member Mo Jones.
I’ve been obsessed with page-load speeds for years, and I’ve learned quite a bit in that time —although I am by no means an expert. Page-load speed isn’t just a user experience issue — although it is certainly that — it can also affect your Google page rank.
Useful tools for monitoring and analysing your page load speed are pingdom.com and a the pagespeed Firefox plugin (yslow is also handy, but it hates Wibya, and will mark you down for using it). Pingdom tests your site from a server in Europe, so if your host is in the US it might show slower results than if you tested with Webpagetest with its multitude of locations to choose from – but Pingdom is useful as a benchmark.
I’m using a WordPress/Comicpress install, because that’s what I started with five years ago. There is an argument that says if speed is your priority, you shouldn’t use WordPress at all – and that’s a fair point. WP is great, but it’s big. If there is a leaner system out there that does everything I need and is secure, I’ll switch to it.
Caching
You’re caching, right? It’s pretty essential when using WordPress to have a decent caching system. The three main ones are WP Super Cache, W3 Total Cache, and Hyper Cache. I’ve tried them all, with varying degrees of success. Super Cache had issues with my host because of php safe-mode – but that’s an unusual quirk of my host, and probably won’t affect you. W3 Total Cache gets a great press, and it certainly does lots of clever things, but I found it to be bloated – and it actually slowed down my load time (I may have configured it badly). Hyper Cache is about a tenth of the size of those two, and works flawlessly, speeding up the site better than either of them. You’ll want to experiment.
File optimization
This is a big one. I look at a lot of webcomics, and I’m often surprised at the sheer size of the image files I need to download. Your full-colour comic doesn’t need to be hundreds of kilobytes if you save it in the right format. After much experimenting with Photoshop’s ‘save for web’ function, I’ve discovered PNG-8 is the ideal. If you’re using PNG-24, your images are 3 times bigger than they need be and take 3 times longer to load. You may notice a slight fade in the colour when you change from PNG-24 to PNG-8, but your readers almost certainly won’t. It can make a difference of seconds in the page-load time. Different settings produce different results. Again, experimenting will help you make an informed decision.
You should optimize your CSS, too. If you have time, take a look at it and strip out all the lines you don’t use. Then put it through the cleaner. You probably don’t want to make it all one spaceless block if you are ever going to edit it again, but you should be able to shrink it a lot without sacrificing all legibility.
CDN
Your readers are located all over the world. If your server is in the States, then people who are looking at your site from Australia are suffering slow loads due to latency. This is where a Content Delivery Network (CDN) helps. If you hire space on a CDN, they distribute your static files to a network of servers all over the world, and your reader downloads from the one nearest to them geographically. This makes a huge difference.
My host provides space on Internap CDN on a pay-as-you-go basis (with my optimised files, it’s very cheap). Most hosts don’t – but you can still rent space at competitive rates elsewhere. Akamai is the king of CDNs, and it’s awsome, but extremely expensive. There are affordable others (I found about that one here, which is also a good intro to the concept). You can pay about 50 dollars for a Terabyte.
Once you’ve got space on a CDN, put all your static files on it: images, CSS (edit header.php to point to it), and your comic folder, too. The latest ComicPress has the ability to automatically load your comic onto your CDN. My old 2.7 version doesn’t, but Frumph, being the magnificent fellow he is, showed me how to do it. You can see the the difference it made here.
Only my WordPress install exists on my host server. Everything else is either on my CDN, or is 3rd party ads – all of which have their own CDNs.
Sprites
You can reduce the number of objects a reader has to download by putting all your frequently used images (eg navigation, masthead etc) into one big image and calling them up using the CSS sprite technique. If you optimize that big image too, you’ll save a lot of time. It’s a bit of work, and not recommended if you change your images a lot. You can learn about them and create them here.
Database optimization
I had dragged the same database through three separate hosts over the space of five years when I realised that maybe it was causing my site to load more slowly than it should. There are optimizing buttons in phpMyAdmin that you can use, but that wasn’t going to help me. In the end I created a fresh WP install with a clean database and copied over from the old database only the essential tables (comments, posts, transcripts, subscribers etc), one by one. I left a lot of crap behind – mostly in wp-options, where the remnants of long discarded plugins and god-knows-what else were festering. That resulted in probably the most significant speed-up I’ve experienced.
So, that’s basically what I’ve done to get my comic loading as fast as I can for as many readers as possible. I think it’s as quick as it will go under the current setup. There are lots of other little things you can do that Google pagespeed and YSlow will recommend – like putting javascript at the bottom (there’s a plugin for that), and various .htaccess tricks (expires headers, gzip if you’ve got it). But I’ve already written too much!
I hope it’s of some help to people. Please feel free to disagree with any of my recommendations, or to add your own.
Loading ...