WordPress may be one of the most powerful content management systems in the world, but that doesn’t mean that it’s flawless. It can still be misused, and you can definitely still make mistakes if you don’t know what you’re doing. If you’re planning to upload rich media like images, video, or audio to your site, there are a few things about the platform that you need to understand – a few steps that you need to take in order to optimize for that content.
I don’t believe I need to explain why optimizing your WordPress installation is important. You don’t want to frustrate your users with a slow site or with content that doesn’t load properly, right? Let’s get started.
Make Sure Your Videos Are Web-Ready – And Avoid Uploading, If You Can
Version 4 of WordPress brought with it a host of pretty fantastic features – including html5 video embedding. Basically, what this means is that you can now post regular video content for your readers to watch, and that’s great. Unfortunately, there’s one problem – a lot of video formats place the index at the end of the video.
What that means is that a user needs to download the entire video before it even starts to play – for longer videos, that can lead to some pretty significant load times.
It’s therefore important that you take steps to optimize your videos for viewing on the web before you put them online. To that end, I’d advise you use Handbrake or a similar tool – it has an option that lets you automatically optimize videos for the Internet.
I’ve one more piece of advice before we move on: don’t upload videos directly to your WordPress account. Ever. Just don’t do it.
Embedding is easier on your servers, makes it easier to share your content, cuts down on bandwidth, and does a whole lot to improve traffic – especially if you’re hosting on YouTube.
Choose A Theme That’s Designed For Media
No two themes are created equal. If you’re planning to upload rich media to your site – or intend to create a website that’s completely focused on media – then it’s important that you select a theme that’s developed with that in mind. Make is a great choice in that regard, as is Onetone. Look around a bit, and find one that’s right for you – it’s not like there’s a dearth of choices.
Check Out A Few Plugins
Everyone knows that one of WordPress’s greatest strengths lies in its rich plugin ecosystem. Naturally, that means that there are plenty of plugins out there designed to make the optimization process a great deal simpler. Jay Hoffman of Torque recommends five plugins in particular:
- Imsanity: limits the size of images uploaded to WordPress, and automatically scales down images that are too large.
- EWWW Image Optimizer: Allows you to compress images before uploading them, reducing their size and thus reducing the load time.
- PictureFill.WP: Lets you serve responsive images (images that change based on the device that’s viewing them) without having to use the HTM5 markup – meaning resizing is supported by older browsers.
- Lazy Load for Videos: Stops external files from loading right away, and substitutes a static thumbnail in place of video players – the video is only displayed if the user clicks “play.”
- PB oEmbed HTML Audio: Basically, this plugin is to audio shortcode what PictureFill.WP is to image resizing.
Resize And Compress All Your Images Before Uploading Them
This one’s pretty basic – and if you’ve the right plugins (see above), it’s something you’ll handle on your own anyway. Still, I’ve seen people neglect to do this so often that it nevertheless bears mentioning: if you’re going to upload images to your WordPress website or blog, resize and compress them BEFORE you do it, NOT after. Uploading a full-sized image to your site and then resizing it to fit into a post doesn’t actually change how much bandwidth the image uses up – your site is still loading the full image, it’s just resizing it after loading. Optimizing images before you upload them will also save you bandwidth, which is particularly important if you run a busy site with lots of traffic — bandwidth charges can quickly add up, especially if you use a content distribution system.
If you’re a Mac user, ImageOptim is a great tool for achieving smaller images.
Set Up A Content Delivery Network
Perhaps one of the best pieces of advice I can give you here is that if your site is serving up large volumes of rich media, you should spring for a content delivery network. This will help your site load faster, regardless of where your users are connecting from. That, in turn, will reduce the bounce rate on your site and make your servers far less resistant to crashing under a heavy load.
Okay, so maybe it’s not directly tied to rich media – CDNs are awesome regardless of what you’re using WordPress to do.
Enable gzip Compression
My last piece of advice admittedly isn’t something every webmaster’s going to be able to do – it’ll require a fair bit of technical knowledge, along with direct access to your server’s filesystem. What that means is that, in some cases, you’re going to need to check with your host before diving in. Anyway, what you’re going to want to do is add the following code to your .htaccess file:
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
This will enable something known as gzip compression – basically, this will compress all static elements on your site, significantly reducing the amount of time it takes to load.
In Closing
WordPress is an incredibly powerful CMS, but that doesn’t mean you don’t need to take steps to optimize it if you’re planning to use it for anything beyond blogging. Rich media tends to take up a fair bit of bandwidth, after all – if your installation’s not equipped to deal with those demands, you’re going to wind up with a lot of frustrated users. Not exactly something you want, is it?
