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.

Surge for WordPress

If you’re stressed by the idea of a complicated settings panel, you’ll want to check out Surge. This caching plugin requires zero configuration, and it automatically builds a cache and clears files as you update your website.

Not only is this plugin super simple to use, but it’s also free. Optimizing your site’s performance is only a few clicks away.

WP Rocket

Setting up a WordPress cache plugin can be an incredibly frustrating experience. There are often so many settings with not-so-obvious names that you have to do a lot of testing to find out what something does.

WP Rocket is a premium plugin, but it may just be worth the cost. It features an ultra-minimal setup and really does speed up your site. The package includes page caching, preloading, database optimization, and lazy loading of images.

Fast Velocity Minify

Fast Velocity Minify will combine your site’s CSS and JS files into smaller file groups. After all, each one of these files can be thousands of lines long.

Compressing and combining files can greatly cut down on load time, especially for sites running lots of plugins. The setup is relatively easy, with the default settings getting the job done. There are also advanced options available if you’re feeling adventurous.

Autoptimize

With just a few clicks, Autoptimize will concatenate styles and scripts, minify HTML, CSS, and JS files, add expiry headers, and cache them. The plugin can also move styles to your site’s header and scripts to your site’s footer.

While the developer recommends using Autoptimize in conjunction with a caching plugin, it’s still a simple way to speed up your site.

Speed Booster Pack

Speed Booster Pack utilizes several techniques to speed up your site. It minifies HTML/JavaScript/CSS but also does so much more. For example, it will compress images, load JavaScript libraries from Google’s servers (rather than from your own server), defer the parsing of scripts, remove ‘junk’ headers, and make other useful tweaks.

Inside the plugin settings, peak memory usage and page load times are displayed. Just check the boxes next to each option you want to enable. You also have the option of disabling specific scripts from being minified.

Optimize Database after Deleting Revisions

Your site’s database can become incredibly cluttered over time, leading to sluggish performance. Optimize Database after Deleting Revisions aims to be a “one-click” solution by deleting post revisions (you can keep a specified amount of revisions per post), spam comments, unused tags, pingbacks/trackbacks and orphan post meta items.

It also optimizes database tables to help keep your DB lean and clean. Optimizations can run hourly, once daily, twice daily, or weekly. It’s compatible with WordPress multisite.

Tips for Increasing WordPress Speed

WordPress, by itself, is a fast platform. But as we add components like themes and plugins, it can get weighed down. Combined with database clutter and potential hosting issues, a site can slow to a crawl.

Here are a few things to take into account when you’re looking to increase speed:

Avoid Heavy Themes

Just because a theme calls itself “minimal” doesn’t mean it’s lightweight. A theme may sport a minimalist look but still load a ton of scripts that will slow you down.

If you’re using a third-party theme, check the documentation to see how to disable scripts you don’t plan to use. Otherwise, use a lightweight starter theme and build for what you need.

Do You Really Need that Plugin?

Each plugin you install and activate can add scripts, styles, and database entries. Before you install a plugin, research to see if it’s known to cause any issues with load times. Ask yourself if it’s a necessity for the success and security of your site. If not, you may want to move on for the time being.

Make Note of Remote Scripts & Styles

Services that provide web fonts, analytics, or ad-serving capabilities can affect speed. While these providers may have fast remote servers, any sort of connection issue can grind page loading to a halt.

Be aware of what services you’re using and only use those that are necessary. For that matter, it’s also a good idea to stick with well-known and trusted providers.

Watch for Missing Content

Whether local or remote, look out for scripts or stylesheets that fail to load. A missing file can cause your site to react incredibly slowly, along with possible display and functionality consequences.

Use a tool like, PageSpeed Insights, Pingdom, or GTmetrix to analyze your site. Some tools offer a “waterfall” view that shows how long it takes for each file to load along with your page. If one of these files generates a 404 error, you’ve found the culprit.

Be Aware of Hosting Limitations

Not all web hosts are created equal. Some just flat-out provide a better product. But you should also be aware of hosting-related issues that can cause a slowdown. Being on an overcrowded server, running a non-supported (old) version of PHP, or having too much traffic on a shared hosting account can all cause problems.

Getting up to Speed

Bringing your WordPress site up to top performance doesn’t have to be difficult. Using the tools and techniques above, you’ll have everything you need to make improvements.

Speed is vitally important, after all. It affects things like SEO and your bounce rate. It’s worth the little effort to squeeze as much performance out of your website as possible.

The post 6 Best WordPress Plugins to Optimize & Speed Up Your Website 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.

By integrating these extensions, you can significantly expand your browser’s capabilities, allowing for a more efficient and streamlined workflow. Browser customization will also allow you to create a workspace tailored to your specific needs, making it easier to tackle projects with precision and speed.

The extensions range from color pickers and font identifiers to more complex tools that help with coding, debugging, and optimizing user interfaces. The ability to quickly access these tools within the browser reduces the need to switch between different applications, saving time and reducing distractions.

Whether you’re a web professional or just starting out in web design, these Chrome extensions will help to enhance your design capabilities and improve your overall workflow.

Web Design & Developer Extensions

These extensions help with tasks like inspecting web elements and managing website versions. They are ideal for those who want to streamline their workflow and enhance productivity.

CSS Extensions for Chrome

Focused on CSS, these extensions assist in creating, testing, and debugging CSS code. Essential for web designers aiming to perfect their website’s look and feel.

Web Accessibility Extensions

Aimed at improving website accessibility, these tools help identify and fix accessibility issues. They check for compliance with standards like WCAG and ADA, offering suggestions to make websites usable for everyone.

Web Typography Chrome Extensions

These extensions offer functionalities like identifying fonts on websites, comparing font styles, and generating font pairings.

Color Tools for Chrome

These extensions can identify color codes from web pages, generate color palettes, and simulate color blindness. They are a must-have for designers looking to create cohesive and accessible color schemes.

Speed & Performance Extensions

These extensions analyze website speed and performance. They provide insights into factors slowing down a site, such as large images or unoptimized code, and offer recommendations for improvements.

Useful Web Design Utilities

Includes various extensions that support common web design tasks, from screen capturing to wireframing. They are designed to enhance efficiency and creativity in the web design process.

Streamline Your Workflow

These Chrome extensions will not only help to improve your productivity but also inspire creativity, allowing you to work more efficiently. By extending Chrome’s capabilities, these extensions provide a customized experience that can be tailored to fit any project’s requirements.

Finding the right set of browser tools can transform your workflow, making every project smoother and more manageable. Whether you’re looking for ways to streamline coding, enhance design elements, or optimize user interfaces, there’s likely an extension here that meets your needs.

The post 25 Essential Chrome Extensions for Web Designers & Developers appeared first on Speckyboy Design Magazine.

Back in 2006, Amazon published information showing that for every 100 milliseconds faster their website got, their revenue increased by 1%. Recent Google data also indicates that users will spend 70% more time on your site if it loads in under 5 seconds.

Here I will show you how to analyze your website and carry out a few common and simple changes that will, in most cases, speed up a slow-loading website dramatically and have users spending more time on your site as well as search engines favoring your fast loading website.

Tools For Analyzing Your Page Speed

There are a number of free to use tools out there to check over your pages and determine what’s slowing them down. These three, in my opinion, are the most popular and easy to use:

• Pingdom Website Speed Test
• GT Metrix Page Speed Aanalyzer
• Google Page Speed Insights

Pingdom, although it provides less information than the other two tools, the information it does offer is some of the most important, and the corrections it shows, if corrected, will show some of the most immediate speed improvements to your pages.

GTMetrix is similar to Pingdom but shows much more information on how you can potentially speed up your pages. I generally use this after Pingdom, if my pages are still loading slowly or if I feel I can get more speed out of them.

Google PageSpeed Insights, I find it to be less important as the changes it recommends after using the other tools only ever really improve speeds by a small amount, if at all, but it’s still a useful tool for improving your pages.

Don’t Get Hung Up on a Perfect Score

With all three tools, it’s important not to get hung up on the scoring system and set out on a quest for the absolute perfect score. The main thing is to identify the main problems and correct them to reach the optimum page speed you are looking for.

This is especially true for Google PageSpeed Insights, as people commonly think that having a high Google page speed directly influences their search engine ranking position, which is not the case.

Analyzing Your Web Pages Using Pingdom

To get started, simply go to Pingdom, enter your web page URL, choose a server closest to your location and click on “Start test.”

Once it has analyzed your page, you will be shown information such as a total page score along with how long it took to load and a breakdown of the things you can fix to speed the page up.

How to Speed up the Pages

Now that you know what’s causing the slow page speeds, it’s time to fix the suggested problem areas. There are a whole range of suggestions that may come up. I will only be able to cover a few of the most common problems, which should show immediate improvements to your web page’s loading times.

Nearly all of the problems that arise are pretty simple to fix, even for a novice. Information on how to fix each one, that I’ve not covered here, can be found with a simple web search.

Leverage Browser Caching

Browser caching essentially works by telling the user’s browser to request the web page’s resources from the browser, instead of from the web server.

Although this won’t speed up the site for new visitors, it will drastically speed up your pages for returning visitors. To do this, you must add a few lines to your .htaccess file.

Your .htaccess file can be found in the root folder of your website. If you do not have one, simply create a text file, add the code below and save it as .htaccess within the root of your website.

More detailed information can be found here.

## EXPIRES CACHING ## ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days" ## EXPIRES CACHING ##

Merge, Minimize and Move Resources

Merging your JavaScript and CSS files into as few files as possible, as well as minimizing them, will allow them to be loaded faster. Also, moving the files below the fold so that the page content loading isn’t held up waiting for the JavaScript files to load will also improve speed.

Remember when merging JavaScript and CSS files into single files to make sure they are in the correct order. You can use the browser’s inspector to check the order that the files are loaded, then go through each file, copying the code and pasting the code into the single file.

This will ensure, for example, that JavaScript functionality such as jQuery is loaded before any JavaScript functionality that relies on jQuery. The same applies to CSS, to ensure rules that are supposed to overwrite other CSS rules are applied properly.

If the single files become too large, you can break them up into multiple files. However, try to keep the files to a minimum. Once you have your final files, minimize them and save them. Then replace all the old references to them in your HTML with the new files.

For the JavaScript files, add the script tags that reference the files to the bottom of the HTML before the closing body tag.

Use a CDN for Your Resources

Loading static resources from a CDN can correct a couple of speed issues. This will allow your page to load while the browser fetches the content from another domain. This also allows you to fix the “Serve content from a cookieless domain” problem you may run into if your website is using cookies.

You can use CDN providers to serve your content. However, it’s easy to create your own CDN to serve your content. To do this, make sure your CSS, JavaScript, or image files are in a separate folder from the other files on your website. Then you create a subdomain to point directly to the folders.

For example, for serving CSS, create a subdomain called csscdn.yourwebsite.com and point it directly to your CSS folder within your website.

Then on the front end, instead of referencing the CSS files using /css/styles.css, you use csscdn.yourwebsite.com/styles.css. You can do the same for your JavaScript, images, and any other resources to reduce the loading times of your page.

Compress Your Images

These days image compression can be done without much, if any, noticeable loss of quality. There are a range of image compression techniques out there to use, including WordPress plugins and scripts that can compress your images upon upload, automatically.

For manually compressing images, there is a free to use tool called Tinypng where you simply drag your images onto the page, it compresses the images, and you can then download the compressed versions.

Compressing all your files can significantly increase the loading speed of your page. Tinypng is able to compress a 57KB image into a 15KB image without any noticeable quality difference at all. If your web page has large images or displays many images, just compressing all the images alone will make your page load in a fraction of the time.

If you are not already familiar with Gulp or Grunt, then you should seriously consider adding them to your web development toolset as they are both great for automating tasks such as JavaScript and CSS minification, image compression as well as a whole range of other, extremely useful tasks.

The post How to Analyze & Speed Up Your Website appeared first on Speckyboy Design Magazine.

Images are an area of primary concern. Even basic optimization techniques can mean better performance. But with the advent of Google’s Core Web Vitals, designers are scrambling to squeeze out every bit of overhead while trying to maintain quality.

Not coincidentally, the very company pushing for better website performance has released an image format to help. Google’s WebP format offers a plethora of features that can benefit designers – including smaller file sizes.

If that sounds enticing, keep on reading as we take you on a tour of what WebP is all about. We’ll also perform some tests to see if the format really does live up to the hype.

The Best of Both Worlds?

Image optimization can often require some tough decisions. For example, how much quality should be sacrificed in the name of leaner file size?

That becomes a matter of choosing between a lossless (24-bit PNG) or lossy (JPG, 8-bit PNG) image format. Part of the conundrum is that PNG is generally better utilized with raster graphics, while JPG caters to photography.

WebP aims to be an image format that can do it all. It has built-in support for both lossless and lossy compression. Either way, you’re in for some savings. Google claims the format to be 26% smaller than comparable PNG files and 25%-34% smaller than a JPG.

In addition, image transparency is supported with both compression types. It’s like you’re getting the best attributes of both the JPG and PNG formats – with less bulk to boot.

Testing the Effectiveness of WebP

So, how do WebP images perform in the real world? We ran a few basic tests to see just how much space we could save using lossless and lossy compression, along with an example that utilizes transparency.

Our Configuration

All of our tests will be performed by saving images within Adobe Photoshop CC.

As of this writing, Photoshop doesn’t have native support for the WebP format. Therefore, we’ve installed Google’s free WebPShop plugin. This allows for both opening and saving WebP images in the venerable photo editing software. Default compression settings were used.

When saving images in older formats, we used Photoshop’s trusty “Save for Web” functionality. The same image quality setting was utilized where possible. You’ll find the image quality settings are in parentheses below.

Example #1:Nature Photo

Our first test involves a 1024×768 nature photo. Saved as a maximum-quality JPG file, it takes up 1.15 MB of space.

Winner: The lossy WebP image saves plenty of space while maintaining acceptable quality. It’s a bit surprising that lossless WebP increased in size over the original. But that goes to show it pays to experiment with compression settings.

Example #2:Vector Illustration

Next up is a colorful, 640×356 vector illustration. The original is saved as a 24-bit PNG file and is 187 KB in size. Because it has so many colors, neither 8-bit PNG nor lossy WebP makes for a good comparison. Instead, we’ll use the JPG format to go up against lossless WebP.

Winner: The lossy JPG image saves more space, but leaves noticeable artifacts. Lossless WebP maintains a razor-sharp look and still cuts down file size significantly over the original. That tips the scales in favor of WebP. Still, these sorts of images may require some tradeoffs.

Example #3:Vector Illustration with Transparency

Our final image is a 350×350 vector illustration. It’s saved as a 24-bit PNG file with transparency and weighs in at 64.09 KB.

Winner: Lossless WebP does what you’d expect – it maintains quality while shrinking the file size. It’s the clear winner here. However, lossy WebP is also pretty solid, provided you can live with some minor image artifacts.

Browser and App Support

Sure, the fact that WebP can save precious bandwidth is awesome. But how much browser and app support are out there?

According to Can I Use, WebP is fully supported in over 91% of web browsers, with partial support in another 3%.

The only major browsers lacking support are from Microsoft and Apple. Internet Explorer has zero support, and the same goes for versions 12-17 of Edge. Newer versions of Edge will work just fine with the image format, however.

Mac users must have Safari 14 or higher combined with the Big Sur version of the operating system. Safari users on iOS receive full support as of version 14.6.

Support coverage is pretty solid. But if you want to provide fallbacks on your web projects, a tool such as Modernizr can be used to detect WebP support.

When it comes to image editors, the aforementioned Adobe Photoshop requires a plugin to view or save WebP files. For other options, check out the supported software list on Wikipedia.

WordPress users have native support for WebP images as of version 5.8. Previous versions of the CMS can still serve up the images via third-party plugins.

WebP Is Worth Your Consideration

Overall, there’s a lot to like about the WebP image format. For the most part, it strikes a balance between lean file sizes and high visual quality. It’s a well-rounded option for image optimization.

Browser support is also quite good – just not universal. There’s always a concern about potentially leaving some number of users – no matter how small – out of the mix. Thankfully, tools are there to allow for creating and serving fallback options. Since images are a pretty big deal, that extra work is probably worth the effort.

If you’re thinking about jumping onto the WebP bandwagon, now’s the time to start experimenting. Master the compression settings, and you may just cut down your website’s load time by a significant margin.

The post WebP Images: A Primer appeared first on Speckyboy Design Magazine.

Quite often, this means optimizing images, implementing page caching and serving files via a content delivery network (CDN). These are all effective measures. But one item that doesn’t get enough attention is the potential bloat in a website’s CSS.

While you might minify your stylesheets or serve them over a CDN, more can be done. Specifically, getting rid of the wasteful markup that isn’t being used and tightening up styles that are still relevant.

This is best done from the very start of the build process. But it’s also possible to lighten the load on existing websites. Let’s take a look at the challenges involved, along with some tools and techniques that can make for a faster website.

Dealing with Bloat Built into Themes and Frameworks

It used to be that websites were essentially built from scratch. This was a great approach in that designers could include only the styles and scripts that were needed. If done with care, this process could result in a finely-tuned website.

Of course, there are a number of reasons why that practice has been abandoned by many of us. It’s simply not efficient in terms of time and budgetary restraints.

Modern websites are so often built on top of a prebuilt product. That could be a CSS framework such as Bootstrap or an elaborate WordPress theme. In some cases, a CMS theme may even include a framework.

These products are meant to be one-size-fits-all. By including everything you might possibly need, it makes development that much quicker. Unfortunately, the same can’t be said for their impact on performance.

So, what can be done to improve the situation?

Use Component-Based or Lightweight Frameworks, Where Possible

Theoretically, it’s possible to both get the advantages of a framework while avoiding bloat. This can be achieved by using component-based packages that enable you to load specific features while leaving others out. The aforementioned Bootstrap does allow for this type of customization – to a point.

Another alternative is Tailwind CSS, which provides basic styles and assumes you will build on top of them. If you’re looking for a great starting point, as opposed to a more finished product, this could be a fit.

There’s nothing wrong with using a framework. But look for one that either: a) lets you pick and choose which components to load, or; b) offers a barebones stylesheet that can be easily customized. Either way, your project will benefit from the reduced load.

What to Do with CMS Themes?

Products such as commercial WordPress themes can be tricky, as they often include a boatload of styles – whether you need them or not.

It’s possible that a specific theme will be well-organized to the point where it’s easy enough to dequeue the stylesheets you don’t want. There may even be a theme options panel that lets you do this with a few clicks. However, this is more likely the exception than rule.

The best way to avoid a bloated theme is to create your own. For instance, a WordPress starter theme will offer up some barebones CSS that you can customize. This helps to ensure a leaner stylesheet and takes away at least a tiny bit of the overhead associated with a CMS.

Declutter Existing Stylesheets

Changing our focus to an existing website, decluttering and refactoring CSS can be done one of two ways:

Manually Reviewing Styles

Firing up your favorite code editor and opening your site’s stylesheets is always a good place to start. Yes, it can be a tedious experience. But it’s also an effective way to take care of the low-hanging fruit.

It’s not necessary to scrutinize every line of CSS. Instead, the idea is to find any items that you know aren’t being used or aren’t as efficient as they could be.

For example, let’s say you run a WordPress website that has some custom styles to overwrite those of a plugin. What if you’re no longer using that particular plugin? In this case, the styles can easily be removed.

Or, perhaps there are a selection of styles that you only use sporadically – like during the winter holidays. It may be worthwhile to move those styles into a separate file and only call them when needed.

Then there are CSS selectors that just aren’t very well written. Maybe they have a number of no-longer-needed browser prefixes or unnecessary duplicate properties. This is an area ripe for cleanup.

If your site’s design is more than a couple of years old, you might be surprised at how much excess styling you can find.

Use an Automated Tool

There are a number of tools out there that will scan your site (or, at least a part of it) and report back with a list of unused CSS. However, don’t hold your breath while waiting for perfection.

Much like automated accessibility tools, unused CSS scanners can only give you so much information. Therefore, it’s best to take results with a grain of salt and use them as a guide – not a final answer to your question.

Chris Coyier of CSS-Tricks wrote an outstanding article on this particular issue that is worth checking out. He not only tests out some of these tools but also looks at the bigger issues at hand, such as media queries.

However, if you’re interested in trying one or more of these tools, a few of the more popular choices are:

• JitBit
• PurgeCSS
• PurifyCSS
• Unused CSS

A combination of an automated tool and manual review is likely the best course of action. Doing both will give you a more complete picture of potential performance optimizations. You may not catch every single item, but there’s still an opportunity to make a measurable impact. You can do some before and after testing with a tool such as GTmetrix to see the results.

When it Comes to CSS: Waste Not, Want Not

It’s amazing just how large a stylesheet can get – especially when using a readymade CSS framework. Sure, it’s nice that the author has done a lot of the hard work for you in terms of styling elements. At the same time, it leaves a lot on the table when it comes to page rendering and load times.

This is something worth paying attention to right from the very start of a project. By looking to reduce the weight of a stylesheet, you’re helping to wring every last drop of optimization out of your site.

If your website is already out there for the world to see, there are still positive steps you can take. Review the CSS and look for items to streamline or remove. Utilize one of the many automated tools out there to find items you might have missed.

The bottom line is that trimming your CSS down to the essentials isn’t a perfect process. However, it’s still one worth your time and effort.

The post Avoiding ‘Wasteful’ CSS in Your Projects 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="https://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.

Something intangible like “user experience” (UX), is hard to put in hard terms and facts that a developer or designer can use. The concept is nice, but how is it reflected in more concrete aspects of web and blog design?

The answer lies in certain SEO ranking factors and practices that contribute to the overall user experience. By targeting these, we can better understand the how’s and why’s of the user experience in a way that allows us to take actionable steps when needed.

3 Vital UX Factors That Affect Rankings

This approach allows web developers and designers the chance to see a vague concept like “user experience” through the lens of more concrete SEO concepts and how these factors and practices can be used to positively affect and alter the UX of your website.

The user experience is something Google is always looking to improve. A brief glimpse into Google’s User Experience Lab shows just how dedicated the company is to understanding how and why a positive experience is achieved so they can better analyze and reward that outcome in the search rankings.

Here are three ways you can analyze and improve your site’s UX today:

1. Page Loading Speed

The UX begins when the user clicks on your website. If they have to wait ten seconds or more for your site to load, they will move on. Site speed has long been a factor in SEO rankings, but it also provides users with a first impression of your site.

The bottom line is that longer load times directly affect your conversions and ultimately your bottom line as a result.According to a study done by Kissmetrics, every second past the ideal loading time of three seconds costs you a seven percent reduction in sales!

If you see a rise in your bounce rate or a decrease in your page views, it could be that your site is loading slowly. To check it, utilize Google’s PageSpeed Insights tool to see if your website loads fast on all devices, and if not, how to fix it.

If you suspect that your load times are too high, here are some quick tips to get them down to where you need them:

• Optimize your site’s database by adding an index.
• If you’re on WordPress, use a caching plugin like W3 Total Cache.
• If you’re running an eCommerce store, leverage Shopify’s buy now button.
• Make sure your images are optimized by running them through a tool likeOptimizilla.

A great example is my friend Matt’s website, On Blast Blog. His homepage loads incredibly fast, but still has high-quality images. When building his site, he smartly compressed his images and leveraged a strong page cache.

2. Intuitive Site Organization

Part of what defines a high-quality UX is how quickly and easily visitors can access various parts of your site. The best way to ensure is this is through the use of effectively designed menus and submenus. Start with anywhere from four to six main categories, and then create a contact page and an “About Us” page so people can easily reach you or get to know your brand.

As a rule of thumb, make sure it doesn’t take more than two clicks for visitors to find anything on your site. One click for the category, and one for the post or page. Anything more and you risk overcomplicating the process.

In addition to these things, another great way to improve the UX on your site is to include internal links to other pages. This allows visitors to pursue topics or find another post quickly and easily. This type of convenience is great for your visitors, and it benefits your SEO as well.

Making this change will net you lower bounce rates, increased conversions, and high click-through rates.

Here are some actionable steps to take regarding site organization:

• Break down the path between your homepage and your content into categories (no more than two clicks to reach any piece of content).
• Include internal links to other pieces in your posts (keep it relevant).
• Provide access to an “About Us” page, and a “Contact Us” page.

3. Mobile Responsiveness

In April of 2015, Google released a new algorithm update that focused on sites that were mobile responsive. This term refers to a website’s ability to display itself in a readable format on both a desktop and a mobile device. If it looks great on one, but looks poor on another, then Google’s update tanked their search rankings.

Why the big change? Well, as we already know Google is all about a high-quality UX. Since most people are now browsing the web on mobile devices, this kind of check was logical. People should be able to have the same level of quality on their mobile devices, doubly so if they use them primarily.

Google’s update, when it was released, was referred to by many names including mobilegeddon, mobilepocalypse, or just mopocalypse. People were scared because without being mobile-responsive, their websites would fall through the rankings like a keyword stuffed turkey on thanksgiving.

Thankfully, Google released aMobile-Friendly Test tool to help you check and see if your website fits their standards. If you come back with a negative, don’t give up. There are several ways to make your site mobile friendly:

• If you’re using WordPress, there are a variety of mobile-ready responsive themes to choose from. Easy fix!
• For web developers, the use of CSS3 Media Queries will allow you to code the maximum width of the website on mobile devices.

Final Thoughts

SEO ranking factors and analytics like page views, bounce rate, and others all point towards the user experience. By improving the UX, you ultimately improve your SEO in the process. Focus on these major factors and you’ll see your website’s statistics improve to the point where you want them to be.

Thanks for reading and be sure to share your tips for maximizing the user experience in the comments below!

The post UX Factors That Affect Your Website’s SEO Rankings appeared first on Speckyboy Design Magazine.

However, now that many SMBs have accepted these truths and made their sites responsive in design, what is the next big challenge the web design industry will face in building websites for this audience?

According to Google and findings of our own, it’s going to be pagespeed.

Look at it like this: pagespeed is already something you think about subconsciously as you create new websites. You’re careful about how many plugins you install as well as the quality of themes you use to build clients’ websites, among other things. But now it’s time to put pagespeed (especially as it pertains to the mobile experience) front and center in your work as well as in the conversations you have with clients.

Of course, this isn’t going to be easy, so the following guide will give you the tools and information you need to properly position pagespeed as the next “must have” with your clients.

Step 1: Start with Google

Let’s face it: when it comes to proposing what needs to be done to a website, your clients aren’t necessarily going to listen just because you say “you must do this because I’m telling you to”. If you want to be smart about this, then you should name-drop Google first. Everyone knows the name. Everyone trusts their authority. And no one is going to question what Google says has to be done.

So, here is how you can use Google to position pagespeed as a top priority in web development:

Point 1 – For starters, show them how Google made updates to their search algorithm back in 2010 to include pagespeed as a ranking factor.

Point 2 – They then were kind enough to give us the PageSpeed Insights testing tool so we could do our own website assessments. These tests include not only an assessment of the desktop site, but the mobile site too.

Point 3 – Next on the horizon is mobile-first indexing. When this launches, Google intends on adding pagespeed to the ranking factors as they don’t believe enough marketers or business owners are taking this seriously enough. How do you know this?

Point 4 – Well, according to Google, 53% of their mobile users abandon a website because they didn’t want to wait more than three seconds for a page to fully load. And since the average mobile page loading speed is 22 seconds… Let’s just say that the state of mobile speed optimization is not good.

Okay, so why should Google even care if a business’s site is optimized for mobile loading?

Well, it’s because the success of its search engine rides on its ability to recommend relevant and quality search results to its users. With pagespeed becoming ever more important, Google needs to include this consideration as part of its ranking criteria. This ensures that users receive the best experience from the search engine because they had a good experience visiting the recommended site on mobile. And the happier they are with search results, the more they’re going to use Google.

Google has had their eyes on pagespeed for a long time, so small and medium businesses absolutely need to get with the program now. If they’re not willing to do it to improve the user experience alone, then explain that this is about being justly rewarded by the search engines for playing by their rules.

Step 2: Present Them with the Facts

When responsive design first became a “thing”, your clients were likely confused about what that meant until you showed them a real working example of it. Even then, they probably needed further explaining as to why it mattered, especially if it meant more work for you and more money they needed to spend on it.

Business owners don’t think the same way we do. For them, it’s not about “user experience” and “responsive design”. Their ears are listening for “more conversions” and “higher engagement rates”. At the end of the day, they’re concerned with their bottom line and they want to make choices for their business that will lead them down the path to more money.

So, you’ve got to break it down into a language they understand.

Let’s start with what Google says about why mobile speed matters.

Faster loading times on your site will lead to higher rankings in search–which is what you want. But this is as a result of how pagespeed affects the user experience and, in turn, your engagement and conversion rates. Google found that faster pagespeeds lead to:

• 70% longer sessions for visitors who encountered a page that loaded in 5 seconds as opposed to 19.
• 35% lower bounce rates.
• 60% increase in pageviews with every visit to the site.

What it boils down to is this: 77% of websites load within ten or more seconds on mobile devices. If your clients’ sites fall into that category, they’re looking at a 7% drop in conversions for every additional second they force their users to wait.

At Duda, we found similar results when examining data pertaining to the relationship between the render start time and mobile engagement rate.

This trend also holds true when just looking at Click-to-Call.

What this means is that sites with the fastest render starts (less than one second) get nearly 50% more engagement than sites that take the longest to load (between three and four seconds). As you can see from the data, there is roughly a 10% decrease in conversion rate for every additional second it takes a site to load.

Step 3: Have a Plan of Attack for Dealing with Pagespeed

Okay, so we know that pagespeed is going to be the next battlefield with clients. You now have Google’s backing as well as statistical data to show them why pagespeed is so important. But that’s not enough.

Let’s say your clients are gung ho and ready to get moving on optimizing their sites for pagespeed. This is not the time to throw you hands in the air and say, “Don’t look at me!” Nope, you need to have a solution ready to roll here. You are the pagespeed optimization expert and this plan will be proof of it.

Google has clearly laid out what needs to be done in order to optimize a website (mobile or otherwise) for speed:

• Implement browser caching
• Remove landing page redirects
• Minify HTML, CSS, and JavaScript
• Compress and optimize images
• Prioritize above-the-fold visible content

You can verify that you’ve done all this by using Google’s PageSpeed Insights tool.

The next step in your plan then requires that you find a reliable partner to provide you with the tools to create mobile-friendly and fast websites without issue.

If you weren’t aware, Duda has addressed this issue head on. They have reconfigured the way Duda websites are coded to ensure they adhere closely to Google’s best practices for load times, as recommended by Google’s PageSpeed Test. Duda websites now regularly score in the high 80s and 90s in Google’s test.

Not only does this news mean that Duda websites now load faster than ever (which is great for your existing customers), a strong Google PageSpeed score is also a great marketing and sales tool for your company. Couple that with the statistics that demonstrate the real power of having a website fully optimized for speed, and you may find yourself overwhelmed with new clients dying to work with you.

The post Why You Need to Prioritize PageSpeed in Discussions with Clients appeared first on Speckyboy Design Magazine.