Optimization

Tag: Optimization

10 Things You Can Do to Speed up Your WordPress Site

2018-10-31T20:52:15+00:00July 21st, 2015|12 Comments

Just like a computer, a brand new WordPress site feels super fast. But after using it for a while you will notice a slight decrease in speed and performance. Just like operating systems, your WordPress site also gathers clutter that could slow it down. However, you can easily fix this by fine tuning your WordPress site for speed and performance. In this post we will share x things that can help you speed up your WordPress site.

1. Optimize Images for WordPress

Images are great for user engagement and they make your site look pretty. However, images are also very resource intensive. Typically, a web page spends most of the time downloading images. While your page is downloading images users are stuck waiting for page load to complete. This can seriously damage user experience.

If you are using an image editing program like Photoshop, Gimp or an online editor like BeFunky to optimize and save your images for the web.

BeFunky Online Image Editor

Alternatively, you can use the EWWW Image Optimizer plugin. This powerful plugin will automatically optimize your images as you upload them to your WordPress site.

2. Install a Caching Plugin

Majority of WordPress sites are hosted on shared servers. This means that your website is sharing the same server resources with several other sites. When a user requests a page from your site, you are basically competing with all other sites hosted on the server for resources.

Your server needs to run PHP process every time a visitor requests a page. This PHP process is heavy in its resource usage. By using a caching plugin you can limit these requests and show users a cached page instead. Combine cached page with gzip compression and you got yourself a super fast website.

W3TC Cache Plugin

There are some really awesome WordPress caching plugins available for free. We recommend using W3 Total Cache. We have a beginners guide to setting up W3 Total Cache plugin that you will find helpful.

3. Use CDN

CDN or Content Delivery Networks allow you to serve your site’s static files like images, stylesheets, and JavaScript from servers located around the world. Using CDN you can significantly reduce the load on your server, which results in faster page load.

There are several popular CDN service providers available like Cloudflare, Amazon Cloud Front, and MaxCDN. All of them can be easily configured to work with your WordPress caching plugin. Take a look at the advanced guide to W3 Total Cache.

4. Reduce Page Load requests

The real power of WordPress lies into the abundance of awesome plugins available for you to use on your site. These plugins can help you do anything you want on your site. However, one downside of using plugins is that sometimes they may load additional scripts and stylesheets. If you are not careful, soon your site will be loading several scripts, stylesheets, fonts, and whatnot.

Each request to an additional resource increases your page load time. Keeping these requests to a minimum will help you improve your site’s page speed scores. Many advanced WordPress users collect all the scripts loaded by the plugins installed on their site in one single script. However, this technique is difficult to apply.

You can however make sure that you are not using plugins that are adding too many unnecessary scripts in your site’s header or footer. You can figure this out by looking at your site’s source code and locating requests to .js or .css files.

5. Use Excerpts on Main and Archive Pages

WordPress shows full article on your site’s main page, archives, author page, etc. This means that users will load the full articles including all the images when they view your homepage or archives. This slows down these pages significantly since you have multiple posts listed on each of these pages.

Using excerpts you can show only the summary of an article instead of the full content. This not only improves the speed, it will also increase your pageviews. Another benefit of using excerpts is that you will can avoid Google’s duplicate content penalty.

Take a look at WordPress Codex article on Using Excepts for more details.

6. Use Third Party Commenting System

We all love to see more and more comments on our websites. Comments are a great way to engage users in a discussion and build a community on your site. However, as your site grows in popularity so does your comments.

Posts with lots of comments will take much longer to load. When a user submits a comment this will run PHP process to submit the comment. Many users commenting at the same time can put intense load on your shared hosting server.

Using a third party commenting system like Disqus, LiveFyre, and Facebook comments can help you deal with this issue. These commenting systems load asynchronously and only when a user scrolls down to the comment area.

7. Optimize WordPress Database Tables

WordPress stores all your data in a MySQL database. If you are running a WordPress site for sometime, then your database will gather lots of data that you don’t need. For example, your WordPress post revisions, spam comments, orphaned tables created by plugins you no longer use.

Some experts argue that the database clutter has no impact on site’s speed. However, there are some experts who argue that this clutter can slow down your MySQL queries. There is no downside of optimizing your WordPress database tables. Even if it doesn’t improve your site’s page load speed, it will still decrease your database backup size.

WP-Optimize is a WordPress plugin which helps you optimize and cleanup your WordPress database.

WP Optimize Plugin

8. Use Cloudflare for DDOS Protection

DDOS attacks (Denial of service attacks) are a common occurrence on the web. Shared hosting servers often get attacked by these malicious attacks trying to bring down services or to gain control of the servers. For a site owners fighting with these kind of attacks is quite difficult. They simply don’t have the resources and technical knowledge required to deal with these attacks.

CloudFlare provides a CDN and a firewall to protect your website from DDOS attacks and MySQL injections. It can also show a cached version of your site to the visitors when your site is temporarily inaccessible.

9. Lazy Load Videos

Videos are the most engaging content form. WordPress users can easily embed videos from YouTube, Vimeo, and other video hosting sites. One problem with video embeds is that usually your site loads faster than the video player.

Lazy Load for Videos is a WordPress plugin which replaced the video player with the video thumbnail and a clickable play button. The video player is loaded only when a user clicks on the play button. This is a highly recommended tweak for sites that curate video content.

10. Lazy Load Social Media Buttons

Adding social sharing buttons for each post is important for many site owners who want to create viral content. Problem with social sharing buttons is that they require loading additional JavaScript and images. If you have multiple social media icons on your website, then they are slowing down your website.

Make sure that your social sharing plugins are asynchronously loading social buttons. Most popular social sharing WordPress plugins have this setting. Some plugins have it enabled by default, while others require you to enable it manually. We recommend using Share This and Add to Any WordPress plugins for social sharing. Both of them load your social sharing buttons seamlessly without affecting your page load.

Conclusion

It may feel like a lot of work to optimize your WordPress site for speed and performance. Rest assured that you will not regret spending time on improving your site’s speed. The benefits far outweigh the time required to do all these things.

A Comprehensive Guide to WordPress Image Optimization

2018-12-19T20:39:45+00:00March 26th, 2015|20 Comments

Let’s start with the bad news: Failing to optimize your images for WordPress is a potential recipe for disaster in terms of user engagement, search listings and bottom-line revenue.

The good news? Image optimization is a pretty simple thing to get right and one of the quickest shortcuts you can take to transforming a good site into a great site.

In this post, we’ll take a comprehensive look at everything you need to know to take your content to the next level by optimizing your WordPress images like a pro. Let’s get going!

Do I Really Need to Optimize My Images?

Back in the mists of Internet time, everyone was on dial-up and connection speeds came in one flavor: slow. In those days, image optimization was naturally at the very top of any developer’s to-do list. However, fast forward a few years through the broadband revolution and people are happily streaming the Superbowl live on their smartphones.

With that in mind, do we really still need to worry about a few kilobytes here or there with images? Let’s look at three critical reasons why the answer is an emphatic yes.

1. Page Load Times Matter to Users

Recent research from the HTTP Archive suggests that images, along with Javascript bloat, are the main culprits in average page sizes now weighing in at a hefty 1.25MB. So what, you might ask? Well, 73% of mobile internet users report recently coming across a website that they found too slow to load.

It gets worse. In the same report, fully half of web users say they expect a website to load within two seconds. Meanwhile, the average page on a mobile device loads in seven seconds.

The conclusion is simple: First impressions count. Clog up your site with unnecessarily large images and you risk antagonizing your visitors straight out of the gate.

2. Image Bloat Puts Search Engine Rankings at Risk

As far back as 2010, Google officially announced that site speed is a ranking factor. Their stated aim is that your page should load in one second or less. The verdict is very much in: a slow page will hurt your search engine rankings.

3. Slow Pages Equal Lost Revenue

Combine user dissatisfaction with plummeting organic rankings and you have a recipe for financial ruin. According to a recent Strangeloop report, a one second delay in page load time translates into a 7% loss in conversions for most sites. Can you really afford to leave up to 10% or more of revenue on the table?

The need for optimization is clear. But before we dive into the nitty-gritty, let’s take a quick refresher on images for the web.

What Do I Need to Know About Images for the Web?

Web images can broken into two categories: vector and raster. Vector images are mathematically generated, resolution independent and scalable to any size without loss of quality. They’re perfect for illustrated elements such as backgrounds or logos, and their file sizes are typically tiny.

After years of wrangling, modern browser support for Scalable Vector Graphics (SVGs) is finally nearly implemented across the board and, from the optimization point of view, they arrive pretty much perfect out of the box.

Raster vs vector image format comparison

The fixed pixel dimensions of raster images on the other hand are where we need to do a little more work. Let’s have a quick look at the three standard formats.

GIFs

The workhorse of the early web due to their small size, suitability for text and simple graphics (as shown in the Taiwanese freeway sign below) and support for transparency. These have made a comeback of late in the recent craze for animated GIFs.

Taiwanese Road Sign

JPEGs

Long the universal standard for online photos, JPEGs compress superbly but are let down by a lack of transparency support. The twilight shot from Baker Beach below shows their suitability for gradient heavy images with a large range of colors.

Twilight Shot Baker Beach

PNGs

Offer lossless compression, excellent image quality and support for transparency as shown in the baseball image below. The downside is the larger file sizes that result.

Basebal

You can take a deeper dive into the individual raster formats over at Sitepoint’s excellent overview and sneak a peek at the possible future with Google’s WebP project.

Should I Consider Cropping?

The answer is almost certainly yes. Trimming the visual fat kills two birds with one stone: your images will pack more visual punch and the filesize will come down.

Looking for inspiration? There’s a great tutorial over at The Next Web to get you started with creatively filling the frame.

Do I Need to Resize My Images?

The default images produced by modern digital cameras are far larger than anything you need for WordPress. Depending on your device’s quality settings, they could be as huge as 7360 x 4912 pixels and well over 30mb. Further resizing of these images for the web is essential.

You’ll need a decent tool to do this of course, and for many years that effectively meant only one thing: Photoshop. It’s more affordable than ever these days with Adobe’s Creative Cloud packages but an impressive range of online and offline alternatives have also emerged over recent years.

For offline use, consider Pixelmator on the Mac or IrfanView on Windows. You can even use the default Preview and Paint programs for Mac and PC respectively (I do!). Gimp also provides a free, cross-platform, open-source alternative if you can stomach the learning curve, and online options like Pixlr and befunkey are also worth a look.

Here’s a simple checklist for resizing images:

  • Always ensure you’re working on a copy rather than the original high-quality source file.

  • Open the image with your editor and reduce it to your desired pixel size while being careful to maintain aspect ratio.

What Do I Need to Be Retina Ready?

There’s no putting the Retina Display genie back in the bottle. 300dpi devices are here to stay and their percentage of site traffic is only going to increase. So unless you want your carefully chosen images suddenly looking choppy and pixelated on newer devices, you’ll need to adjust accordingly. (Not sure what retina means? Take this useful primer.)

Check out the example below via the good folks over at the Jetpack blog for a graphic example:

Retina comparison

Current best practice is to output two versions of your images: one at your base pixel size requirement and a 2X version for retina. For example, a 300px x 300px JPEG would also be output at 600px x 600px.

When it comes to choosing which version is displayed on your WordPress site, you can either roll your own solution using Retina.js or use one of the two leading WordPress plugins to do the heavy lifting: WP Retina 2x or Simple WP Retina. Take your pick!

How Do I Compress My Images?

So, you’ve prepped your images and factored in display requirements across a range of devices. It’s a good start in terms of optimization, but compression is often the step where the biggest gains are made.

Compression is the process of algorithmically eliminating image information that the human eye (hopefully) cannot detect. Done correctly, you can expect to decrease your image sizes dramatically. in short, it’s well worth doing.

In contrast to PNGs, JPEGs use “lossy” compression which means there is more room for savings, but you’ll have to check the results carefully for unwanted visual artefacts post-compression as shown in the heavily compressed detail of our earlier Baker Beach image below. You’re aiming for a balance of the lowest file size with the highest possible image quality. For a full discussion of the trade-offs involved, check out HTML5Rocks’ excellent image compression overview.

With the offline image editors mentioned earlier, you’ll simply by using the built-in Save-as options and tweaking. Consult this piece for a detailed breakdown of how to do this in Photoshop.

There are also dedicated offline apps on the market that specialize purely in image compression. Check out ImageOptim on the Mac or Trimage on both Mac and Windows.

We also recommend having a look at the recent range of dedicated online image compression tools. Leading contenders here include TinyPNG, Compressor.io and Kraken.

How Do I Optimize My Images for SEO?

So far we’ve concentrated on the “physical” properties of images, but SEO image optimization is arguably equally important to your site’s success. Let’s run through the basics:

  • Filenames: Use descriptive filenames that include your keywords rather than meaningless default names. For example, use “2015-nissan-centra-green.jpg” rather than “AAA1432E.JPEG”.

  • Alt tags: Every image should have a clearly written, non-spammy Alt tag for SEO and wider accessibility. For example, “alt=’Front view of a green, 2015 Nissan Centra'”. Title tags can also be included but bring little SEO benefit.
  • Captions: Not required for SEO but may be useful for on-page user orientation and reading flow. Use at your discretion.

For further information, consult Yoast’s excellent guide to optimizing images for SEO.

How Do I Optimize Beyond WordPress?

All this image optimization work is in vain if your site is springing a leak somewhere else in the stack. It’s a huge subject to cover but start with the following:

How Do I Avoid Re-Inventing the Wheel?

Leverage the power of checklists by turning image optimization into a documented, repeatable process that can be executed by anybody. Your exact requirements will naturally vary, but start with this 5-step outline for your checklist and refine from there:

  • Always select the right image format for the job.

  • Crop images intelligently to maximize impact.
  • Resize images for standard and retina display.
  • Apply image compression and visually proof results.
  • Optimize all images for SEO.

We hope this article has given you some useful pointers on optimizing your WordPress images. It’s a key step to build into your workflow and one of the simplest ways of quickly seeing improved user engagement, higher search rankings and an increase in mobile traffic on your site.

We’ve tried to stick to the classic image optimization techniques above but there are new tips and tricks emerging every day. Drop us a line in the comments if you have any to share or feel we’ve missed something that could be helpful to other WordPress site owners. Happy optimizing!

Image Credits: Joey Gannon, Yug, Jay8g, Brocken Inaglory, Tage Olsin

Recent Posts

Recent Tweets

For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept