WordPress websites consist of a theme and plugins. And they rely on a database. That makes diagnosing slow page loads difficult. There are so many places to look.

What’s more, poor performance can appear out of the blue. A software update or a change by your web host could be the culprit. But how can you be sure?

We’re here to help! Here are a few tips for diagnosing a slow WordPress website. They’ll help you spot common (and not-so-common) performance issues.

Start With What You Can See

The first step is to assess what you see when your website loads. What you find could help you determine the next step.

Observe your website and think about the following:

Where Is the Slowness Occurring?

Poor performance can come in many forms. For example, it could be a sitewide issue. But it could be localized to a single page. Or maybe you’re only noticing sluggish behavior in the dashboard.

Make note of where you are (and aren’t) experiencing problems. This can help you narrow down potential causes.

Are There Any Obvious Signs?

Sometimes the problem is right in front of you. Elements such as image sliders or videos can slow down a page. Or you might notice that third-party content (like a social media widget) is loading slowly.

There are no guarantees. But you might gain insight into the slowdown. If not, there are still plenty of things you can do.

Use Some Helpful Tools

Several tools are available to help you diagnose a slow website. Performance scanners like Google’s PageSpeed Insights will provide a laundry list of potential issues.

But the reports can be a bit dense. Thus, finding key factors in poor performance isn’t straightforward.

Here, we’ll focus on a few other tools worth checking out:

Web Browser Developer Tools

Your web browser’s developer tools include powerful features. They’re the place to catch page load errors. And they can display critical information about what’s happening behind the scenes.

Modern browsers come packed with advanced developer tools. For our purposes, we’ll concentrate on the console and network panels.

Console

Let’s start with the browser console. This tool provides a real-time view of errors and warnings. It’s a handy listing of any issues impacting a page.

Perhaps the biggest telltale sign is a 404 Not Found error. That indicates a specific resource couldn’t be loaded. This could be a script, image, stylesheet, or font. The web server is wasting precious time looking for something that can’t be found.

The console will also fill you in on JavaScript errors and security notices. These can also get in the way of a faster page load.

Network

The network tool provides a listing of each request made. It provides context about what’s happening while the page loads.

For instance, you can see the amount of data transferred and the time it took. This helps you see which resources are weighing down a page.

In addition, HTTP response codes will point out blocked or missing resources.

Query Monitor

Performance issues directly related to WordPress can be difficult to diagnose. That’s where Query Monitor comes in. This free plugin provides a glimpse of how the CMS works in both the front and back ends.

Query Monitor shows you things that browser developer tools can’t. And it does so with a well-organized user interface. It adds a menu within the WordPress admin bar.

Among the information you’ll find:

• Database queries (with the ability to point out slow queries);
• PHP errors and warnings;
• A list of all enqueued scripts and styles;
• HTTP API requests;
• Server version information;

It’s a great tool for finding problematic PHP code and slow database queries. Query Monitor’s ability to point to specific items makes troubleshooting easier.

And the available add-on plugins allow you to dig even further. They can help with WooCommerce shops, BuddyPress/bbPress installs, and more.

Query Monitor can help you find the proverbial needle in a haystack.

You’ve Found the Culprit – Now What?

Hopefully, the tips above helped you identify the problem. What to do next?

Making performance tweaks is a topic of its own. Much depends on the source of your issue. However, there are a few universal steps to take.

First, be sure to repair any errors. Patch up any problematic PHP. Replace or remove references to missing resources. Remove third-party content that is taking too long to load. Consider this the low-hanging fruit in the process.

Next, look at how your theme and plugins are impacting performance. If you have outdated items installed, it may be time to replace them. The good news is that there are usually plenty of options within the WordPress ecosystem.

Finally, take a look at your web hosting arrangement. A slow file or database server is a drag on any website. Implementing tools like object caching or content delivery networks (CDN) can be difference-makers.

Be sure that your site has adequate storage, processing threads, and memory. A lack of resources is one of the most common performance issues you’ll face.

By addressing all three areas (code, theme/plugins, and server), you’ll be able to make significant performance gains.

Kick WordPress Performance up a Notch

There could be myriad reasons why your WordPress website isn’t performing well. Anything from a poorly-coded plugin to a buggy server could be to blame.

Sometimes you’ll get lucky and the root cause will be apparent. But you’ll more likely have to do some sleuthing to get to the bottom of it.

There are tools to help you pinpoint any problems. It starts with your browser’s developer tools. But you can also use WordPress-specific items like Query Monitor. Together, they’ll paint a clearer picture of what’s slowing down your site.

From there, you can take any necessary steps to boost speed. The process isn’t always easy. But it all starts with gathering the right information.

The post What’s Slowing Down Your WordPress Website? appeared first on Speckyboy Design Magazine.

It can all add up to something of a nightmare in diagnosing and fixing what would seem to be a simple problem.

That’s where we’ve come in to help. There are tools out there to help simplify the process of satisfying your need for (WordPress) speed. Below, we’ve compiled a collection of plugins that don’t require a rocket science degree.

They will, however, help you build a blazing-fast site. Plus, we’ll offer tips for getting the most performance out of your WordPress website.

The post 6 Best WordPress Plugins to Optimize & Speed Up Your Website appeared first on Speckyboy Design Magazine.

I hate to break it to anyone who likes nice, round figures: There is no specific number. No threshold that defines you as either a pro or poser. I know, some people define their success by using a minuscule number of plugins. If you can get away with doing so, you get much respect from me.

For the rest of us, plugins are a tempting proposition. They can take care of so many tasks – large and small. And they’re only a few clicks away.

But add too many and it can weigh down your site’s performance. Not to mention that every single thing you install adds another layer of complexity to the mix.

While there is no one-size-fits-all number of plugins you can or should run, there are some ways to tell if you’re past the limit. Here are a few factors to help you make that determination.

The Hosting Environment

Computing power and network bandwidth are incredibly important factors in terms of performance. Yet, most often the only control designers have over them is when choosing a host (if one hasn’t already been chosen for us). If you have a choice, look for a provider that offers lots of both.

Beyond raw power, the server’s OS and related software also play a role. You’ll want to ensure you’re running PHP 7.x, as that’s been proven much faster than previous versions. Server-based caching and load balancing can provide a big boost if your host offers them.

As important as anything, though, is the type of hosting account you have. If it’s low-end shared hosting, you’re probably not going to get the same bang for your buck that you’d get with a higher-end VPS or dedicated setup. The more dedicated resources your site has, the more well-coded plugins you may be able to get away with using.

Plugin Quality and Optimization

One of the truisms of code is that there is more than one way to make something work. But we also know that some techniques work a whole lot better than others. Consistent quality is so important as all it takes is one resource-hogging plugin to slow everything to a crawl.

The best way to figure out if a plugin has performance problems is to test it. There are a number of third-party testing suites out there that can provide you with a great picture – literally. You can access colorful graphs and charts that will tell you which plugins are taking the most time and resources on your site.

However, those of us with budgetary restrictions may not be able to afford this type of subscription service. Many are aimed at the enterprise market and are priced as such.

But all is not lost. To do some testing on the cheap, the free Query Monitor plugin will provide some insight into how your plugins, database, scripts and styles are performing. It also points out any PHP errors, which can be a factor in degraded performance.

If you do see that a specific plugin isn’t performing well, then that opens the door to testing out an alternative or digging deeper (which we’ll get to later).

A Plugin’s Purpose

A WordPress plugin can mean many things to many people. Not everyone will use them in the same way. And so developers often build plugins in a way that they feel will improve their chances of attracting users. Sometimes the result is a plugin that ends up being a bit like a Swiss army knife, with multiple functionalities included.

While a plugin that does a bit of everything can be great, it can also cause some bloat. On the other side of the coin, you’ll find that some plugins are rather small in scope and size – choosing to focus on just one particular feature.

The debate can be had of whether it’s better to run one plugin that does 20 things, or 20 plugins that each do one thing. Again, there really is no easy answer. It becomes a matter of testing performance.

One thing in favor of the Swiss army knife is that it could make troubleshooting easier. The more plugins you have to keep track of, the harder it can be to pinpoint issues.

Settings Matter

One often-overlooked area of plugin performance is in paying attention to its settings. Some plugins run very quickly when tuned a certain way, while sputtering in other configurations.

For instance, I’ve worked with a popular security plugin (which I won’t name, but you may be able to guess) for a number of years. One of its core features is a “Live” mode that lets you see users currently browsing your website. It’s a seriously cool feature, but can also hinder performance on a busy site.

Turning this feature off boosts performance quite noticeably. And while using the plugin may mean taking a small performance hit otherwise, the added security is worth the tradeoff. But knowing how to set it up properly is half the battle.

It’s All About Balance, Not Specific Numbers

As we’ve seen, there are a number of factors that can affect how plugins perform on a WordPress website. It’s the plugins themselves, how they interact with each other, how well they’ve been optimized and the server they’re installed on.

It’s rare to find two sites that are configured exactly the same. Therefore, the ideal number of plugins will vary for pretty much everyone. We can drive ourselves crazy trying to get our site down to only x number of plugins. I’d argue that it’s a waste of time to even worry about the number.

Rather, using plugins (or even custom code you’ve written yourself) is about getting the functionality you need and being willing to live with whatever tradeoffs that come with it.

Sometimes, a plugin will provide great functionality and terrible performance. In that case, you might want to look for a competitive product that is more balanced. Or it could be a matter of turning off certain features that are causing problems. The only way to know for sure is to test and retest.

In the end, the goal is to use only the plugins you need, while optimizing the ones you have to the fullest extent.

The post How Many WordPress Plugins Are Too Many? appeared first on Speckyboy Design Magazine.

WordPress is no stranger to various myths and conspiracy theories. Some people are suspicious of big changes to the content management system’s (CMS) core. And others simply have misconceptions about the ecosystem, community and the overall picture of how things work.

It’s time to set the record straight. Today, we’ll take a look at some of the most common myths floating around in the world of WordPress and attempt to uncover the truth. What will we find? Keep reading to find out!

Myth #1: WordPress Is Slow and Insecure

Let’s start with the double-whammy of performance and security. Social media clickbait often portrays WordPress as seriously lacking in both of these key areas.

The problem with this narrative is that it treats WordPress as a one-size-fits-all CMS. The fact is that, while a stock installation is universal, we rarely leave it that way.

There are so many ways to customize WordPress. For starters, third-party plugins and themes are a huge part of the experience. And seasoned developers may well craft their own. In addition, the CMS can be hosted in any number of different server environments.

Each one of these factors into both security and performance. For instance, equip your website with a bloated theme or buggy plugin and you open yourself up to potential issues. Opting for cheap web hosting can do the same.

Beyond that, WordPress is also incredibly popular. Thus, it has a target on its back from bots and other nasties. Much like hackers write viruses targeting the Windows operating system over others, they aim for WordPress as well. The bigger you are, the more they come after you.

The WordPress project is open-source and has a large number of volunteers who dedicate themselves to, among other things, performance and security. That’s not to say that there’s never a bug or security flaw – but the core software is quite well-maintained.

That said, WordPress by itself is neither particularly slow nor insecure. It’s what we add on to it after-the-fact that can lead to the biggest problems.

Myth #2: Automattic/Matt Mullenweg Own WordPress

There’s long been a misunderstanding regarding the “ownership” of WordPress. At least some of this is due to some self-inflicted branding confusion and a few blurred lines.

It’s true that Matt Mullenweg co-founded WordPress way back in 2003. This is the free, open-source project that can be downloaded by anyone and installed just about anywhere. It’s commonly referred to as “.ORG”, an homage to the project’s domain name.

Mullenweg is still very much active in the project. You’ll see his name pop up as a core contributor for various releases and he often takes part in community discussion. He also works with others in determining the software’s roadmap for future development as well. He does not, however, own the project itself. That is in the hands of the non-profit WordPress Foundation (which Mullenweg founded, by the way).

Now here’s the part that may confuse you. The similarly-named WordPress.com (“.COM”) is a place where you can host a blog for free or buy various levels of hosting. This is in fact owned by Mullenweg’s company, Automattic. And yes, it does run WordPress software.

If you’re curious as to the differences between WordPress.org and WordPress.com, there’s a handy guide to help you sort things out.

So, while Automattic (and thus, Mullenweg) are major contributors to the project, they do not own WordPress itself.

Clear enough? No? It’s best to not try and unravel it all at once.

Myth #3: WordPress Websites Are Too Cheap/Expensive

A bit of crowdsourcing brought this juxtaposition to the forefront. It’s a great example of how varied the perceptions of WordPress can be.

The reality is that WordPress can be either of these things or none at all. So much depends on how web designers choose to market and sell services. Then there is also the matter of how much a specific client is willing to pay. Oh, and project requirements have a good bit of say as well.

WordPress itself is free. And you can certainly grab a free theme, then sprinkle in any number of free plugins. It’s entirely possible to build a website for nothing (or next to it).

On the other hand, you could build your own custom theme that does exactly what you need. Then, invest in some high-end commercial plugins that provide crucial functionality. To top it off, add in some enterprise-grade web hosting. The costs will add up.

WordPress can be made to do as much or as little as you like. A web professional can utilize it to create a massive corporate hub or a simple landing page. There is no single way to do things. Therefore, you can’t really peg WordPress as singularly cheap or expensive. It’s all about what you do with it.

Myth #4: WordPress Isn’t a “Real” CMS

Back in its early days, WordPress was purely a blogging platform. And, despite a whole lot of evolutionary changes since, some people still associate it with this purpose.

Running a super-cool blog is only the start of what a modern WordPress website is capable of. You can leverage the software to serve just about any purpose.

Celebrity eCommerce shop? Check. Major government portal? Check. Home for a corporate giant? Check. Well-known educational institution? Check that one, too.

We could go on and on. The point is that WordPress can be used for virtually any type of website – large, small or in-between.

Now, whether one personally thinks that WordPress is the best tool for a particular use case is up for debate. Everyone has their own preferences. But to say that it’s just a blogging platform is myth.

Myth #5: WordPress Maintenance Is Inherently Messy

When it comes to WordPress maintenance, there are two separate entities to consider:

• WordPress core software;
• Themes and plugins;

WordPress core generally releases a few major updates per year. 2019 and 2020 saw three such releases each. Beyond that, there several minor releases (which update automatically) that patch security holes and squash bugs. Consider core updates as a baseline for maintaining your website.

Third-party plugins and themes are a whole different animal. The number of updates (or lack thereof) is up to each developer. Some larger plugins may push updates every few weeks. Others might not see a change for a year or more.

In theory, the more third-party resources you add to your website, the more there is to maintain. But it goes a bit deeper than that.

So much depends upon the types of themes and plugins you’re implementing. A plugin that powers crucial functionality and has a large user base (such as WooCommerce) is going require a bit more maintenance. The same can be said for a theme that uses a lot of advanced JavaScript libraries and custom features.

That said, every CMS requires some form of maintenance. This is a positive in that we want to make sure everything is as functional and secure as possible. Can something go wrong? Yes. However, applying updates is still vital.

Maintenance needs can be cut quite a bit by eliminating unnecessary plugins. This will not only save you time, but also help you avoid software conflicts as well. Short of that, there’s an auto update feature that can do a lot of the hard work for you.

WordPress Is What You Make It

When going through these myths and misconceptions, it becomes clear that the WordPress experience is different for everyone. Whether you’ve used it to build hundreds of unique websites or played around with a single blog – we all have a story.

Those stories ultimately shape our perception of what the CMS can and can’t do. Even some confusion over the separation between WordPress.org and WordPress.com can lead us to assumptions about who’s in charge and what is possible.

The bottom line is that WordPress really is ours to bend and shape. Use it to build something big or small, cheap or expensive. Install enough plugins to keep maintenance needs high or go completely barebones. Customize it to your heart’s content. It’s your choice.

There is almost endless flexibility. That’s what has led so many of us to choose WordPress. Just know that, whatever it means to you, there are other perspectives out there worth considering.

The post 5 Common WordPress Myths Debunked appeared first on Speckyboy Design Magazine.

So, when the Core Web Vitals metrics were announced, the response was pretty predictable. As these changes are based on site performance, our attention has turned to ensuring load times are lightning-fast.

But it’s not always simple. Websites that run a content management system (CMS) such as WordPress can be especially challenging. There are a lot of factors at play. Therefore, improving performance requires a multi-pronged approach.

Where to start? Check out our guide to boosting the Core Web Vitals score of your WordPress website.

Implement Caching

One of the simplest ways to increase the speed of a WordPress website is to implement caching. In many cases, a previously sluggish site will become significantly faster with this single step. This holds true even on relatively cheap hosting.

By default, WordPress pages and posts must retrieve content and settings from the site’s database. This takes time. Cache, on the other hand, will serve up content as static HTML files – cutting out the need for a database call. With the middleman (i.e., database) out of the way, snappier load times will follow.

Some hosting packages, particularly managed WordPress hosting, will include server-based cache. This is often the best option, as it requires very little from web designers and performs quite well. It may need to be cleared out every so often. Otherwise, it’s a hands-off experience. And it can be effectively combined with a plugin to further enhance speed.

Even if your host doesn’t provide caching on the server level, you can still optimize performance via a plugin. Caching plugins vary in scope, complexity and pricing. But they do provide tangible results when it comes to improving load times. That, in turn, is a positive boost for Core Web Vitals as well.

Defer Loading of Render Blocking Scripts and Styles

When testing your website’s performance in Google PageSpeed Insights, the subject of render-blocking resources seems to come up a lot. These are the scripts and styles that aren’t considered “critical” – meaning they’re not required to render the “above-the-fold” page content.

These resources can get in the way of faster load times. Specifically, they impact the “Largest Contentful Paint (LCP)” score in Core Web Vitals. This is the time it takes for the main content area of a page to load. Reducing LCP is, well, vital.

One way to improve the situation is to delay (or defer) when various content elements (images, videos, block-level text) load. This ensures that only the needed scripts and styles load first, while everything else comes in afterward.

Along with minification, many WordPress caching/optimization plugins also happen to include this type of functionality. It can take a bit of experimentation, however, as deferring the wrong resource can be problematic.

Be sure to test out any changes you’ve made and check the browser console for errors. Once you find the right configuration, the number of render-blocking resources on your page should be significantly reduced.

Optimize Images

The widespread use of large hero images and complex sliders only adds to the challenge of performance optimization. These assets may look nice, but can easily add up to megabytes worth of data. That’s not going to get you a passing grade for Core Web Vitals – particularly on mobile.

Thankfully, there are a couple of ways to lighten the load. First and foremost, get rid of any images you deem unnecessary. The removal of even one large image can make a difference.

The rest of your images can be optimized. This will reduce their file size and lessen the impact they have on load time.

How you go about image optimization is up to you. You could download a copy of your worst offenders and compress them using your favorite image editor, then upload them back onto your website. Or, you can automate the process with a helpful WordPress media plugin.

Responsive Images

For mobile users, WordPress includes the ability to serve up responsive images via srcset. In fact, it will automatically do the dirty work for you on images placed within your content. This is incredibly valuable, as it prevents massive desktop-sized media from slowing down the mobile user experience. For images outside of the main content area, you may need to do some custom work to implement this feature.

Modern Image Formats

It’s also worth looking at the file formats you’re using. For example, Google’s WebP format can often reduce file size while maintaining image quality. Note that some newfangled formats aren’t supported in legacy browsers (ahem, IE), so fallback versions may be necessary. Plugins can help with that as well.

Lazy Load All the Things

Lazy load functionality only loads items once they are in the browser’s viewport. By delaying the loading of images, iframes, and other third-party content (such as social media widgets), you can focus resources on the elements users will see first.

WordPress already implements native, browser-based lazy loading to images. When you add an image to a page or post, the loading="lazy" attribute is placed within the <img> tag. That is, provided the image includes height and width attributes.

This is great – but what about other elements, such as videos or iframes? These items can also weigh down a page when loaded right from the get-go.

Iframes are now lazy-loaded by default – so no worries there. Some more complex elements may require custom code or a plugin to implement this functionality.

Clear Out the Clutter

Over time, even a well-maintained WordPress site can become cluttered. A clogged database, unused plugins that are still active, a bloated theme with features you’re not using – it happens. And it can also drag down your Core Web Vitals.

That’s why it’s important to tidy up now and again. Your site’s database can be optimized manually or set to do so regularly. Unused plugins can be deactivated and trashed. Themes can be made leaner or replaced with something better.

Study up on what’s slowing down your website, find the culprits and deal with them. You might be surprised at how much of a difference this can make.

Improve Your Website’s Core Web Vitals

Core Web Vitals complicates the already tricky process of optimizing WordPress website performance. Even a website that scores well in other performance metrics may still fall short in this area. This shines through in mobile testing most of all.

The good news is that there are plenty of little things designers can do to catch up. Implementing cache sets a great foundation and provides an immediate boost. From there, it’s a matter of reducing file sizes and loading up styles and scripts in order of importance.

Taking things even further, it also makes sense to adjust your site’s CSS with Core Web Vitals in mind. This can help with the dreaded Cumulative Layout Shift (CLS) score and cut down on bloat.

In general, the things that are good for performance are also good for Core Web Vitals. Scores can improve rather quickly. Just know that it’s going to take some trial-and-error to sort out some of those individual shortcomings.

The overarching goal is to ensure that only the essentials are loaded when a user visits your website. Doing so will make both visitors and Google quite happy.

The post Tips for Improving the Core Web Vitals of Your WordPress Website appeared first on Speckyboy Design Magazine.

One of their more recent efforts in this area revolves around something called “Core Web Vitals”. These metrics are in place to measure user experience. Items such as how quickly a page can be interacted with, it’s responsiveness, and how much visual shift during loading are measured.

Keeping tabs on these factors sure seems like a worthy endeavor. However, it’s not just for convenience. Google is planning to integrate visual indicators of page experience into search results in May 2021. The move has the potential to affect both SEO and how a website is listed on the search engine results page (SERP).

This means websites that don’t meet Google’s benchmarks could see a negative impact on their ranking. There’s also a possible hit with regards to how it displays within results. With that, site performance is going to be more important than ever.

It’s not only a call for web designers to bleed every last millisecond of speed out of their sites. This is also an open question about what Core Web Vitals means to sites on a tight budget or even those running a content management system (CMS): Is Google asking too much?

Tougher Testing

There are a lot of tools out there to measure website performance. Each has their own methodology for generating a report. There will likely be some variance in how the included categories grade out. Thus, they should all be taken with a grain of salt.

That being said, Google’s PageSpeed Insights tool seems to grade on the lower end of the scale. For example, a test website that gets a glowing result on GTmetrix is much less flattering on Google’s offering. The site doesn’t pass the Core Web Vitals standards for mobile.

The point here is not necessarily to complain (although this is quite a bummer). It’s more of a friendly heads-up to web designers: Just because your website looks great in a non-Google testing suite doesn’t mean it will do well in these particular metrics.

Not surprisingly, Google wants you to use their tools to determine how well your site does with Core Web Vitals. As such, all of that tweaking you did to get a great performance grade elsewhere may not impress this particular search giant.

Top: A test site grades well in GTmetrix, while the same site struggles in PageSpeed Insights (bottom).

Who Might Core Web Vitals Potentially Hurt the Most?

If your website doesn’t pass muster when it comes to Google’s Core Web Vitals, some work will be required. First, there’s analyzing the PageSpeed Insights report and determining what needs done. Then it’s time for implementation.

But both budgetary and technological concerns could get in the way for some website owners. Let’s look at a few situations where Core Web Vitals may become extra burdensome:

Low-Budget Websites

Improving website performance costs time and money. Of course, if it helps with SEO, then it might be considered an investment. But it still may be out of reach for those on a tight budget.

When you think about it, there are multiple facets to better performance that need to be explored. That could include refactoring code, optimizing images and eliminating features that are dragging the whole site downward.

The costs for this type of work could easily add up. For an older or particularly slow site, it might end up being more cost-effective to start from scratch with a redesign.

Web hosting is also a potentially huge factor. Those on a lower-end shared hosting account may simply not have enough server resources. Once again, more robust hosting requires more cash.

Websites Running a CMS

A traditional CMS (WordPress, Drupal, etc.) that utilizes a database makes for a more complex case. The overhead from executing queries and other key functionality is generally going to slow down a website.

This is where features such as caching can help. But cache alone may not be enough to satisfy the likes of Google. It may take the use of a content delivery network (CDN) and higher-level web hosting to get things to an acceptable level of performance.

Even then, a bloated theme or plugin could also provide a setback. The WordPress commercial theme market, for example, is chock full of heavy options. Themes that need to load large frameworks and lots of custom code can be beyond the reach of developers.

In these situations, the only way to add enough speed may be switching themes, deactivating plugins or (possibly the most expensive of all) utilizing a headless configuration. These may not be realistic options for every website. At best, these measures are also an inconvenience.

Websites That Use Proprietary Software

Likewise, using a proprietary CMS (Squarespace, Wix, etc.) may leave website owners without a viable path to fixing each and every performance deficiency. While they may allow you to tweak certain bits and pieces of your website, other areas may be completely off limits.

As for server infrastructure, there’s not much to be done there, either. Perhaps an account level upgrade could provide more resources – but that’s up to the vendor to decide.

In general, website owners and developers could be left hoping that their service provider addresses these issues. Anything less will require living with the shortcomings or moving to a different platform.

Big Players vs. Everyone Else?

It’s fair to wonder if Google Core Web Vitals inevitably favors those with the most resources. Could a small-budget website with tons of great content be overshadowed by one that simply has more money to throw at performance?

At this point, we simply don’t know how Google would weigh one website against another when these metrics are included. And they aren’t likely to provide all of the details.

In some ways this is all reminiscent of the arguments over net neutrality. The fear being that, if an internet provider gives preference to certain types of traffic over others, it’s going to favor the well-heeled. Small startups could be at a major disadvantage and unable to compete with the big players.

Google may have no intention of favoring speed over quality. But, at the very least, Core Web Vitals seems to be raising the possibility.

Another Hurdle for SEO Success

It seems like every time we think we know what search engines want, they go and change the game on us. Regardless, the bottom line is that Google Core Web Vitals is going to impact every website that aims to be found in search engines. Naturally, some are going to avoid any potential negative effects better than others.

Great website performance should be on the top of everyone’s wish list – no argument there. But to earn a passing grade on these new metrics, it’s going to take resources. And that will sadly leave some people behind.

In this way, Core Web Vitals could indeed be asking too much. That leads one to wonder if a search engine should be able set such arbitrary requirements in the first place.

The post Are Google’s Core Web Vitals Metrics Unreasonable? appeared first on Speckyboy Design Magazine.

Even though the weight of web fonts makes up only a small portion of the overall web page, every optimization you make helps contribute to faster load times. Check out some ways below to speed up those fonts!

What are Google Fonts?

First off, for those of you who might not know, Google Fonts is an open-source (free) directory of over 800 web font families which you can use on your website. They are also available to download locally for print and other uses. Millions of WordPress websites utilize Google Fonts as it is a great free way to enhance the look and usability of your site.

If you are going for pure performance, system fonts will always win, but there is nothing like the professionalism and aesthetic of a good web font. And in fact, typography has been shown to affect conversions in a positive way. But everything has its cost. And so, it is important to understand how adding Google Fonts to your WordPress site affects speed and performance.

How to Use Google Fonts in WordPress

There are a couple of ways to add Google Fonts to your WordPress site. The first and default way is to grab them directly from Google. This method uses their global CDN to deliver the fonts quickly from different servers from around the globe.

When you add them to your site there will be an external request to fonts.googleapis.com.

The are also external requests to fonts.gstatic.com for the WOFF or WOFF2 versions depending upon browser support.

WordPress Plugin

If you are a WordPress beginner, the easiest way to add Google Fonts to your website is probably with a free plugin. The Easy Google Fonts plugin is a good popular example. As of writing, it currently has over 300,000 active installs with a 4.9 out of 5-star rating.

Add Embed Code From Google Fonts

It is important to note that most WordPress plugins add slight overhead, and so I prefer to add Google Fonts with their much simpler to use embed code. So, head over to Google Fonts and choose the font you want. For this example, I’m using Roboto.

Click on the “Customize” option. This is an important step as each font family has different font weights. Typically you will want regular, medium, and bold.

Note: Every font-weight you include adds to the overall load time of your fonts, so don’t just select all of them. The less, the better.

Then click on the “Embed” option. This is where you will want to copy the embed code it provides.

Take that code and put it into the <head> section of your WordPress site. There are different ways you can do this, some might prefer to enqueue the fonts, but for this example I simply added the code to the header.php file. Note: This might vary slightly depending on the theme you are using.

Then, to actually make your WordPress theme use the Google Fonts, you have to add some CSS styles. Below is an example of what I’m using. If your theme admin panel doesn’t have a custom CSS editor you can always use a free plugin like Custom CSS and JS.

body {font-family:roboto; font-size:18px;}
h1,h2,h3,h4,h5,h6 {font-family:roboto; font-weight:700; text-transform:none !important;}
h1 {font-size:28px;}
h2 {font-size:26px;}
h3 {font-size:24px;}
h4 {font-size:20px;}
h5 {font-size:18px;}
h6 {font-size:16px;}

Now that you know some quick methods for adding Google Fonts to your WordPress site, I’m now going to do a few quick tests to see alternative ways of speeding them up. I ran some tests first with the setup above and the average speed came out at 418ms. Note: Each test was run five times, and the average result was taken.

Host Google Fonts Locally

Another way to deliver Google Fonts on your WordPress site is to host them locally on your web server. If your audience is in a certain geographical location and close to your server, it can actually be faster to host them locally than it is to use Google Fonts. Google Fonts CDN is great, but adding those additional external requests and DNS lookups can cause delays.

This method will typically only work if you are using fast hosting. In the example, I’m using managed WordPress hosting from Kinsta, which is ironically powered by the Google Cloud Platform.

To host locally I actually utilized a free tool called the google-webfonts-helper. This allows you to download the Google fonts locally more easily and gives you all of the CSS. Below is an example of what we will end up with. You will need to upload the fonts you downloaded to your web server. In this case, I put them in a folder called “fonts.”

/* roboto-regular - latin */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('https:/perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('https:/perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

We then need to make sure to remove the embed code from Google Fonts in the header so that you no longer have those external calls. I then again ran some tests with the setup above and the average speed came out to 386ms.

Note: The web server is located in Iowa, and the speed test from Pingdom was run from Dallas, TX. So as you can see, even though the server is located elsewhere in the United States, it is still slightly faster to load Google Fonts locally on the server. Of course, you will want to test various locations yourself based on your own audience.

Host Google Fonts on Your Own CDN

Now for a third scenario. On the site above, I’m using a third-party CDN provider already (KeyCDN) to host all of the other assets(images, CSS, Javascript, etc.). What happens if we now throw our fonts on the same CDN, instead of Google’s CDN?

I’m using the free CDN Enabler WordPress plugin. This actually copies the fonts from the “fonts” folder on the web server to KeyCDN automatically. We then have to tweak the code slightly so that the path to the fonts is now pointing to the CDN (such as cdn.domain.com).

/* roboto-regular - latin */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

I then again ran some tests with the setup above and the average speed came out to 384ms.

As you can see, using a CDN is yet again just slightly faster. Not by much, but if you compare it to Google’s CDN, test it, it definitely is faster. Part of this is because it can utilize the same HTTP/2 connection, and it still reduces the external call and DNS lookup, just as hosting locally does. And of course, one advantage to this method is that it will be globally faster.

Summary

As you can see from the tests above, the Google Fonts CDN is great, but it might not always be the fastest. Of course, it will always depend on your own environment and where you are serving up traffic, whether it be to a local audience or global.

I recommend testing each method above for yourself and see which one is the fastest and works the best for your WordPress site. And remember, only load the font weights you actually need!

The post How to Speed up Google Fonts in WordPress appeared first on Speckyboy Design Magazine.

Since a WordPress website is rendered through PHP and MySQL it requires RAM and CPU usage each time the page is requested from the server. This slows down the load time and places more effort on the user’s computer or device, as well as the database. However, with a cache system, the page is rendered one time and then stored as a static HTML file, thereby reducing the load time for each new visitor.

How WP Fastest Cache Works

After installing the plugin, start digging into the customization settings by clicking on the WP Fastest Cache link in the menu bar.

This directs you to the Options page, where you will really begin to utilize the plugin’s features. We will focus on each one of the tabs in the option menu.

1. Starting with the first tab, Settings, we will start implementing the caching system. Check the first box, Enable, to allow the plugin to start working on your site.

2. The next option, Widget Cache, is grayed out, which means it is not available in the free version of the plugin, in order to use any of the premium options, you will need to upgrade to the paid version. We will focus on the free options in this tutorial.

3. The Preload option will generate the page caches automatically, instead of when someone visits the site. Choose which features you want to automatically cache and click OK.

4. The next option allows you to block the cached version for logged-in users and will cause the page to load naturally.

5. After that, we’re also given the option to block the cached desktop page when someone accesses the site from a mobile device.

6. The subsequent Mobile Theme would allow you to cache the mobile version, but is available only to those who purchase the premium version.

7. New Post allows you to choose which cache files to clear when new content is published on your website.

8. Similar to the previous option, Update Post allows you to choose which cache to clear when content is updated on your website.

9. Minify HTML allows you to decrease the amount of HTML that composes your cache file, thereby also decreasing the load time for your visitor.

10. Minify CSS actually decreases the size of your CSS files to make page rendering faster.

11. Combine CSS will integrate multiple CSS files into one file in order to reduce the number of HTTP requests and decreasing load time.

12. As with the CSS, the Combine JS option will combine multiple JavaScript files into one file for fewer requests from the server.

13. Gzip compresses the size of files and resources being sent from the server, allowing them to load faster.

14. Browser Caching enables frequently used files (such as CSS and images) to be stored in a visitor’s web browser so the resources will not have to load each time the visitor views the page.

15. The last option on this page is Language. This will only change the language in which the options menu appears for this plugin, not for your site as a whole.

Choose Turkish, for example. Only the words contained in the plugin’s options pages will be changed.

English is the default. Make your selection from the dropdown menu, then click Submit to save the changes you’ve made on this page. You’re well on your way to optimizing your site with a cache system.

Next, let’s check out the second tab in the menu. Delete Cache.

Delete Cache

The grayed out features are only for premium subscribers, but the two main options at the bottom are still available.

1. Click on Delete Cache to delete every cached file.
2. Choose Delete Cache and Minified CSS/JS to delete all caches as well as the minified CSS and JS files created in previous options. The minified versions of CSS and JS are kept in a separate file on the server that the rest of the cache, so choose this second option to delete those as well.

That’s it for this tab. Not bad, right? Let’s move on to the next tab, Cache Timeout.

Cache Timeout

1. In this tab, we have the chance to create Timeout Rules. Click Add New Rule to bring up an options box.

The first option in the box is If REQUEST_URI. Click to view a dropdown menu with four choices: All, Home Page, Starts With, and Is Equal To. Choosing All will cover every URI requested by visitors, while the following three options will limit the timeout rule to either the Home Page or a URI Starting With or Equal To the value you type in the text box next to the menu.

Once you have chosen the URI type, choose what happens Then from the dropdown menu. The options in this box are for the time period in which the cache is deleted.

Choose how frequently the cache should be timed out, and then click Save. You will see your new timeout rule appear.

Create as many rules as you want in order to cover different areas of your website. Choose the type of URI (whether homepage or starting with a specific URL) and choose the frequency in which the cache is deleted for that area.

Great, that was the Timeout Rule section. Let’s move on to the next tab. Notice that Image Optimization and Premium contain content only available to premium subscribers.

We will move on to the Exclude tab. The first option here is to exclude certain pages from being cached.

Exclude

1. Notice there are two default rules to exclude the wp-login.php and wp-admin pages. These cannot be edited or deleted.

2. Click Add New Rule to create a new rule.

3. Select the type of page, content or URI you would like to exclude, and click Save.

4. You will see your new exclusion rule appear. Any rules you create can be edited or removed by clicking on them.

5. The next section to which you can add rules is the Exclude User-Agents area. Again, notice two default rules that cannot be changed or removed. Choose Add New Rule to define a rule.

This option allows you to create a rule that excludes caching for a certain type of user agent. Type your content and click save.

6. The last three options allow you to exclude specific cookies, CSS or Javascript. Use these in the same way by clicking Add New Rule, choosing the excluded URI and saving the changes.

You should now have a good handle on the types of files that are being cached, minified or combined, as well as how to exclude certain types of pages, content or user agents from utilizing the cache system.

CDN

Of the two tabs left to explore, one is available only to premium subscribers. So, we will take a brief look at the last tab we can utilize. Click on the CDN tab.

In a nutshell, CDN, or Content Delivery Network, is a system of storing your cached files in different geographic locations to minimize the amount of time it will take for a website user in another country to access the files.

There are different CDN providers which can help deliver your content speedily. If you have an existing account with any of the providers listed above, click on it to get set up. If not, it’s easy to create an account with MaxCDN to get started using this additional feature.

The post Skyrocketing WordPress Speed: The Ultimate Guide To WP Fastest Cache appeared first on Speckyboy Design Magazine.

1. Having an easy to use website that is optimized for SEO best practices
2. Creating high-quality, engaging content
3. Building authority with links, citations and brand mentions from around the Internet

For the purposes of this article, I’m going to focus on on-page tactics. Keep in mind, these are the same tactics and this is the same approach that we take to our on-page optimization campaigns at Proper Noun. So what does “on-page optimization” really mean?

At a high level, on-page optimization is the process of configuring a website so that Google will index it for specific keywords. This involves improving the website’s content, reconfiguring its code, and refining the website user experience.

But if you’re here, you’re probably looking for a bit more information than that. Let’s take a look at what goes into implementing a strong on-page optimization strategy.

Getting Started With On-Page Optimization

Run A Baseline Audit

Before getting started with the actual website optimization, the first thing you should do is run a baseline audit of your website. There are a number of great tools, both free and paid, that you can use for your audits.

Website Page Speed Test

GTMetrix

Start by testing your website page speed. Whether or not you’ve optimized this before, it’s important to revisit your page speed during this process. I like to use GTMetrix to run website page speed tests.

Head over to GTMetrix.com and enter your website URL into the “URL to Analyze” input. The test will run for a minute or so and then will give you two letter grades along with some website size information.

As far as the page speed results go, here are the most important metrics to consider for your testing in order of importance.

1. Fully loaded time
2. Time-to-first Byte under the Waterfall tab
3. Total Page Size
4. Total Requests
5. PageSpeed & YSlow Page Score

In my opinion, the two most important factors are going to be your fully loaded time and the time-to-first byte. If your website fully loads in 1 second and you have a 100ms time to first byte, it doesn’t really matter what your YSlow score is.

On the other hand, if you have a 100% YSlow score but have a 6 second fully loaded time and 3 second time to first byte, you’re going to be at a disadvantage in the search rankings.

Once your GTMetrix scan finishes, download your results as a PDF and save them to a folder on your computer. You’ll come back to reference this report later.

Google Lighthouse

Google Lighthouse is another excellent tool that will test page speed, user experience and more. Google Lighthouse is available via Chrome’s DevTools.

Lighthouse will allow you to test your website’s page speed, usability and on-page SEO factors for both desktop and mobile experiences. The tool will also let you test your site with various connection settings, highlighting the user experience and page speed differences between a high-speed connection and a slower 3g connection.

Google Analytics & Search Console

Make sure that your website is connected to both Google Analytics and Search Console (formerly, Webmaster Tools). Each of these platforms performs a different, yet equally important service.

Google Analytics will be responsible for reporting on the amount of traffic your website receives and where it’s coming from. It will allow you to segment this traffic by secondary dimensions and also to track goals and events. Google Analytics will also do things like segment your traffic channels. This will allow you to easily see how much of it comes from organic traffic vs. paid traffic.

Google’s Search Console tracks details about how your site is interpreted in Google Search. It will tell you how many of your pages are indexed in Google, whether or not your website has any spam or mobile errors, the status of your sitemap, Core Web Vitals performance, and much more. It is a must-have tool to tell you whether your website is “SEO-friendly”.

On-Page SEO Audit

The next thing you’ll want to do is run a full audit of your website for on-page optimization. The audit will analyze the content of your pages, as well as various website configurations.

SEOSiteCheckup.com

SEOSitecheckup.com runs a pretty comprehensive audit for specific pages and will also give feedback on website configuration issues. Once you’ve finished this audit, save it to a file.

Neil Patel’s SEO Analyzer

Neil Patel is a top digital marketer and SEO professional who creates a ton of free content on just about everything digital marketing related. His free website analysis will provide some great insight into keywords, top pages, backlink opportunities and more.

WooRank

WooRank is another free, easy-to-use SEO analysis tool. It will provide you with a baseline score, as well as a variety of issues, errors, required fixes, and more. WooRank does offer a paid software, but the auditing tools are free to use.

SEMRush Website Audit

The SEMRush website audit will run through up to 100,000 pages on your website and test for a huge array of issues, errors, and warnings. As far as SEO audit tools go, this one is my favorite by far. SEMRush has a higher price than SERanking, but they do let you register for a free account to run a basic audit.

Save all of the audits you’ve run to a new project directory on your computer, you’ll be coming back to these later. Once you’ve finished your initial audits, you can now get started with on-page optimization.

Install A Trusted SEO Plugin

For the purposes of this article, I’ll be writing from the standpoint of optimizing a WordPress website. If your website uses a different CMS, static files or does not use a CMS at all, you can implement the strategies discussed manually.

If you’re running WordPress, the first thing you’ll want to do is install some sort of WordPress SEO plugin. I personally prefer Yoast SEO, however, I know that many people also like All-In-One SEO. If you’re running another platform like Magento, BigCommerce, or Shopify, there will be plenty of alternative extensions available to help with on-page optimization.

Installing a plugin or extension to assist with on-page optimization is important for a couple of reasons.

1. WordPress does not give you control over the meta description. The meta description is crucial when it comes to having a properly optimized website.
2. Plugins give you a variety of tools that make optimization faster. For example, the ability to set fallback descriptions and fallback titles for pages, posts, and products.
3. Plugins will generate a number of additional necessities such as a sitemap, schema data, and snippets.

Once you’ve installed the plugin of your choice it’s time to get started. For the purposes of this article, the remainder of the instructions will be focused on using Yoast SEO, but you can apply these same strategies and tactics with almost any SEO plugin.

Focus Keywords & Contextually Related Keywords

Before starting the optimization process for your pages and posts, it’s important to understand what focus keywords and contextually related keywords are.

A focus keyword, or primary keyword, is the keyword that you plan to rank your page for. When choosing a focus keyword, there are a few things that you should consider.

First, what is your page about? You should typically be able to boil the main idea down into a keyword consisting of one to three words. In some situations, you may simply just want to choose this term as the focus keyword. You can also use this general keyword to find less competitive, long-tail keywords.

To find long-tail keywords start by running your starting keyword through a keyword suggestion tool. The generated list should include metrics like search volume, keyword difficulty, and suggested CPC value. If you don’t have a preferred tool, you can use the Google Keyword Planner for this.

Go through the list and look for any keywords that have a combination of adequate search volume, a relatively higher CPC value to the list, and relatively low keyword difficulty to the list. No one keyword will be the best result for all of these metrics, so use your best judgment to pick the best option.

A contextually related keyword is one that relates to your focus keyword within the context of the content. For example, “WordPress” and “web hosting” could be contextually related keywords and “WordPress” and “content management system” could be contextually related keywords. It would be dependent upon the overall content of the article.

A great way to find contextually related keywords without the assistance of a tool is to start by performing a Google Search for your focus keyword. Take a look at the top 10 results and pick 3-5 that are most similar to your content. Now, you should scan the content and look for any terms or themes that are used across multiple articles. Save any terms that you find so that you can use them in the content you create.

Start Optimizing Pages & Posts

When optimizing a website, I like to start by creating a spreadsheet of all of the pages and posts I’ll be working on and picking a focus keyword for each of them. While some may view this as extra work, I’ve found it helps improve overall efficiency.

Optimize Page Titles

The first thing you’ll want to do is optimize your page meta titles. Start by ensuring that every page has a unique, descriptive title.

Before updating each page or post individually, I like to set up a well optimized fallback title first. Generally, the best template for a fallback title is something like [Post Title] - [Website Name/Brand Name].

Using this fallback structure will ensure that your page titles remain unique and that they will be a bit different from the h1 text. It also doesn’t hurt to make sure your website is well branded with your name, business name or brand name.

In some cases, like on an e-commerce category page, you may want to include one or two additional words. For example, “Shop [Product Brand Name] Products - [Website Name]“.

Now, I’ll use the Yoast SEO bulk title optimization tool to individually optimize as many or all of your existing posts and pages. You will want to include the focus keyword for that specific page in the title whenever possible. If the page does not have a specific focus keyword, you can just go with a concise “main idea” keyword.

Make sure to also include the business name or website name as long as the title does not exceed 60-70 characters. You can also separate the focus keyword from the website name using a number of characters. Personally, I prefer using a pipe (|) as a separator, but, dashes (-) and colons (:) work too.

Optimize Meta Descriptions

Having a well-optimized meta description is crucial if you want to rank a page in the search engines.

The meta description is the extended text that will be displayed just beneath the title of the page in the search engine results. That means that this block of text will be the first thing a potential user sees when deciding on whether to visit your website.

Each meta description should be unique, it should clearly and organically explain the content of the page, and it should not exceed ~160 characters. Most importantly, it should also include your focus keyword.

Use the keyword organically, just as you would in a sentence or statement, and only use it once unless necessary. You should also stay away from forcing additional keywords into the description if they don’t fit organically (keyword stuffing).

The process of optimizing your meta descriptions will be almost identical to the process that you followed when optimizing your page titles.

First, set up a fallback meta description for each of your post types and pages. In some cases, you may want to use the {excerpt} of the post as the fallback meta description. However, depending on the content and post attributes, you can also make creative descriptions using post variables.

Once you’ve set your fallback descriptions, you should go through a bulk optimization process for the meta descriptions. In general, you will want to write custom descriptions for as many of the pages and posts as possible and not rely on the fallback description.

Think of creative, concise ways that you can describe the content of your page while organically including your focus keyword. If you’re able to, include a contextually related keyword as well.

Update Permalink Structure

The next thing that you will want to look at is your website permalink structure (or website URL structure). Google will read and analyze the words used in your page URL when attempting to learn about your page’s content.

For example, if you have a website, www.domain.com/tennis-rackets, the URL would be a strong indicator that the content of the page is about tennis rackets.

Now, let’s say we have the same page on our website, but the URL is www.domain.com/p?id=123. While the page itself may have the exact same words on it, the URL for this page gives no indication whatsoever as to the content of the page.

While URLs are a relatively minor ranking factor in the grand scheme of things, it is best practice to make sure they are as descriptive and concise as possible.

Redirecting Old URLs

Before making changes to any of your URLs, you’ll want to make sure to have a redirection plan in place.

There’s a great WordPress plugin called Redirection that will do the heavy lifting for you. Simply install the plugin, enable it, and configure it to monitor for permalink changes. Now, any time you modify a URL, the old URL will redirect to the new one.

Updating Your Permalink Structure

Within WordPress, your page URL structure is going to be known as your “Permalink” structure. You can set your permalink structure from inside of the WordPress Dashboard by navigating to “Settings > Permalinks”.

Once you’re on the permalink page, you should see all of the various permalink options. The default option, or the plain option, will utilize a parameter ID, for example, www.domain.com/p?id=123. You don’t want that.

So, what is the best permalink configuration for your website? Well, that really depends on the nature of your content.

In my opinion, it’s usually better to have a shorter, descriptive URL. So my preferred setting is the “Post name” permalink setting. This would also be considered the “best practice” from a traditional SEO sense.

However, let’s say your website or WordPress blog is focused more on news and current events. When you are publishing content that is dependent upon the date of publication like a news story, sometimes it is better to include that date in the URL.

In these scenarios, I would suggest using the “Month and Name” permalink setting as this will keep your URLs as short and descriptive as possible while still including the date routing.

Rewriting Poorly Formatted URLs

Page and post URLs should be concise, descriptive, and unique. They should also not contain unnecessary words or characters.

For example, if you were to duplicate a page that had a slug web-design-services, the duplicated page would have a slug web-design-services-2. You will want to rewrite this URL both so that it is less similar to the original page and more descriptive of the new page content.

You’ll also want to audit your page URLs for stop words. A “stop word” is a word that a search engine is programmed to ignore. Stop words include “a”, “an”, “the”, “in”, and other words like this. For a full list of stop words, you can get a pretty comprehensive list here.

WordPress URLs will use your page or post title by default, so many of your URLs may contain stop words or unnecessary words. It’s good to review all of the pages and post URLs, no matter how well optimized the content may be.

Redirecting Old URLs

The redirection plugin you installed prior to restructuring your permalink and rewriting your URL’s should’ve handled the rewrites for everything you’ve done so far. Now you should check for any 404 pages that may be getting triggered.

The Redirection plugin will have a section that will show every URL your website has served that has resulted in a 404 error (“not found error”). Some of these URLs will be the result of web crawlers and bots. Other links on the list will be due to broken links on your website or other websites.

Typically, if the page is returning as a 404, the safest bet is to redirect it to a page with similar content. If the 404 error is due to a misspelled URL, create the redirect and try to identify where the broken link is. If it’s on your website, fix it. If it’s on an external website, send the webmaster an email to see if they’ll fix it.

If the page no longer exists or the URL has changed, redirect the 404 to a similar page or the new page. If there are no pages at all that are similar you can redirect to the home page or to another page of your choice.

Don’t redirect the same page multiple times or redirect two pages into each other. This will create an endless redirect which will just mean a broken website for your users. If you do end up with a redirection error on the frontend of your website, review the redirects you’ve created for any potential redirect loops.

Check Image Alt Tags

The next thing you should do is run an analysis of your image alt tags on your website. An alt tag sets the “alternative text” for an image. Search engines will use alt tags to interpret the content of the image when indexing it.

When your website has images that are missing properly configured alt tags, you’re really facing two problems.

First, Google and other search engines will be unable to understand the content of the images on your website. This means that these images are less likely to show up in Google Image Search for your target keywords.

Second, images without alt tags will make your HTML invalid which can also impact your rankings. This isn’t to say that these would be major penalties, but they will be negative ranking factors though that can give competition leverage.

To optimize image alt tags, you start by going into your WordPress media library, clicking each of the images, and updating the alternative text value. Once you’ve completed this you’ll also want to check your theme’s template files for any images that have been hardcoded in. These images will need to have their alt tags manually updated.

Finally, any images that have been inserted directly into post or page content will also need to be manually edited. When you insert an image using the WYSIWYG editor, it writes the full image, as well as the alt tag, to your content as it exists at that moment. If you do not have an alt tag set when first inserted, you will need to revisit the post and update it.

Setup XML Sitemap

Next, you’ll want to make sure you have a sitemap setup for your website. A sitemap acts as a table of contents for your website and gives search engine crawlers an easy way to find and prioritize every page on the site. Yoast (and most other WordPress SEO plugins for that matter) will have a sitemap generation feature.

When generating your sitemap you should only include the pages, posts, and archives that have content that is worth indexing in the search engines. For example, you may have a custom post type that you’ve created for functional reasons and do not need an “archive” of these posts. Typically you would not want this post type archives to be crawlable or indexed by Google.

Sitemaps will also usually ensure that more of your pages are indexed more quickly. This isn’t to say that you must have a sitemap to get your pages indexed, but providing crawlers with easy-to-follow URLs will help.

Configure Schema Markup Data

Schema Markup was created as a joint effort by Google, Bing, Yandex & Yahoo!. It was created to provide a uniform way of structuring and interpreting different types of data. It helps search engines provide more informative results for users.

Schema markup data can be used for various types of data including website ratings, local business hours and contact information, and even to provide the relevant details of a news article for news feeds.

Properly configured schema markup is especially important if you are a local business or an e-commerce website. For a local business, it will let Google know your business location, address, phone number, hours and more. For an e-commerce website, you can use schema markup to share product information like title, price, sales, ratings and more.

There are a couple of approaches that can be taken when configuring your schema data.

If you’ve installed the Yoast SEO plugin, it will allow you to configure a good amount of your schema data right out of the box. Yoast includes basic organization data, breadcrumbs, social profiles, and a few other snippets. However, there may be other schema markup tags you want to include.

If you’re looking for a plugin to add additional markup to the site, you can explore some of the additional Yoast plugins or install one like All In One Schema.

If you do end up using one like All In One Schema, just make sure that once you’re finished configuring everything that you check the frontend of your website. Make sure that no tags are duplicated and that all of the tags are accurate.

If you’d prefer to set up your schema data without the assistance of a plugin, you’ll first want to establish what kind of schema data you’ll need and what the appropriate use is.

For example, you may want to include the rating schema and the local business schema. These each require different implementations and best practices.

To get the best idea for the best schema markup for your website, start by taking a look at some of your competitors. You can use the Google Structured Data tool to see exactly what types of markup your competitors use and then implement each one on your website.

It’s best not to over-optimize your schema markup or to include markup data that is irrelevant to your website or business. For example, if you’re a local business that does not produce newsworthy content, it would be a bad idea to include a News Article schema on your homepage with the hopes of being found in Google News.

Improve Website Page Speed

OK, if you’ve made it this far, congratulations! You’ve made it past the easy stuff. Now we’ll be getting into some of the more technical optimization tasks, starting with page speed optimization. The first thing you will want to do is re-run a test of your website on GTMetrix.

Even though you ran a baseline page speed test on your website, it’s good to run another one just prior to implementing your page speed updates. You never know what kind of new issues your website may be facing since running your initial audit.

If you are content with your current scores, you can skip this part. But if you are scoring below an “A” and showing a load time of longer than 2-3 seconds, you should implement as many of these changes as possible.

When it comes to WordPress, it’s always a good idea to utilize some sort of caching plugin. The two plugins that I find to be the best are WP Fastest Cache and W3 Total Cache, however, if there’s another caching plugin you prefer feel free to use that one.

Many of the settings and configurations I will discuss below will be able to be set in both of the plugins above. When another plugin is required I will include that plugin’s name as well.

Image Optimization

The most typical website speed issues that a WordPress website will face is unoptimized images and unscaled images.

Prior to serving an image on your website, you should make sure it’s optimized for the web. This process involves stripping away extraneous data from the image file that will serve no purpose for its use online.

There are external services that you can use like TinyPNG.com to optimize images in batches of images 1-20 at a time. Or, you can install a plugin on your site to optimize the images.

If you’ve already uploaded images to your website, you’ll probably want to just use a plugin to save yourself the time. TinyPNG.com makes a great plugin and provides a free API key for the service.

You should make sure to optimize all of your images for all of the image sizes that you are using in your theme. You will also want to make sure the plugin is set up to optimize images as they are uploaded.

In addition to image optimization, you will also want to make sure you’re serving images at the best size. For example, if the area that an image is meant to load is 800px in width, then you wouldn’t want to load the image much larger than 800px – 1000px (if there is some need for it to scale larger at some point).

Typically, you won’t want to use an image that is larger than 1800px – 2000px in width. Images this large would be used for things like hero images and full section background images.

You should avoid loading too many images of this size on any one page. If you do need to load lots of images at this size, it’s also a good idea to think about lazy loading them.

Minification of CSS & JavaScript

Another typical page speed issue that a WordPress site will have is with CSS and JavaScript minification. This process involves stripping out all whitespace, line-breaks, and comments from your CSS and JavaScript files.

In many cases, this can reduce the overall size of your static asset files by up to 80% of their original size. No matter how many individual static asset files you may be loading, this process will decrease your overall page size and improve page load times.

Within your caching plugin, you should see some settings for minification. In the W3 Total Cache plugin, this will be in the “Minify” section. I typically suggest starting by just enabling the default CSS & JS settings and doing a baseline test.

These settings can sometimes have adverse effects on how your website displays, so it’s best to give your site a full walk-through once you’ve enabled minification. Once you can confirm everything is working as expected, you can start enabling other minification features as needed.

However, unless there’s a real page speed concern, it’s probably best to just stick with the default settings.

These plugins will also combine these files together. So instead of loading 6 individual CSS files and 6 individual JavaScript files, it will combine the files together and load one JavaScript and one CSS file.

Defer Javascript Files

Deferring Javascript files will also help with your page render times. Javascript files “block” the rest of the page from loading while they are being loaded. So if you place Javascript files in the <head> section of your website, it will add additional delay to your initial page render time. You should always aim to include your Javascript file or files as close to the closing body tag as possible.

You can also use the async attribute on external scripts to load them asynchronosly. This means that the browser will only execute the script as soon as it is available and allows the rest of the page to continue rendering.

Gzip Compression

Gzip compression is a type of file compression that is implemented on your server. It compresses your website files prior to sending them to the browser, making them smaller and faster to download.

Gzip works similar to the CSS minification we discussed above. CSS and HTML files use lots of repeat text and whitespace. Gzip can compress common strings as well as whitespace, so it can shrink files by up to 70%.

In order to use Gzip, you must first make sure your server has Gzip enabled. Depending on the type of server you are running, there will be different ways to achieve this. You can read more about each approach here.

You can also use the W3 Total Cache plugin and WP fastest cache plugin to enable Gzip, however, sometimes you will also have to enable it at the server level. You can always verify whether Gzip is enabled for your site by using this online tool.

Other Page Speed Improvements

It’s very likely you will have some other page speed improvements that need to be made. If you run into problems with any of the other page speed optimization tasks, you can always refer to our more in-depth article on website page speed here.

Validate Mobile Website

One of the most important factors when it comes to search engine rankings will be mobile usability. Is your website responsive and optimized for good user experience for tablet and mobile users?

If not, this will be one of the most important things for you to improve upon. This is actually for two reasons – 1) more and more people search for goods and services using their mobile phones 2) the search engines consider this a major ranking factor.

When it comes to having a properly optimized mobile website there are a few things you will want to consider.

Mobile Page Speed

Mobile page speed is going to be a very important factor, so make sure to implement as many or all of the page speed tips included above. Due to slower internet connections on mobile networks, page speed optimization is even more important for mobile usability.

Conditional CSS & JS

Try and remove any irrelevant CSS or JavaScript files from your mobile website. In many cases, there can be static assets being loaded for website components that are only used in desktop views. If possible, separate the CSS and JS for these components and conditionally load them on the desktop only.

You will likely need to have some development experience to do this with your theme files, but the plugins on your website may be a different story. If there are any plugins that you think may be irrelevant to your mobile user experience – disable them!

This will be another scenario where you can implement these changes by writing custom code or by using a plugin.

If you plan to use a plugin, the “Plugin Organizer” is a good option. In addition to a number of other conditional options, this plugin gives you the option to selectively load plugins on mobile.

If you plan to do this via your own custom code, here’s a general structure that you can follow. It’s always best to set everything up and test in a development environment before deploying to production.

Remove Any Unnecessary Images From Mobile Site

Images will typically be the heaviest things your website will have to load. So if there are images (or videos) you are hiding with CSS on mobile, then you may as well just remove them altogether.

Disable WordPress Plugins With Custom Code

First, identify each plugin that you don’t need to load on mobile and find the name of its root file. Now, create a function in your functions.php file that looks like this:

function non_mobile_plugins() {
return array(
'plugin-one/plugin-one.php',
'plugin-two/plugin-two.php'
'plugin-three/plugin-three.php'
);
}

This function just creates an array of the filename’s we will be disabling. Next, you’ll want to create a function to identify mobile devices.

function user_is_mobile() {
$is_mobile = false;
if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false
|| strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
|| strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
|| strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
|| strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
|| strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
|| strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false
|| wp_is_mobile() !== false
) {
$is_mobile = true;
}
return $is_mobile;
}

Finally, create a function to run prior to the plugins being initialized during page load. This function will first check if the user is on a mobile device. If they are, it will then go through the list of “not allowed” files and remove them from the load.

add_filter( 'option_active_plugins', 'disable_plugins_mobile' );
function disable_plugins_mobile( $plugins ) {
if ( !user_is_mobile() ) {
return $plugins;
}
$not_allowed = non_mobile_plugins(); // get non allowed plugins
return array_values( array_diff( $plugins, $not_allowed ) );
}

Now, when you load your site from a mobile device (or a tool emulating a mobile device) your website should load without the plugins you intended to remove.

Use Prefetch or Preconnect For 3rd Party Scripts

Most developers are aware of tactics like minification, caching, or gzipping assets on the server so that the page loads faster. In addition to these methods, there are some other page speed optimization techniques that are less widely used. These are known as prefetching and preloading techniques.

Resource prefetching allows you to let the browser know which assets the user is going to need before they actually need them. For example, you can preload static files like CSS, Javascript, and images. It’s a simple way to tell the browser that you will need specific resources at a certain point in the page load cycle. This allows the browser to grab it at that moment, so when it is actually requested, it will load quickly.

Here are the various methods that you can use for preloading assets.

Preloading

The rel="preload" attribute value can be used on a variety of static assets. These assets include CSS, JS, fonts, images, and others. To use preloading, you will add a rel attribute and an as attribute to your asset tags. For CSS, the value should be as="style", and for JavaScript as="script".

For example, a Google Font tag would look like this:

<link rel="preload" as="style" href='https://fonts.googleapis.com/css?family=Roboto:100,900'>

However, this will only preload the CSS file, not actually include the CSS in your document. To include the CSS you can either include the link tag lower down on the page, or just use some Javascript. For example:

<link rel="preload" as="style" onload="this.rel = 'stylesheet'" href='https://fonts.googleapis.com/css?family=Roboto:100,900'>

This tag will preload the font from Google, and then once loaded, it will apply the stylesheet to the page using the onload attribute.

DNS Prefetching

DNS prefetch lets the client know that assets of some sort will be needed from a specific domain so that the browser can resolve the DNS as quickly as possible. For example, let’s say you were going to load resources from ‘testdomain.com’, your tag would look like this:

<link rel="dns-prefetch" href="https://testdomain.com">

Now when a file is requested from the domain, the user won’t have to wait for the DNS lookup. This is a great way to handle bulky scripts from third-party sites like Google or social media sites.

Preconnect

Preconnect is similar to the DNS prefetch method, however, “preconnect” will resolve the DNS and also make the TCP handshake and TLS negotiation. Preconnect can be used like this:

<link rel="preconnect" href="http://testdomain.com">

Prefetch

Prefetch can be used to get specific assets. For example, if you’re positive that you’re going to need a specific image, you can tell the browser to request and cache the image for reference later. For example:

<link rel="prefetch" href="image.jpg">

Even though the names are similar, prefetch is actually pretty different than DNS prefetch. With prefetch you are actually requesting, downloading and caching the asset itself. While this can help speed up page speed, the browser also has the option to ignore this command. For example, a browser might ignore the request if the file is too large or the network is slow.

Amp Mobile Website

No tutorial on on-page optimization in 2019 would be complete without at least mentioning Google AMP. The Google AMP Project was something announced by Google in October of 2015. AMP, short for Accelerated Mobile Pages, is a web component framework that was built with user experience in mind.

The AMP framework aims to improve the performance of mobile websites by reducing and/or eliminating things like third-party JavaScript and excessive CSS. Google reports that AMP pages typically load in less than one second and use ten times fewer data than the non-amp equivalent.

While implementing AMP pages may or may not have additional benefits for SEO, it’s not appropriate for every website. Sites that rely on a heavy amount of CSS or JavaScript may have to compromise too much of their design to accommodate the strict AMP guidelines. Further, it would seem the consensus is that Google is still not considering AMP as a ranking signal.

In our experimentation with AMP, we’ve found it most useful on websites that are dealing with news, current events, and content creation. While there are potential benefits for e-commerce stores, local businesses, and other websites, it’s not likely that you will see the return on your investment in the form of drastically improved search engine rankings.

Re-Run Online SEO Audits

Now that you’ve run through all of these optimization tasks, it’s time to see how far your website has come since your initial audit.

Start by running your website through GTMetrix one last time. Make sure that no new page speed issues have popped up since your last round of speed optimization.

Now, go through all of the same on-page SEO audits that you ran during your baseline testing. You can also run any new audits that you come across that you think may provide any valuable insight. No matter what audit you’re looking at, your goal should be to be as close to a perfect score as possible.

At the least, you should be scoring in the 90%+, or A range, on any of the various audits you’ve run. If you’re still not there, go through the audit and spend time trying to resolve the remaining issues your website is facing. Once you’ve gotten to the point you feel you simply cannot optimize any further, you can move on to creating new content.

Improve Thin Page Content

You’ve now completed your on-page SEO implementation and can start creating new content to attract new website users. I usually like to start by identifying and improving pages with “thin content”.

First, identify any pages that have fewer than 250 words on them. Next, do some competitor research to see how much content the top results have on their page. Now design new page content for each of these pages to meet or exceed whatever your competition is doing. Make sure that the content is unique and as informative as possible.

While your ideal word count would be a minimum of 500 words per page, that’s not always feasible. There will be occasions where a page may not really need 250 words, like a basic contact page. In these situations, it’s usually fine to forget about minimum text lengths and just worry about user experience.

Expand On Topical Content

Now, take a look at each of the pages you have on your website and identify the ones you’d consider “money pages”. For example, if you’re an attorney or an accountant, these may be “services” pages and your home page.

Using a local lawyer website as an example, think about a “Personal Injury Law” service page as a “money page”. This page may include information about what personal injury law is, the types of personal injury law that a firm handles, client testimonials and ratings, frequently asked questions and various other pieces of information.

To build authority for the topic, you’ll want more than just the one page, you want to create new pages and posts to expand on the topical content. For example, you might create new authority pages that cover specific areas of personal injury law in detail, like slip-and-fall, car crashes, and dog bites.

You could also create personal injury law case studies or expert articles discussing interpretations of important personal injury trials in your state. Articles about current events that pertain to the topic also make for excellent SEO content.

The more content that you can create that expands on a specific topic, the more expertise Google will associate with your website for that topic. This is called expanding your websites topical depth. As a result, your website will not only begin to rank for the keywords you’ve targeted but will likely rank for several other keywords as well as Google indexes your pages for more search terms.

Internal Linking Structure

As you create new pages, make sure to continue interlinking them. Build links between each of the new pages whenever there is relevant content to link to. You’ll also want to link back to your topical money pages from each of the topical subpages. For example, your “dog bites” page and your “slip-and-fall” page would link back to your “personal injury” money page. 

Having an internal linking strategy before you get started is always good, but not always necessary if you’re new to SEO. If you’re unsure about how to utilize internal linking, your best bet is to just get started by creating great content and creating links whenever contextually appropriate. Try to keep your links to link count to 2-4 links per page or article depending on article length. It’s also good to link to a third-party expert website when relevant.

Start Creating Articles & Blogs

Once you’ve finished rounding out your page content strategy, you can now start creating new content for your site on a schedule. For most website owners, this will come in the format of blog posts or articles.

Blog posts are a great way to share your valuable insight with potential website users, customers, and clients. The articles you create should be engineered to “attract” the type of people who will be likely to engage your products or services.

The best way to get started is to think about the types of questions or concerns this audience may have, and then write an article to address them.

For example, if you’re an accountant and find that your new clients always have the same 2-3 questions, write 2-3 new articles answering these questions. Now any potential clients that type these same questions into Google will receive your website as an answer.

If you’re a landscaper that provides specialty services, write an article that details different landscaping projects in a neighborhood. Use photo examples, videos, testimonials, and any other assets to really make the article engaging. Or, you can get creative with content and write an article critiquing the landscaping at famous locations around the world like the White House and Buckingham Palace.

What’s important is that the content you create is engaging, well written, it should appeal to your target audience, and it should be thorough. While most people will tell you to write a minimum of 500 words, it’s my belief that you should write a minimum of 800 – 1000 words.

Unless the topic is truly that simple, or you’re just writing a quick recap on an event, it’s rare that the most thorough answer to a complex question will be just 500 words.

Sure, you can thoroughly answer a question in 500 words, but the most thorough answer will also contain examples, resources, references and more. The best rule of thumb is to simply write as much as you can while keeping things informative and interesting.

I also suggest writing your articles in bulk and then scheduling them to post on a regular interval. Regularly posting on a consistent schedule sends great signals to Google as it loves fresh, authoritative content.

After publishing an article on your website, make sure to share it around. Post the article to all of your social media channels including Facebook, Twitter, LinkedIn, Pinterest, Youtube, and any others you may use. You can also post to social news aggregators like Reddit, Hacker News, and many others.

Syndicating your content to social media channels, URL shorteners, and other websites around the internet is a great way to get your articles noticed. Just make sure not to re-post the article anywhere as duplicated content.

Final Thoughts On On-Page Optimization

On-page optimization has always been an important part of a well-rounded SEO strategy, however, it has become a much more powerful ranking factor over the past year or two. While there are plenty of websites that may rank on page one for their target keywords that don’t have a broad backlink profile, there are not very many poorly optimized websites achieving top 10 rankings.

Proper on-page optimization in 2019 also involves a lot more than just optimizing your meta tags. Website page speed, mobile usability, and user experience best practices have become extremely important ranking factors.

Don’t just write 500-word articles – take a strategic approach when creating your content. Take into consideration things like the length of your competitor’s articles, article readability score, contextual keyword inclusion, TF*IDF scores, and internal linking.

The more authoritative and informative you can make your articles, the more likely Google is to rank them. This also will improve your chances for other websites to link back to your website.

Websites that are well optimized and free of issues like duplicate content and empty metadata are much less likely to be impacted by things like algorithm changes and search engine penalties. Use my approach, build on it, adapt it as you learn new techniques, but make sure that there is always a strong on-page optimization strategy at the core of all of your SEO campaigns.

The post My Approach to On-Page SEO appeared first on Speckyboy Design Magazine.

W3 Total Cache is a dream plugin for achieving caching, I would recommend it to anybody. Yet there are times when you do not want to cache a whole page for long periods, but to cache sections of it so that a page rebuild is not as costly in server time.

For example I had a site where they did not want caching on the homepage as a whole as they wanted to have the following features :

• • Rotating background image provided by php
• • Alternating advertising scripting for comparison of suppliers
• • A loop that updates every 5 minutes, along with others that updated hourly

It was chosen that a “sub caching” (to use the customers preferred term) strategy would be best. Now you understand the scene of what we need to achieve, a cached homepage which could have items within it updated regularly, that did not use the page cache of W3TC.

To achieve all of what the client wanted, I needed to use the Transients API for WordPress

WordPress Transients API

The WordPress transients API is a simple set of three commands that work very much like Options API, but when a timer that you set runs out, the transient is automatically deleted. Inside a transient you can save any kind of data you like. It can be an array, object or just some text, it really does not matter what you store in there as WordPress takes care of it by serializing it as necessary.

What the Transients API also does is automatically save the transient in the quickest responding place on the server. This could be in the database, on the disk or in memcache depending on your servers configuration.

Here is the basic syntax for getting and setting a transient:

<?php
$value = get_transient( 'value' );
if ( false === $value ) {
        // if transient not set, do this!

        // create the data that needs to be saved.
        $value = 1;

        // save the newly created transient value
        // 60 seconds * 60 minutes * 24 hours = 1 day
        set_transient('value', $value, 60*60*24);
}
?>

Notice how they work in tandem with each other. If there is nothing set in the transient called ‘value’ then the code knows to set a new ‘value’ from the code inside the if statement.

As you can see, all we do to set a transient is use set_transient() with the name of the transient, in this case ‘value’, with it’s $value being the data you want to save, and the last part being the calculation that would created the number of seconds that the transient should last for.

Using transients on a single loop inside WordPress

Unless you are an ultra busy site with 100’s of content creators, you can be pretty sure that the loop that shows your posts in your blog does not change that often. Be that days or only minutes, caching will speed up the loop, as the server will not have to ask any complex SQL queries, but a simple single request to get the pre-found data, a much quicker and less intensive thing to do.

<?php
$loop = get_transient( 'loop' );
if ( false === $loop ) {

       // Show the last 100 tweets from the custom post type tweets.
       $query = array('post_per_page' => 100,
                     'post_type' => 'tweets',
                     'post_status' => 'publish' ) ;

       $loop = new WP_Query($query);

        // transient set to last for 1 hour
        set_transient('loop', $loop, 60*60);
}
// do normal loop stuff
if ($loop->have_posts()) : while ($loop->have_posts()) : $loop->the_post();

// show content or whatever you like
the_content();

endwhile;endif;

?>

The above query for the 100 tweets from the custom post type of tweets will now be saved inside the transient called ‘loop’

A Question of Data or Information

Using the above transient we are dealing with Data, or un-formatted information. This is all fine, and works just great, but you could take things a little further.

Instead of manipulating the data every time that the page is loaded, it can be better to add all of the HTML to the loop and then save it to the transient so that it is even quicker to load.

As shown in the below widget, all of the widget is built as a full HTML section before it is saved. This is my preferred method of implementation as there is less processing to do.

Caching Widgets with transients

Many widgets show content that hardly ever changes, for example categories on the site, or pages on the site. It’s only really things like latest comments that tend to change often, and even then it’s doubtful that would be more than once per minute. So even with the more active widgets there is space for caching, let alone the sedentary ones.

If you have a busy site for some reason, that could be thousands of hits inside that minute that take up unnecessary processing time to check again and again all of the widgets and their output.

Caching widgets is pretty easy, here is an example widget for displaying a table of events from a custom post type called ‘ak_events’.

class show_ak_events_Widget  extends WP_Widget {
    function show_ak_events_Widget() {
            /* Widget settings. */
            $widget_ops = array( 'classname' => 'ak-events', 'description' => 'Shows events in a table' );
            /* Widget control settings. */
            $control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'ak-events' );
            /* Create the widget. */
            $this->WP_Widget( 'ak-events', 'Show Events', $widget_ops, $control_ops );
    }

    function widget( $args, $instance ) {
            extract( $args );
            // get cache if it exists
            //  $widget_id comes from the widget $args->widget_id and is the widgets unique ID
            $output = get_transient('events'.$widget_id);

            // if no $output do stuff inside this if statement
            if ( $output === false ) {
                 // set the title variable
                 $title = apply_filters('widget_title', $instance['title'] );

                // standard opening of widget
                $output = $before_widget;

                // if a title exists add it to the top of the widget
                $output .= ( !empty( $title ) )? $before_title . $title . $after_title : "" ;

                // Create query arguments for WP_Query to use
                $widgetargs =  array( 'posts_per_page'=>'-1',
                                       'post_type'=>'ak_events',
                                       'post_status'=>'publish'
                                       );

                // WP_Query sets up a loop query
                $query = new WP_Query( $widgetargs );


                // create the opening table and top row
                $output .= "<table><tr><th>Event Name</th><th>Information</th></tr>";

                // If the WP_Query has results send them through the loop
                if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post();
                    $output .= "<tr><td>" . get_the_title() . "</td><td> " . get_the_excerpt() . " </td></tr>";
                endwhile;endif;

                // close the table
                $output .= "</table>";

                // close widget properly
                $output .= $after_widget;

                // save $output as a transient and set it to be 60 seconds * 5 = 5 minutes.
                //
                set_transient( 'events'.$widget_id, $output, 60*5 );
            }

            echo $output;

    }

    function update( $new_instance, $old_instance ) {
            // save form data
            $instance = $old_instance;
            $instance['title'] = $new_instance['title'];

            // delete the transient so the new title setting is used
            delete_transient('events'.$this->id);
    return $instance;
    }

    function form( $instance ) {
         $defaults = array(
           'title'=>''
       );
        $instance = wp_parse_args( (array) $instance, $defaults ); ?>
         <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>">
                <?php _e('Title:','proving-ground'); ?>
            </label>
            <input id="<?php echo $this->get_field_id( 'title' ); ?>"
                      name="<?php echo $this->get_field_name( 'title' ); ?>"
                      value="<?php echo $instance['title']; ?>" style="width:95%" />
        </p>


        <?php
     }
}

As you can see, all of the loop and processing activity takes place inside the if statement that runs when the widget is called. The other thing to notice is that there is also delete_transient() used inside the update function to delete the transient every time you update the widget on the admin screen.

The bit that makes this work is really the ‘events’.$widget_id bit, as that assigns a unique transient name to each instance of the widget that is loaded. So the widget used in one sidebar is cached separately from the same instance of the same widget .

Using caching for theme options

Theme options are more and more common inside WordPress themes. They hold things like the settings for the theme which are applied every time the site it loaded. This is fine, but it is requested from the database each time, as that is the way that get_option() works.

If you use get_transient() instead you might not be going to the database to request it. It’s possible it’s coming from memory cache or disk cache, which are quicker to access.

Here is a simple little function I made to manage this for me, whenever I need to get_option() I use my_get_cache_option() to get the WordPress option I want. The following code goes in your functions.php

<?php
function my_get_cache_option($option_name = 'ThemeAdminOptions' ){
    // get wanted transient
    $value = get_transient( $option_name  );
    // check if it has any content
    if(false === $value){
        // if no content in the transient get new copy of wanted option
        $value = get_option( $option_name );
        // set new transient with a refresh of 1 day
        set_transient( $option_name, $value, 60*60*24 );
    }
    // return the transient $value or newly created $value
    return $value;
}
?>

Personally I setup default of ‘ThemeAdminOptions’ and use that for my theme options, but if I want to get a different transient or option I use it like this:

<?php
// get cached option
$options =  my_get_cache_option('WantedOptionName');
// do code with options array/object/string
// example code
echo $options['google_analytics_id'];
?>

If you are going to use this solution, don’t forget to use delete_transient() within the process of saving the updates on your admin pages. Normally you would just update the options, but as well as that you need to delete the transient that exists as your other code will pull the old data from the transient for up to 24 hours.

<?php
// update the option as normal
update_option('WantedOptionName', $value );

// delete the transient that may be set
delete_transient('WantedOptionName');

?>

Using transients for timed events

One of the great benefits of the Transients API is the ability to setup very simple timed events that perform functions for you.

Say you wanted to get an RSS feed every minute from a stock trading company, it could be easily achieved by using the following function and call:

<?php

function setup_timed_event(){

    // get value if set;
    $value = get_transient('run_batch');

    // if not set run if statement;
    if($value === false){
            // run every time the timer runs out
            do_minute_batch();


            // set any value to $value;
            $value = 'done';

            // setup transient to last for 60 seconds;
            set_transient('run_batch', $value, 60);
    }
}



function do_minute_batch(){
 //
 // code to run in batch here that calls the RSS feed.
 //
}

//
// use an action to call the timed event every time the init is called. 
add_action('init','setup_timed_event');
?>

It is not strictly true that it will run every 1 minute, as if the server performs no activity of any description for more than a minute, it will not run, but will run on the next activity whatever that is.

Other activities that can be cached with transients

The list is endless of things that you can make quicker on a website by using the transients API. Anywhere you have to process data, you can use it. If you write a twitter plugin, you could use it to save the Twitter feed and only update when it is deleted. Or maybe you have an Amazon store that you want to setup with caching for small periods, this is perfect and simple to use. In fact anywhere you need to get data from an external source, cache it with the transients API.

There is nothing to stop you taking caching to the nth degree with multi loops with differing cache timers based on importance of content, or make sure that every single widget you have caches for the right content lifetime. In fact there is nothing to stop you giving the caching timeout control to the widget administrator by having a field that is the number of seconds or the calculation that sets the time period of the widgets set_transient(). It really is endless where you can go with this.

What about things that echo to the screen?

In WordPress there are quite a few things that automatically echo to the screen, such as the_content(). Sometimes you want to use these items rather than the get equivalent get command, i.e. get_the_content(), as the formatting is already good without the need for extra manipulation.

Or maybe a plugin developer has added an action or filter to the command, for example the_content() could also have an action or filter added to it that appends share links and icons to the end of the content.

Both of these examples call for a slightly different way of saving the data in to the transient. We now have to use an ob_start(),ob_get_contents(), ob_end_clean() combination to save the data we are echoing to the screen and then save that as a variable as the transient

<?php
$loop_output = get_transient( 'loopOutput' );
if ( false === $loop_output ) {

       // Show the last 100 published posts.
       $query = array('post_per_page' => 100,
                      'post_status' => 'publish' ) ;

       // run the query
       $loop = new WP_Query($query);

       // start the output buffer to save contents of loop
       ob_start();

            // do normal loop stuff
            if ($loop->have_posts()) : while ($loop->have_posts()) : $loop->the_post();

                // show content or whatever you like
                ?><h1><?php the_title() ?></h1><?php
                the_content();

            endwhile;endif;

            // save the output buffer contents in a variable
            $loop_output = ob_get_contents();

       // clean the buffer as we will be using the variable from now on
       ob_end_clean();

       // transient set to last for 1 hour
       set_transient('loopOutput', $loop_output, 60*60);
}

// output the new created loop if loop content does not exist. 
echo $loop_output;

?>

Rounding up

Using the transients API can significantly increase the speed of your WordPress plugin, theme or widget. It really is worth considering making this standard practice when creating for WordPress in future.

Update

Thanks loads to Erik for pointing out that you have to have WP_CACHE enabled for any of this to work. As the ChiefAlchemist rightly says, that would cause many a grey hair and long night not to know.

To set WP_CACHE, you need to edit the wp-config.php in the root of your webserver (or one directory above if you are security minded).

define('WP_CACHE', true);
/* Absolute path to the WordPress directory. */

It goes at the end just above the line “Absolute path to the WordPress directory”

Caching Shortcodes

Also by request, shortcodes. The only issue with caching shortcodes is that you need to consider where and how it will appear. here are a few different examples of where you might find yourself using shortcodes.

• Shortcode without any settings, but relates to the post. i.e. share links to social networks
• Shortcode with settings. i.e. show a gallery by ID
• Shortcode with no settings or relationships. i.e. show current number of facebook followers
• A mix of all of the above

// shortcode without any settings but relates to the post.  can only be used inside the loop.
// shortcode usage
// [share] 
function sharelinks( $atts ){

$links = get_transient('share_links' . get_the_ID() );
if($links === false){

// add the links you want
$links = "<a href='https://www.facebook.com/sharer.php?u=" . urlencode( get_permalink() ) . "&t=" . get_the_title(). "'></a>";

// save the count for 30 days
set_transient('share_links'  . get_the_ID() , $links, 60*60*24*30 );
}
// return the response. **do not echo**
return $links;
}
// set shortcode 
add_shortcode( 'share', 'sharelinks' );

shortcode example with settings

// shortcode usage
// [my_gallery id="1" height="300" width="200"] 

function shortcode_gallery( $atts ){
// get the values from inside the shortcode and make them variables
// the id, height and width have the default settings inside the array if not set
// in the shortcode. 
extract( shortcode_atts( array(
		'id' => '1',
		'height' => '100',
                'width' => '60',
	), $atts ) );

$gallery = get_transient('gallery' . $id . $height . $width );
if($gallery === false){
//
//  Do the code that creates your gallery and return the output to a variable called Gallery
$gallery = get_my_gallery($id, $height, $width);

// save the count for 30 days
set_transient('gallery' . $id . $height . $width, $gallery, 60*60*24*30 );
}
// return the response. **do not echo**
return $gallery;
}
add_shortcode( 'my_gallery', 'shortcode_gallery' );

shortcode to show facebook follow count

 
// shortcode usage
// [fans]
function facebook_fans( $atts ){
$fans = get_transient('facebook_fans');
if($fans === false){
// put in your own facebook ID
$page_id = "YOUR PAGE-ID";
// get the XML from facebook with the response
$xml = @simplexml_load_file("http://api.facebook.com/restserver.php?  method=facebook.fql.query&query=SELECT%20fan_count%20FROM%20page%20WHERE%20page_id=".$page_id."") or die ("a lot");
// get the fan count
$fans = $xml->page->fan_count;
// save the count for 1 day
set_transient( 'facebook_fans', $fans, 60*60*24 );
}
// return the response. **do not echo**
return $fans;
}
// set shortcode 
add_shortcode( 'fans', 'facebook_fans' );

The only trick to making this work really is having a variable that you can add to a word stem. As with the share links I used the post id to set it seperate, with the gallery I used the id, height and width as this will give full caching no matter how many different ways the shortcode is used.

More from the Website Speed series…

Website Speed Part 1: Write More Efficient CSS →
Website Speed Part 2: Working With and Optimizing Images for the Web →

The post Website Speed Part 3 – Caching WordPress appeared first on Speckyboy Design Magazine.