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.

Over time, a site can get gummed up with all sorts of items that are no longer needed. This can degrade performance and result in an unnecessarily large storage footprint. It can also overcomplicate the process of troubleshooting problems.

Of course, there are some differences between cleaning out your attic and your site. With a website, you have to be extra careful in what you remove. Otherwise, you could be left with broken links or worse. Therefore, caution is always recommended.

Today, we’ll point you towards some areas where virtual garbage can begin to pile up. And we’ll also introduce you to a few tools that can help make the cleaning process that much easier.

Cut the Low-Hanging Fruit

On a typical WordPress site, you shouldn’t need to look very far to find unnecessary items. This is particularly true for both the plugins and themes areas.

WordPress itself comes with a default theme. And as new default themes are released, they may become a part of your install as well. While these themes are nice enough, if you’re not actively using one of them, what’s the point of keeping them around?

The same goes for plugins. Beyond the default Akismet and Hello Dolly offerings, users have been known to add all sorts of experimental junk here as well. It seems that we love to install all manner of plugins and either: a) play around with them for a bit, then abandon the effort, or; b) install the plugin and never bother to activate it at all.

This goes well beyond just clutter. It can actually be a security risk. For instance, if an unused theme or plugin has a security flaw, a bot (or a human) may be able to sniff it out and exploit it.

Fortunately, this should be the easiest stuff to remove. The main rule of thumb is: If you’re not using it, get rid of it.

Trim Old Content and Revisions

Just about every site has some measurable amount of outdated or unused content. This could include anything from a 10-year-old blog post about how great the iPhone 3GS is, to those items you marked as drafts that were never quite finished. Not to mention the potentially thousands of revisions WordPress saves as you make changes to your content.

Even small sites can suffer from this level of clutter. As these items start to add up, your site’s database can become a bit bloated. And for a large website, this can result in significantly slower performance. As such, it’s worthwhile to do some cleanup.

Remove Drafts

The quickest and easiest thing to do is to review and remove all of the page and post drafts within your site. WordPress makes this easy, as you can use the menu at the top of the page/post listing to filter out everything but drafts. From there, it’s just a matter of deleting those items that you know you’ll never use.

Limit Revisions

Every time you make a change to content and save it, WordPress keeps track of it (plus an ‘Autosave’ as you make edits) in the form of a revision. This comes in handy when you want to restore something to its previous state. However, you may not want to keep an unlimited number of them lying around.

Through a quick addition to your site’s wp-config.php file, you can limit the amount of revisions WordPress will keep for any single content item: define( 'WP_POST_REVISIONS', 5 );

Determining a number may be difficult, as you never know how far you’ll need to go back in time. However, it is important to place some limitations here, as it’s a huge source of clutter. For most sites, 5-10 revisions should be enough. In the snippet above, we’ve decided to keep 5 revisions.

Use a Tool

As usual, there are a number of WordPress Plugins available to help make for a smoother process. Depending on your specific needs, WP-Optimize, WP-Sweep and Optimize Database after Deleting Revisions are all popular and highly-recommended choices.

Each one covers similar territory, cleaning up old revisions, comments, and other database-bloating junk. Some offer automatic cleanup, adding an extra layer of convenience. Check them out and see which one is the best fit for your situation.

Look for Homeless Media Files

Another potentially messy situation can arise when you have unused media files hanging around. Images are perhaps the worst perpetrators, as uploading a single one outputs several thumbnail versions. Plus, many plugins (such as photo galleries and sliders) churn out their own specific thumbnail sizes. Things can go from merely messy to a full-blown hoard in a short amount of time.

Having multiple versions of an image isn’t necessarily bad – as long as you’re still using them. But there may be several images, pdfs, and other media files that aren’t being used at all. These “homeless” files take up storage space and can slow down processes such as Media Library searches.

While you can certainly go through your /wp-content/uploads/ folder with a fine-toothed comb, it can be near impossible to weed out every unused file. It’s also a process that’s ripe for mistakes. That’s where a plugin such as Media Cleaner can be of great help.

It will scan your uploads and look for files that aren’t associated with a WordPress post, photo gallery, etc. There’s also a separate “Trash” bin that allows you to double-check to make sure a file is safe to delete before taking action.

Tidy Your Dashboard

The WordPress Dashboard can become quite unwieldy. The more items you install, the more menu entries, widgets and notifications start to appear. Not only does this make the items you need harder to find, but it also distracts from getting actual work done.

We won’t spend a lot of time on this particular area of clutter, but suffice to say that uninstalling unnecessary themes and plugins can do wonders here as well. Beyond that, you can use the “Screen Options” tab at the top of each page within the back end. This will enable you to turn off some extras that you don’t want to see.

And again, there are plugins that will help you clean up the menu system. One such option is Admin Menu Editor. It helps you hide menu items you don’t need – or even stash them away based on a user’s role. In short, you can bring some visual Zen to one of the messiest parts of WordPress.

Keep It Clean

Virtually every WordPress website can benefit from some routine house cleaning. And, unlike that pile waiting for you in the kid’s room, this type of cleanup doesn’t require a whole lot of effort. With the help of some handy tools, much of what needs to be done can be automated.

Still, it’s worth noting that you shouldn’t delete anything from your site without understanding the consequences. That’s why it’s always recommended to keep fresh backups around – just in case.

Once you’re prepared to move forward, you can toss out the bloat and experience the, well, joy that comes from a squeaky-clean website.

The post How to De-Clutter Your WordPress Site 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.

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.

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 Common Causes of a Slow-Loading WordPress Site and How to Fix Them 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.

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.

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.

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.

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.