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

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

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

Start With What You Can See

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

Observe your website and think about the following:

Where Is the Slowness Occurring?

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

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

Are There Any Obvious Signs?

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

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

Use Some Helpful Tools

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

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

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

Web Browser Developer Tools

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

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

Console

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

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

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

Network

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

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

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

Query Monitor

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

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

Among the information you’ll find:

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

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

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

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

You’ve Found the Culprit – Now What?

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

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

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

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

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

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

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

Kick WordPress Performance up a Notch

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

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

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

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

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

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

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

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

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

For some companies, goals might revolve around clicks to boost ad revenue. Whatever the purpose of a website, knowing how to track and optimize conversion rates is crucial for creating effective marketing strategies.

Why Conversion Rates Matter

The website conversion rate is a useful metric to track the success (or failure) of a website’s intended purpose to better predict expected outcomes of planned marketing strategies. Using conversion rate data collected over a specified time can help business managers measure the return on investment from marketing strategies. In this same way, conversion rates can help with the management of user-interface design.

Much like a science experiment, you can change marketing elements separately and watch how they affect the conversion rate to home in on the most effective marketing approach.

For example, you could run an advertising campaign and leave the website design completely alone to see what effect the campaign has on the conversion rate. Then, make a few changes to the site design halfway through the campaign to see if conversion rates change. All of these conversion rate analyses can help you make better marketing decisions moving forward.

The Psychology of Website Users

To understand how to best design a site for high conversion rates, you must first understand how the mind of a visitor works. Humans, though unique and complex, tend to operate in similar ways when it comes to web behavior. Some fundamental psychological principles can help you better predict website user response.

1. The Law of Pithiness

Essentially, the Law of Pithiness states that people favor concisely communicated, well-organized items over excessively complex plans. When it comes to web design, users want to find the information they need as easily and quickly as possible. It may be tempting to create a wacky, out-of-the-box design, but if users cannot figure it out, the design will likely push them away.

2. Hick’s Law

Hick’s Law is the idea that increased choices lead to increased decision time. This is also referred to as the paradox of choice.

Though giving site users more options might seem like an ideal marketing tactic, it can hinder their ability to make a decision, and they may end up leaving before taking a desired action.

Minimalistic designs eliminate the tendency to overthink, thus guiding visitors to desired actions.

3. Fitt’s Law

A target’s size and distance from the user’s current position determines the time required to reach it.

This is the basic idea of Fitt’s Law. In terms of web design and conversion rates, this law can be used to establish the ideal size of a clickable area.

4. Rule of Thirds and the Golden Ratio

People tend to prefer aesthetically pleasing site layouts. The rule of thirds is a photography composition principle that involves the way eyes tend to scan a page. Designs should be broken up into horizontal and vertical thirds, creating a nine-square grid. When the subject of a picture is placed on an intersection of horizontal and vertical lines, it is said to be more visually pleasing.

Similarly, the golden ratio utilizes naturally occurring patterns to create a visually pleasing design. The optimal 0.618 ratio of height to width creates a spiral that draws the eye in to focus on the subject. Designers can use both the rule of thirds and the golden ratio to determine the appropriate placement of important page elements such as call-to-action buttons.

Web Design Elements to Boost Conversion Rates

Site design is a major factor of conversion potential. There are many common mistakes companies make that kill their conversions. Using the psychological principles above, web designers can make simple changes that can increase user-friendliness to encourage more conversions.

Clean and Attractive Landing Page

The landing page is usually the first impression a website makes on a visitor. If the design is too chaotic or confusing, the user will likely leave before spending more time on the site.

Simplicity is key when it comes to designing an effective landing page. Give only the essential information and do not create too many distractions.

Logical Site Map

When navigating a website, users want to know where to look, even if they’ve never visited the site before. It can be tempting to show off your creative thinking skills by throwing users a curveball, but most sitemaps are similar for a reason.

Intuitive page categorization leads to user-friendliness, which helps increase engagement. Stick with the principles outlined in the law of pithiness – don’t stray too far from standard site organization.

Site Map by Zarin Ficklin

Useful and Relatable Content

People are drawn in by what speaks to them personally. If they are searching for specific information, they probably won’t stay on a site that has content filled with fluff and self-promotion.

If they are looking into purchasing a product, they will look for reasons to trust the company selling it. The written content on your site must be compelling and well researched to draw in readers and build trustworthiness.

Effective Call to Action

Call-to-action buttons hold great conversion rate potential, but if they are designed poorly, they may simply be ignored. Gain the user’s interest with specific, intriguing copy that shows the value of clicking on a link.

The button should be large enough to be seen and have bright colors and bold, readable text. Place it in a prime spot on the page to ensure it will not be missed. In some cases, you may want to put it in more than one place.

Simple Forms

Following the law of pithiness, keeping forms simple can decrease user frustration and increase the likelihood of form completion.

Ask only for essential information and use a clean, organized form interface. Studies show that conversion rates increase significantly when the number of form fields is reduced.

Booking Form by Wen Tong.

Responsive Web Design

With more and more website users browsing the web on smartphones and tablets, incorporating responsive web design is becoming imperative. Responsive web design allows a site’s formatting to adjust to browser windows of different sizes.

Menus that stretch across the top of a screen in desktop view may be condensed to accommodate for smaller mobile devices. Columns can adapt according to screen size by stacking, so only vertical scrolling is needed to search a page. Google favors responsive sites as well. If your website is not designed to accommodate different user interfaces, you could be missing out on thousands of potential visitors.

Load Time

People are becoming increasingly impatient. With the whole world at their fingertips, they usually do not want to wait around for a site to load to get the information they need. A poor site loading time could also decrease the chances of a user completing an eCommerce purchase.

Users may also associate poor loading times with a non-secure server and worry that their payment information will not be safe. Make sure to optimize file sizes for your site and ensure that your server is up to date to avoid losing conversions.

Familiarizing yourself with conversion rates and utilizing conversion metrics is a great way to improve your marketing strategies and track progress. Keep fundamental psychological principles in mind when working on a site design to make engaging, easy-to-navigate pages.

Stay on top of advancements in website technology to ensure your site’s responsiveness and load times are optimal. If needed, reach out to a digital marketing agency to help you optimize your site conversions.

The post A Comprehensive Guide on the “Whys” of Site Optimization 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.

The opportunity is about more than putting a fresh coat of paint on an old website, though. It’s also a chance to assess both success and strategy. Stakeholders can take a deep look at what has worked and what hasn’t with the previous version.

And if big decisions need to be made, this would be the ideal time to do so. After all, you’ll likely be knee-deep in code and graphics. You might as well discuss the most important questions with your clients.

A website redesign can be just the thing to create organizational momentum – the kind that reaches beyond online presence. But it requires some critical thinking skills and well-defined goals.

Here are some tips for figuring out where you (or your client) stand and creating a plan for where you want to go.

Look at the Good and Bad of Your Current Website

The odds are that the current version of your website does some good things. Maybe the typography is easy to read, or you built in some awesome custom features.

Whatever the case, put those positives on a list as items you want to carry over (if not further improve). This will help to ensure that they don’t get lost in the shuffle as you work on a redesign.

Just as likely, there will be some negatives. For example, an older website may look outdated. It could also lack best practices for modern accessibility and responsiveness.

In addition, there could be several other aspects to review, depending on your site’s niche. User data, eCommerce sales, and content are all possibilities.

Analytics can be a great tool for determining your site’s successes and areas of need. It can also fill you in on how users are finding and viewing your site. This can be a huge help when thinking about a redesign.

Have Your Needs Changed?

A new look is only part of a redesign’s potential impact. Along the way, you may find that new functionality (or a refactoring of old) is needed.

The challenge here is two-fold. First, you’ll want to map out the process for adding this functionality. That could be as simple as buying a piece of software or subscribing to a SaaS (software-as-a-service) provider.

But it may also entail writing a lot of code yourself or hiring a developer to help. All of this must be factored into the project’s timeline and budget.

Second is how any new features or apps may affect your web hosting situation. You may need more processing power or storage to keep things running smoothly. And it’s much more convenient to tackle this during a redesign than after launch.

If a change is required, this will ideally allow you to gather everything you need in a development environment. You’ll have the freedom to work in the background without interfering with the live site. Plus, there’s peace of mind in knowing that your new setup will have enough horsepower to handle whatever you throw at it.

Prioritize User Experience, Performance, and Accessibility

Even if your current website is just a few years old, user expectations have likely changed. Not to mention that best practices have also evolved.

Each iteration of your website should take the latest standards and expectations into account. That means refocusing on user experience (UX), performance, and accessibility.

It sounds simple. But it’s also more challenging than we may think.

That’s because a redesigned website often carries the technical debt of its predecessors. Some parts of those previous builds usually come along for the ride. And they could potentially drag down these key areas of your new site.

Consider a feature that requires user input – like a search UI. It may have worked well enough in its heyday, but it is cumbersome when compared to the latest techniques. And perhaps it isn’t easily navigable by keyboard, making the process harder for disabled users.

Existing content and features should be revisited and judged against current best practices. This will ensure that they keep up with the rest of your shiny new website.

Putting It All Together

Now that you’ve reviewed your current website and gained an understanding of your needs, it’s time to create a list of goals!

Thankfully, there’s a lot of flexibility here. Your goals can be as broad or narrow as you like. And much of it will depend on your organization and type of website.

An eCommerce site may set out to increase sales by a certain percentage. Or a content-focused site might hope to increase clicks to featured articles. Meanwhile, a freelance portfolio may simply want to optimize load times.

Each goal can be customized to fit your needs. But it’s still important to list them. That will provide a basis for comparing them and measuring results later.

In addition, taking the time to list goals keeps them in the front of your mind. It’s something you can reference throughout the redesign process. Thus, you’re more likely to implement them in the finished product.

A Redesign Is an Opportunity for Change

All told, a website redesign is an opportunity to create positive change. It’s a chance to build something that looks and performs better. And it can also help you keep up with the latest trends and best practices.

That’s why it’s crucial to look beyond just the cosmetic aspects of the project. Take the time to study how things work and their impact on the user experience. From there, determine the best ways to improve and invent. And when it comes to goals, hold yourself accountable.

You’ll likely have to live with the results for several years. Therefore, it’s worth taking full advantage of the opportunity while you have it.

The post How to Define the Goals of Your Website Redesign appeared first on Speckyboy Design Magazine.

And while we’d all love to have access to enterprise-grade hosting, that’s unlikely to fit within most budgets. Sites for small businesses, blogs, and non-profits often have to settle for something less.

Lower-tier (i.e., cheap) web hosting simply won’t carry the same computing power as those expensive accounts. And some providers make bold promises (unlimited storage and bandwidth, to name a couple) that deflect from flawed performance and limited support.

However, this doesn’t mean you’re stuck in the mud. There are providers out there that offer stable, low-cost hosting. From that foundation, there are things you can do to squeeze every bit of performance from your setup.

Today, we’ll share some tips for getting the most out of your cheap host.

Find the Best Hosting for Your Money

With so many hosting providers to choose from, it can be difficult to discern between them. And just because multiple companies offer similar pricing, it doesn’t mean their level of service is the same.

This especially holds when it comes to cheap hosting. Quality isn’t easily identified. And big, recognizable names don’t necessarily translate into competence or performance.

Plus, the information a provider makes available on their website doesn’t tell the whole story. You can find out the monthly cost and how much storage space is included. But the finer details – things that aren’t often published – are what make the difference.

Therefore, it’s worth looking into independent reviews and asking other web designers about their experiences. Speaking directly with the host is also recommended. Taken together, these items paint a clearer picture than sales pitches.

While we can’t tell you which host or plan to choose, we can say that there are solid low-cost options on the market. In the end, it’s about finding a host that offers an acceptable level of resources and support. Oh, and it will also need to fit within your budget.

Look For Ways to Reduce Server Load

Shared web hosting is generally on the lowest rung on the pricing ladder. The server may have plenty of resources, but you’re sharing them with other users. Thus, your site will have limited access to key performance enhancers such as CPU cycles and memory.

One way to stretch the available resources is by reducing the load on the server. And several things can help:

Make Your Site as Lean as Possible

A bloated website won’t perform at its best – even on top-flight hosting. Put it in a shared environment and your key metrics will look even worse.

That’s why it’s important to build the leanest website possible. That means including only the scripts and styles required to get the look and functionality you need. For example, you may opt for a barebones WordPress theme as opposed to one that offers extra features you’ll never use.

Database calls are another resource hog. Therefore, utilizing static HTML or headless CMS technology can be a boon to front-end performance.

In short: if a feature isn’t necessary – leave it out.

Offload Media, Scripts, and Stylesheets

A typical web page could have dozens of files to load. Calls to JavaScript and CSS files not only cost you in terms of server requests, but they can also be render-blocking resources that slow down load times. Image, video, and audio files also take their toll.

One cost-effective way to minimize their impact is by using a content delivery network (CDN). This offloads your site’s files into the cloud. Strategically placed servers deliver these assets as close as possible to a user’s geographic location.

While most CDN providers charge a fee, you often get a lot of performance for the money. In the long run, it may end up being cheaper (and potentially more effective) than upgrading your hosting account.

Consider SaaS Providers for Key Functionality

Serving up files impacts performance. But parsing code and writing to a database can grind a low-powered server to a halt. The more complex the code, the more burden on the host.

That makes running key functionality on your server more difficult. Any sort of data-intensive site, like eCommerce or membership, can become sluggish in this situation. Even relatively simple tasks like a user search may cause a slowdown.

This is where software-as-a­-service (SaaS) providers can be beneficial. By employing a hosted shopping cart, for example, the heavy lifting is done by a third party. Once again, this frees up your server to handle other jobs.

And yes, there are fees involved. But consider that upgrading to slightly more expensive hosting still may not provide enough horsepower to run these features efficiently. The level of service needed to do so could cost more than paying for a SaaS.

Use Caching

If you’re using a content management system (CMS), smart use of caching can do wonders for performance. It takes your site’s dynamic content and turns it into static HTML files. That results in fewer calls to the server – including those expensive database requests.

Some hosts offer server-level caching – which is definitely worth using if available. However, there are other options available, such as WordPress cache plugins. Even a little bit of effort can make a difference here.

Cheap Hosting Doesn’t Have to Slow You Down

Not everyone can afford top-tier hosting plans. Besides, bumping up to the next level doesn’t always mean better performance. You may just be paying for extra hard drive space. Great if you need it, but it won’t make your site run faster.

Regardless, it’s quite possible to have a high-performing website that resides on cheap hosting. The first step is to find a host that provides a baseline of stability.

From there, it’s about building a lean website that prioritizes performance. This is good practice for every website – even those on dedicated servers. Thankfully, modern languages and tools can help you along the way.

But the optimization doesn’t stop there. Employing methods to reduce the load on your server, such as CDNs, caching, and SaaS providers, will help to keep things running smoothly.

In the end, cheap hosting doesn’t have to mean poor performance. While it may not be the ideal environment, the right approach can produce excellent results.

The post Squeezing the Most Performance from Cheap Web Hosting appeared first on Speckyboy Design Magazine.

For web design to be considered truly effective, analytics data has to tell a story that supports the claim. The Internet is one of those rare spaces where artistic touches can be measured with hard numbers. Design elements can be tested, quantified, and improved to truly capture the collective taste of a user base.

If you ever wondered why Apple and Google are leading the way in terms of design, it’s not just because they can hire the most talented people. A big part of their success is their tenacity in testing every design variable they use. Fortunately, you don’t have to be a mega-corporation to do what both these iconic enterprises do. With simple tools, no budget, and a little effort, you can start refining your site’s look en route to better usability and conversion rates.

Measuring the Elements of Web Design

Effective design should adhere to the core principles of what makes a site good. There are four elements that need to be considered at all times when putting a site together: These are:

1. A Clear Objective

Every site needs to send a strong but implicit message to the users about what it wants to accomplish. Whether it’s a sales pitch, an opt-in offer, an invitation to consume content, or to participate in a discussion, each page has to reflect a motive that’s beneficial to both the visitor and the webmaster.

Site design should serve as a guiding force for site objectives – it should help move the audience in farther along a conversion funnel.

Metrics to Consider:

The following metrics can help you determine whether or not your site manifests a clear objective or if it’s driving away users with vague motives:

• Bounce Rate – In traditional marketing, they say that a confused mind always says no. Applying that to web design and usability, a confused visitor will always hit the “back” button on their browser. According to analytics guru Avinash Kaushik, the bounce rate is the sexiest metric in all of digital marketing. It’s simple yet it tells you so much in just one glance.

A bounce happens when a user lands on one of your pages and goes back to the referring page without clicking on anything. It suggests that the user’s intent was likely not satisfied and the user experience was largely unfulfilling. If your site has a bounce rate of 60% or higher, that may be a cause for concern. It’s an indication that your design, your messaging or both could be confusing.

The bounce rate is the percentage of visits that bounced off a site’s pages versus the total number of visits. Practically every analytics platform offers bounce rate data for an entire site and on a per-page basis. In Google Analytics, your bounce rate is one of the first things you’ll see in the dashboard.

• Conversion Rate – A conversion happens when a site goal is accomplished. This could be a visit to a page, a transaction, an opt-in to a mailing list, a phone call, etc. Your conversion rate, therefore, is the percentage of visits that went on to convert versus the total number of site visits.

Unclear objectives can make a site’s conversion rate suffer. Being clear in your messaging and having a design scheme that limits distractions can help keep your conversion rate healthy. If your site’s conversion rate is below 2%, you’ll want to review your design and see if it helps or hurts the clarity of your site’s objectives.

2. Compelling Content

Content is central to every user’s experience in a site. Whether it’s text, video, audio or images, it has to be properly laid out and formatted to attract the most engagement from your audience. When properly supported by good site design, content becomes easier to access and share. Conversely, bad design can limit content’s ability to influence users and extend your site’s reach.

Metrics to Consider:

Most analytics platforms will give you an abundance of data that will give you ideas on how well your content is performing. Page-level bounce rates, as described under the previous section, are valuable in narrowing down pages that may be suffering from design issues. Here are other metrics to look at when trying to find clues about content performance with respect to design:

• Average Time on Page – The duration of your users’ stay on your pages is an indication of their engagement level. Non-engaged traffic leaves your pages in a hurry and bad design can contribute to their eagerness to leave. If the average user spends less than two minutes on average when they visit your pages, you’ll want to investigate the matter immediately.

Average times on site/page stats are served up in Google Analytics and most other platforms. In fact, you can find this metric right on GA’s basic dashboard. For page-level time averages, you can go to GA’s “Site Content” section and generate reports for all your pages to see which ones are underperforming. From there, you might be able to spot commonalities and patterns which can help you identify design issues.

• Exit Rate – Which pages in your site are sending away the most visitors when they’re not supposed to be the final stop in a conversion funnel? This metric will let you know. Under Google Analytics’ “Site Content” report, you can sort site pages according to which ones lead users out of your site the most. Pages with abnormally high exit rates should be investigated for possible design improvements that can halt the visitor bleed.

3. Ease of Navigation

Ease of navigation pertains to how quickly a user can browse through a site to find what he or she wants to see. The strategic use of menus, search boxes, and categories will help facilitate better navigational experiences. Ideally, a user shouldn’t take more than four clicks to go from the home page to the subpage that addresses their intent. Anything beyond that usually means your navigational design is confusing or ambiguous.

Jeff Sauro of MeasuringU wrote an excellent post on what you should look out for when trying to gauge a navigation scheme’s performance. These include:

• Findability Rate/Completion Rate
• Time to Find
• Variability in Finding Time
• Initial Click
• Success Path
• Confidence
• Difficulty:
• The Most Difficult Items to Locate
• First Path Success vs. Second Path Success
• Reasons for Difficulty

You can read the definition of each in the post linked above as well as hints on how to gather the data for them.

If you’re looking for navigation analytics reports that are easier to come by but not quite as in-depth, you’ll want to check out Google Analytics’ Navigation Summary. This hidden gem can be found under Behavior>Site Content>All Pages in GA. It shows how visitors flow from one page to another so you can gain insights on which pages are promoting good navigation and which ones are acting as traffic stoppers.

The goal is ultimately to make sure that your design is facilitating visitor movement and discovery of pages that satisfy user intent. The faster and easier the navigation paths make things for your audience, the better your big conversion numbers get.

4. Visual Appeal

Visual appeal refers to how a site holistically makes an impact to the visitor. Most people agree that visual appeal is a function of a site’s layout, color scheme, textures, fonts, and use of rich media. It’s also the part that’s the most subjective out of the four principles that make up a quality site. This means it’s the area where the most testing and analysis should be done to see which scheme pleases the majority of an audience.

For the most part, there are two types of testing done to see which visual elements work best for a site’s overall design. These are:

• A/B Split Testing – in web design and marketing, A/B testing is an experiment conducted to see which of two variants gets a better response from a small section of an audience. For instance, if you’re choosing between two calls-to-action button colors, you’ll want to perform this kind of test to see which one gets more clicked.

The same could apply to elements like fonts. If you want to know which one of two fonts promotes better reading, you can run a split test to see which setup yields better engagement signals. Average times on pages and scrolldown rates are some of the stats you’ll want to check.

Google Website Optimizer is an excellent tool for A/B testing. It’s free to use and is relatively friendly even to newbie webmasters.

• Multivariate Testing – If A/B testing tells you which one among singular elements works better, multivariate testing tells you which combination of elements promotes ideal user behavior. Does that button color go well with your background and the font style? Let user behavior give you the most honest answers.

Like A/B testing, Google Website Optimizer is a great tool for this type of test. VWO and Optimizely are also great options.

Tools to Help Improve Web Design and Performance

Planning and executing modifications to your website can be a daunting task, but this shouldn’t mean that you have to start from scratch. Listed below are tools that may help you get started.

Goal Setting and Tracking

Setting goals are an integral part in making enhancements in web design, as well as tracking them to see how you are faring. Google Analytics provides a comprehensive setup in creating goals for the changes you wish to apply. With GA, you can create custom goals, set values, record your status, and share them. You can also use Goals on Track, an alternative analytics platform for goal setting and monitoring.

Site and Page Speed

The changes you will implement in your site and webpages are likely to affect the loading speed. You can supervise these two activities using Pingdom, a tool that tells you how fast your site loads, and PageSpeed, a tool Google created that helps analyze how quickly your optimized webpages turn up.

Heat Map

Heat maps on your site allow you to determine the activities visitors do, such as clicks and scrolls, when they are on your site. It tells you which places they go to most and which areas are getting the least attention. Identifying your site’s heat map will clue you in to the aspects of your web design people consume the most. The tools that will help you monitor this are Crazy Egg and Inspectlet.

Coding Cheat Sheet

Coding is probably one of the most tedious tasks when it comes to implementing web design changes. Fortunately, ample guides are available to coders such as jQuery, CSS, HTML5, and Javascript to aid them.

Concluding

Ultimately, web design is a matter of continuous evolution. It’s good to go with artistry and best practices in the initial phases, but analytics and testing have to fuel the optimization process. Having a feel for what looks good and what works is nice; knowing for sure with numbers that don’t lie is even better.

The post How to Interpret Data to Improve Your Website Design and Performance appeared first on Speckyboy Design Magazine.

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

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

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

Implement Caching

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

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

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

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

Defer Loading of Render Blocking Scripts and Styles

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

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

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

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

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

Optimize Images

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

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

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

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

Responsive Images

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

Modern Image Formats

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

Lazy Load All the Things

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

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

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

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

Clear Out the Clutter

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

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

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

Improve Your Website’s Core Web Vitals

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

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

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

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

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

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

This Yin and Yang is a challenge. How do you create a website that looks beautiful while also maintaining peak performance?

Over the years, it seems like the balance has been tilted toward the former. I’ve faced it in my own journey. For example, even though I know that massive image is going to bog down load times, it just looks so good.

But, on the modern web, is any visual enhancement worth implementing if it means taking a significant performance hit? Given the right approach, you shouldn’t have to.

Performance is as Important as Ever

It feels a bit ironic. Hardware continues to evolve in more powerful ways. Even mobile phones have multiple processor cores and tons of memory. Not to mention that broadband has become increasingly widespread.

Yet, we’re still told to eke out every possible millisecond of load time. Why?

It comes down to two reasons: short attention spans and Google. First, users don’t tend to stick around for a slow website to load. They’ll just find whatever they’re looking for elsewhere.

And with Google’s Core Web Vitals now influencing search rankings, well, performance is a pretty big deal. It could be the difference between getting found or forever lost in the nether regions of search engine results.

Plus, the web is no longer a novelty. To think that users will wait around for your fancy intro presentation (#RIP Flash) is unrealistic.

People visit your website for a specific purpose. Therefore, anything that gets in their way is probably not worth implementing.

Modern CSS and JavaScript Techniques Provide Solid Alternatives

As a designer, it’s easy to get into the habit of using bulky media files to enhance the look of a website. This has been the way of doing things for decades. Whether it’s a full-screen image or a video background, these items can be transformative. However, they can also hamper performance.

Thankfully, modern CSS and JavaScript can offer better alternatives. Each has features that can either replace media or make these files easier for browsers to digest.

Visual effects like CSS gradients and blend modes are great examples. They look just as good as anything you can whip up in Photoshop, yet without all the excess bloat.

If you’re looking to add movement, CSS animation and JavaScript libraries such as GSAP can fit the bill. Not only can they produce jaw-dropping looks, but these techniques are also lightning-quick.

In addition, lazy loading offers a nice compromise – at least for media that isn’t within the initial viewport of your page. Elements including images and iframes will only load when needed. This saves on load time while still enabling the use of these assets. Native browser support makes implementation easier than ever.

Smart use of these techniques can help you avoid dragging down performance for the sake of looks. Instead, you’ll achieve a more sustainable balance.

Beauty and Performance Can Coexist

A website is more than just its looks, content, or functionality alone. It’s a cohesive user experience. That means each of these facets must come together to serve users.

In order to effectively do so, a website must also prioritize performance. Years ago, it might have been easier to get away with a great-looking site that was slow to load. Before powerful devices and fast internet, speed wasn’t necessarily a user expectation.

That’s changed dramatically. We now live in an on-demand world, one where everything we need is just a click away. If your website doesn’t deliver on that promise, it’s going to be difficult to build a lasting relationship with visitors.

Web designers need to change along with those expectations. In practice, it requires us to think long and hard about what visual elements we create and how we implement them. Doing things as we’ve always done them may no longer be viable.

Instead, everything must be done with an eye towards optimal performance. It’s a challenge, for sure. The good news is that we have the right tools and technologies to make it happen.

The post Web Designers No Longer Need to Sacrifice Performance for Beauty appeared first on Speckyboy Design Magazine.

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

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

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

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

Tougher Testing

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

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

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

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

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

Who Might Core Web Vitals Potentially Hurt the Most?

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

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

Low-Budget Websites

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

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

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

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

Websites Running a CMS

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

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

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

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

Websites That Use Proprietary Software

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

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

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

Big Players vs. Everyone Else?

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

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

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

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

Another Hurdle for SEO Success

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

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

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

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