William, Author at Go Fish Digital

How To Speed Up WordPress Websites

William — Fri, 12 Apr 2019 13:00:46 +0000

If you’ve spent any time developing on WordPress, you’ve probably encountered a slow theme that loads tons of files for no apparent reason, producing a slow website and a big headache. It can be infinitely frustrating to build an awesomely-designed website that runs slowly. This slowness has an effect on everything and everyone involved – yourself, your business, and your reputation included.

Related Content:

At Go Fish Digital, our WordPress development agency is often called in to solve page load time problems, and we do so in several ways. So, how can you reduce the load time of your WordPress theme or website? I’ve outlined several tips below that will help solve this problem:

1. Detect the WordPress problem

The first thing to do is to determine what is making your WordPress website load slowly. Is it large images, lots of HTTP requests, Javascript files, or all of the above? It’s your job to find out.

The easiest way to find this information is to use your browser’s internal tools. If you’re using Chrome, navigate to your problematic page, and press Command + Alt/Option + J for Mac, Ctrl + Shift + C or F12 for Windows, or just right click on the page and select “Inspect”. This will bring up your “inspector”. You will see something like the following:

Yours may come up smaller – that’s normal. You just need to stretch the window to fit more of the information. You can even dock the inspector in different parts of the window or pop it out as its own window if you want. Now, you need to navigate to the “Network” tab in the top middle area. You should see something like the following:

At this point, you might not see anything in this section. If this happens simply refresh the page. As the page data loads, you’ll start to see this window populate with various entries. These will be various files and network-related calls that can be fine-tuned to speed up your load times.

Once you sort the entries by which files/calls are taking the most time to load, you’ll start to see items like images, Javascript, and CSS files come up. This is normal, and this is what you’re going to focus on initially.

Note: Sometimes, gathering assets from different websites are the problem (like Facebook/Twitter widgets, Ads, etc.). In these cases, you’ll need to consult with the third party that you’re using to figure out a unique way to reduce the load time.

2. Use WordPress Minification

Minification is the process of removing redundant or unnecessary data without affecting how everything is processed by the browser. I would start here with most of the issues with a site. Often when you’re looking through the Network tab, you’ll see a ton of CSS files. Every single time the browser has to go to the server to retrieve something like a CSS file, or a Javascript, it causes more load time. Even if a single file is larger than several files separately, the single file will load faster because there are fewer server requests. Here’s a small list of plugins that will help you compress those CSS and Javascript files into a single, manageable download for your visitors:

Autoptimize
Merge + Minify + Refresh
Fast Velocity Minify
Minqueue (it’s sort of outdated, but it still works pretty well!)

Autoptimize is a good example of a really simple and useful plugin that will decrease page load times. Our web development team has used it on several websites and we’ve seen great results.

One thing to remember is that compressing all of the Javascript on your site may lead to some difficulties with other plugins, like WooCommerce, so stay vigilant!

3. Image Compression

Another common problem that creates slow websites is large image loads on both desktop and mobile. If you looked at your Network tab from before and saw that you had massive images loading, then this part is for you. Luckily, there are a few plugins that help us compress an image. I recommend the following:

To manually compress the images in your theme, however, I would just go to TinyPNG. This tool produces a zip file with all your newly compressed images. You can then upload those files into your theme to overwrite the existing images.

Have you heard about Lazy Loaders? Lazy loading is a Javascript technique that only loads an image on your page when your users actually see it. It’s a pretty handy feature and there are a few plugins that can achieve it:

Once you’re done installing the plugin, refresh the page and be sure to view the Network tab for changes.

Note: It’s a good idea to periodically reoptimize and refresh all the images on your site. There’s a cool little plugin for that right here.

Cache plugins

Caching pages is a very important part of web development and web optimization. Caching basically stores various responses, files, and other information for quick reuse later. You can read a little bit more about it here. Long story short, there are various levels of caching throughout your application/website affecting everything from the server up to the actual web pages that are accessed.

WordPress, with the use of the plugins below, can render data and store it for later use when another visitor hits your site. This will help speed up your site tremendously. I recommend the following cache plugins (be sure to talk to your hosting solution about which they prefer):

W3 Total Cache
WP Super Cache
Sucuri Security and other Sucuri services
Built-in cache from the hosting provider (WP Engine is a good example of this)

4. Use Content delivery networks (CDNs) For WordPress

Imagine that you’re trying to get a letter to your neighbor. You would most likely walk out of your house and stick the letter in the other person’s mailbox, which doesn’t take much time or effort on your part at all. Now, imagine if your letter needs to go to someone in another country. You will have to undergo a much longer and arduous process like going to the post office, buying postage, and then waiting days to ensure the recipient has gotten it. That’s essentially what happens when you request someone’s website.

Content delivery networks (CDNs) act as if someone from another country is accessing your website from next door to you. There are tons of computers set up throughout the world with your website assets on them that deliver them to people closer to them than you are. This dramatically decreases page load time and allows for better optimization on your server. There are other benefits of CDNs as well that you can read about in this article. There are several great services for CDNs, including but not limited to:

So, let’s say that you’re a developer and you’ve tried all of these different options — is even more fine-tuning available? I’d like to submit a method that I’ve used on several websites.

Controlling all the output with code

Note: The following part of the article can cause problems with the front-end of your website if you’re new to development. It’s best not to do this on production servers until you feel confident about the process and theory behind this idea. Only do this if you know exactly what you want on the front-end in terms of Javascript and CSS.

Before you begin compressing and optimizing your code even further, you should know exactly which CSS files and Javascript files you want to load into the page. For now, load your own compressed Javascript file and CSS file into the header and footer and deactivate all Javascript and CSS files that WordPress outputs. You can do that in the following two hooks:

The above code snippet is typically located in your header.php file in your theme’s folder, and it outputs all your header code where you could include Javascript, CSS, and more. You can read more about it in WordPress’ Codex here. Another place that WordPress injects code is in the footer. You can see this in the footer.php file of your theme. You can read about this in the codex as well. The hook will be the following code snippet:

Next, you need to take control of all Javascript and all CSS from your theme. To do that, you have to blanket tell WordPress to not allow Javascript and CSS files to be outputted. A theme usually registers these files in their respective functions.php file, but you need to tell WordPress to not allow any of them in the header or footer to register in your functions.php file. Each theme should have that functions.php file, so find yours (or make it in the root of your theme) and add the following code to your functions.php file:

If you refresh the page you should see that, for the most part, no javascript files were loaded.

Tip: All Javascript should be loaded in the footer, while CSS is loaded in the header of the website. This allows for the browser to render the structure of the website first before it starts with the Javascript. Typically, this results in the best experience for users.

If you refresh the page now, you’re going to see a really messed up site because there are no CSS files outputted. That’s what you want. Now, you’re going to control everything by placing your files in place of all of those Javascript and CSS files.

So, let’s say you know which stylesheet that you want to load. It can be your compressed output from Gulp or Grunt located in a folder like (theme)/assets/build/CSS/main.css or something similar. It can even be the style.css file in the root of your theme folder. Either way, you want to output the main stylesheet. Here’s the code (edit it to match the location and name of your file):

So, now let’s say that you’ve compressed a Javascript file in the same way you compressed the CSS. You can now load the Javascript into the footer of your site like so:

Reload the page and now you should be able to locate each file in the source code. That ensures that the PHP code that you have in your functions.php file is working. You can now check the Network tab, and see if you’ve improved in overall load sizes and time.

Conclusion

The most important thing to remember is that it’s absolutely possible to fix your page load problems, but it takes creative problem solving and some research. Remember to take a good look at the tools that are native to your browser to help you find the problem. Then, look to the aforementioned plugins, and strategies to produce neat, well-formed websites for public consumption. You can do it!

Let me know if my tips helped you improve load times on your website in the comments below.

How To Speed Up WordPress Websites is an original blog post first published on Go Fish Digital.

How Awesome Interactive Content Pieces Increase Page Time

William — Thu, 29 Nov 2018 14:00:15 +0000

Here at Go Fish Digital, we spend a lot of time tweaking websites and increasing traffic to a client’s website as much as possible. One factor that often gets overlooked is dwell time, or how long a visitor spends on your website before that person returns to the search page they came from.

Time on page is a real metric that Google, Bing, and other search engines use to evaluate the quality of a webpage, and we should all take it into consideration. So how can you increase the time that your visitors stay on your website? The answers I describe below may not be easy to execute, and will most likely involve a web developer, but I believe the following examples will lead to better overall user engagement and longer visit times.

Related Content:

Choropleth maps & interactive data visualizations

We recently finished a very large, interactive map project for an economic think tank in Washington, D.C. The traffic results each year have been tremendous for our client, and the on-page time has increased as well. The interactive map we did, which charted state, county, city, and congressional district data across the entire United States, was widely-received and circulated in many local, and national online publications.

That success makes a lot of sense when you consider the fascinating nature of interacting with large datasets. It’s not enough to simply display some data in some innocuous graph, but the end-user wants to “touch” it, “move” it, and “change” it. Consider any election season. How many people go to national websites, like the Washington Post, to view what’s going on in the polls at any particular moment? Most of these websites automatically update the information so that the user can stay on their site. Creating and displaying maps, and interactive data visualizations are an awesome strategy to increase visitor traffic and time on page.

You may be thinking: “But my website doesn’t do anything that would merit a map.” That’s OK. Is your brand a little bit more playful and open to entertaining your guests? HTML Games may be a great option for you!

HTML Games

I recently attended the All Things Open conference in Raleigh, NC. One of their booths was an organization known as Open Jam. Open Jam is essentially a contest that runs every year before the conference and features video games made by developers in a short amount of time. The idea is to expand knowledge of how to create games and to create a wealth of playable HTML-based games for end-users to enjoy. HTML games can easily be used by brands to increase time-on-page metrics. Just consider The Littlest Pet Shop HTML game.

I don’t know about you, but my kids would play games like this all the time online. And quite often, kids will influence their parents’ buying decisions, whether it’s a toy, cartoon cable network subscription, or even some educational service like ABC Mouse. Not to mention, it’s becoming more common for adults in the US to play games online. Whether it’s kids running up your on-page time, or adults, chances are that your service and/or product has higher odds to convert to real sales if a user is spending more time with said product or service. Ultimately, HTML Games and informational maps provide for quality user interactivity.

Near the intersection of mini-games and large data-intensive projects, lies the interactive project. It’s not exactly a game, but the user gets a warm, fun feeling from it, and it can be very persuasive when it comes to a business’ bottom line.

Interactive projects

Last year, we did an interactive project for a company that sells Christmas trees, holiday decorations, and more. Essentially, the user would select which Christmas tree ornament that they liked, and they would drag and drop it onto a virtual Christmas tree. After they were done with it, they could see who else selected the same ornament and placed it where they did. It was a fun little project, with links to the respective ornaments purchase pages on the main website. It was a good example of using interactive content campaigns to push brand awareness and product interaction. Ultimately, it would take the user a few minutes at least to finish decorating their tree, which increased the on-page metric for the client.

We haven’t even scratched the surface of all the cool ideas that you could use for your next content campaign. Though not exactly falling under the category of “awesome content pieces”, content generators, domain name generators, and various online calculators can increase user interaction and on-page time. We’ve all used them from time to time, like mortgage calculators, but these little interactive forms can do a lot for a website, especially in a niche market.

Bonus: Generators & Calculators

Just consider domain names. Often times, you’ll have a few small business owners sitting around the room talking about their next big idea, and they need a snappy domain name to go with it. They could spend a considerable amount of time playing around on a website looking for a high-quality domain name, then checking to see if it’s available for purchase. But, they can save time by doing all of this on a website with a domain name generator.

Did you know that many accounting and tax solutions offered online calculators to calculate your 2018 tax refund? 1040.com, H&R Block, Turbo Tax, and even the federal government, via the IRS website, offered a calculator to help users. Typically, people spend some time on the website and learn more about the products and services that these organizations offer, which in turn increases revenue.

In Summary

At Go Fish, we’re always trying to improve on meaningful metrics for our clients, on-page time being one of them. Whether it’s an intricate map showing off large datasets, or enjoyable HTML mini-games, you now have some additional ideas that will increase that metric for your users. So, what are you waiting for? Create your own brand’s awesome content piece, and tell us about it below!

How Awesome Interactive Content Pieces Increase Page Time is an original blog post first published on Go Fish Digital.