I love WordPress. I’ve built sites large and small with it. I’ve spoken about it at conferences like WPCampus. It’s been exciting to watch it grow since I really started using it in 2008.

It’s plugin system allows new and experienced developers to add functionality, features, and tools to their websites in an easy and intuitive way. But with great power comes great responsibility. It’s not uncommon now for websites and pages to be over 3MB in size including images, css files, and javascripts. Last year, Wired ran a story saying that the average webpage is the size of the original shareware DOOM game.

I regularly see results like this from YSlow and GTMetrix all the time when I plug WordPress sites in to see performance data:

That’s crazy, but it’s what happens when you use a ton of plugins in WordPress. Each of those plugins will add their own CSS and Javascript files into the site. Add in the myriad of tracking scripts and beacons and we end up with a website or landing page that has 30 external javascript files. I fear the art of website optimization is slowly being lost or worse, skipped or ignored.

I’m most likely salty about this because I learned how to make websites in the days when the majority of our users were on dial-up connections. We worked to get every kilobyte we could out of our images in order to serve them just a little faster. Photoshop would even tell us how long it would take to download that image on various modem speeds.

Photoshop 5 Save for Web Dialog

Photoshop 5 Save for Web Dialog

 

There’s no reason for sites to be three, four, or even five megabytes in size. That’s especially bad in our current era of mobile usage. But there are easy things site owners can do to improve their site speeds.

A few thoughts on optimization

First, a question to ask. Is the functionality a plugin is adding something that you can accomplish by coding it into your theme?

It’s less taxing to input, for example, your Google Analytics or Tag Manager code in your theme’s header or footer file than use a plugin to do it for you. Not only do you remove the need for a plugin, you also do away with an additional database and PHP calls. The less calls to the server and to your database, the faster your site will be. You will also have less to manage in terms of plugin updates and security.

Can you accomplish things like animations and visual effects directly in your theme’s CSS or Javascript? If so, put it in your existing theme’s structures. Better yet, ask yourself if you really need that animation or effect in your site. It’s fun to see an image pop or fade in on first view, but once I’ve seen it, the thrill is lost. Does that animation meet accessibility guidelines? Save file space, and reduce or remove animation effects.

Second, there are times you need multiple plugins due to your site’s requirements. In that case, it makes sense to minify, combine, and cache as many of your static files as you can. I have used Fast Velocity Minify and Autoptimize to do this heavy lifting for you. These work in the background to combine those 30 CSS files into one or two files. This will allow them to be served much faster. Combined with good caching, your site speeds will improve.

Don’t forget to optimize images too!

Optimization Recommendations from GTMetrix

I’ve spent most of this post talking about JavaScript and CSS files. Another culprit when it comes to increasing site sizes are images. If you are exporting files directly from Photoshop, you may not be getting a fully web-optimized versions. In most cases, your images could benefit from additional optimization.

I’ve blogged about options like ImageOptim and TinyPNG before in this post. If you don’t want to add a step to your workflow, or perhaps you have users who are uploading content to your WordPress site, you can do optimization on the server side.

There are several plugins and services that will optimize your images for you when they’re initially uploaded. Some will also go through your media library to optimize previously uploaded files.

One such tool is EWWW Image Optimizer. They offer a plugin that will do the optimizations right on your server. This is a good choice if you’re on a dedicated server or VPS. This free plugin will optimize your images right on your own hardware.

If you are on shared hosting, or use a hosting service like WPEngine, this type of local image optimization plugin may be blocked. It uses processor and memory power to run, which can impact performance in shared environments. Worry not, EWWW has an option where they will optimize your images in their cloud seamlessly and return the file to your site. This means you can use it at hosts like WPEngine.

Wrap Up

Whether you are an experienced developer, or someone relatively new to WordPress, it’s worth the effort to make your site as fast as possible for your users. There are tools to make this process simple, and more importantly, automatic. Your users will thank you, Google will thank, and I will thank you.

There have been several high profile plugins lately that have been found to be posting spam and deceptive links on user’s blogs lately.

One such is the “Display Widgets” plugin. You can read Wordfence’s detailed breakdown of the spam. It turns out the original developer of the plugin sold it, and the new owner started to place spammy backlinks and other bad code into the plugin. This gave this “developer” access to tens of thousands of blogs and the site owner’s never knew it was happening.

Continue reading

It’s interesting to see Google really pushing AMP (Accelerated Mobile Pages) and featuring sites that are AMP-ready more prominently in its mobile search results.

What’s AMP? Good question. It’s one I’m going to let my friend and colleague Jen Lombardi, owner of Kiwi Creative, explain, as she did in this blog post for the EdUI conference. She says:

With faster cellular data networks and increased access to Wi-Fi, people have come to expect that websites will load quickly and be easy to explore. But what if pages didn’t just load fast…but instantaneously? That was the goal of a group of publishers and technology companies that started the open source initiative named The AMP (Accelerated Mobile Pages) Project.

Introduced by Google on February 24, 2016, AMP pages now load 85% faster than standard mobile web pages…and this speed matters. According to one study, mobile pages that load one second faster experience up to a 27% increase in conversion rate.

Google says this:

The Accelerated Mobile Pages (AMP) Project is an open source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere.

It’s interesting to watch Google reach into this space. Many of our sites today are responsive, but I find that even when responsive, the sites are huge, often unoptimized messes. This is especially prevalent in WordPress, where each plugin adds its own javascript and CSS files, and it doesn’t take long for a simple one page website to be well over 1MB in size. That’s crazy, especially on mobile.

AMP is forcing developers to reconsider the information they’re presenting, but the reward is more visibility in Google.

While AMP pages are getting pushed big time by Google, implementing this new technology can be tricky. For example, all your CSS must be inlined and not in external files. One more thing – that CSS has to be less than 50k. Search Engine Land has a deep dive into how to create these pages.

Want to see an AMP page in action? Here’s a post I did about Instagram a few months ago, but in AMP format. Have a look not only at the design but at the code inside it. You’ll get a taste for how much you have to shift, style wise, from external files into the actual HTML file.

As this site is created in WordPress, I turned to an AMP plugin created by Automattic.

Spoilers: there’s no setup or config for this. You install it, turn it on, and that’s it. It does all the work in creating the correct template, inline CSS, and body copy in all the ways Google wants it to be. My pages are also passing the AMP Validator tests. Yay.

AMP validation results for this site

This plugin also adds a meta tag to your regular WordPress theme, again with no added work on  your part, alerting Google that an AMP version of that page exists. It looks like this:

<link rel="amphtml" href="https://highedwebtech.com/2016/06/07/instagram-breaketh-their-api/amp/" />

That’s enough for Google to know there’s and AMP version and present it, if necessary, to site visitors via search.

Now, if you’re like me, you’re mind is traveling down the rabbit hole of all sorts of web development issues – issues like SEO, analytics, design, and more.

Read Jen’s post above as she covers SEO and design nicely, but AMP does allow developers to do analytics, ecommerce, and even advertising. This post from Google talks about how to integrate Google Analytics into AMP pages. If you use Jetpack and WordPress stats, this is another thing that the AMP plugin sets up automatically for you.

If you use WordPress, you should try this plugin. If you don’t use WordPress, the process to implement AMP can be more difficult and time-consuming, but if you rely heavily on Google, the reward may be worth the effort.