Site Speed Optimization For Non-Coders

Google’s prioritization of site speed makes sense as faster-loading sites tend to mean a better visitor experience for both humans and bots alike. However, site speed improvements are not always the easiest thing for most people to do on their own. The problem is that most SEO professionals don’t have a background in web development or even rudimentary HTML skills. Fortunately, these skills are not absolutely necessary to get started on a career, particularly if you work as part of a team.

But if you work alone, not having these skills can be a major hindrance to your ability to optimize site speeds. To be able to fully optimize a site by themselves, SEOs should ideally learn HTML, CSS, JavaScript, and other necessary web development fundamentals.

We understand it’s not always possible to do this. Thankfully, non-coders have plenty of options available to them that will help them boost site speeds and improve the overall user experience.

Optimizing Site Speed Without a Web Developer

In this article, we’ll discuss how SEOs without coding skills can do impressive site speed optimizations without the aid of web developers. The tips here are specific to WordPress, which is by far the most popular CMS out there. So long as you know how to install plugins, you should be able to significantly boost your site’s speed and give it a fighting chance on Google’s SERPs.

More specifically, the tool we will discuss here is Autoptimize, a free WordPress plugin that can do a lot to help SEOs without coding knowledge boost site speeds. Other tools do the same thing but Autoptimize is well-liked, secure, tested, and most of all — easy to use.

Disclaimer: Before you install Autoptimize, make sure to clone your site first. Plugins can sometimes clash with existing themes, plugins, and mods so it’s best to test things in a staging environment before going live. This should allow any conflicts to be addressed by the site developer without risking the live version of the site.

How to Use WordPress Autoptimize to Boost Site Speed

To get a better idea of how to use Autoptimize, follow our tutorial video starting at 3:30. Things may look different on your end depending on your version of WordPress and whether you installed other themes and plugins.

Step 1: Visit Google PageSpeed Insights and Check Your Site

Visit the PageSpeed Insights page and enter your website URL. It should return a list of various site speed metrics and recommendations on how to improve your site’s performance. You should be able to find your overall performance score as you scroll down through the results.

Ideally, you want a score as close to 100 as possible. Sites with scores below 90 are less likely to be given SERPs priority by Google. Note that you should be able to view different performance scores for mobile and desktop. These scores will likely be different and the direction your site optimization takes should be informed by which type of site experience requires more attention.

Also, note that the performance score only checks for optimizations and does not directly give you the actual site speed. It is entirely possible for a site to still be slow even if it has high scores on PageSpeed Insights. While both performance scores and site loading speed are correlated, they should not be mistaken for each other. True site speed has to be measured with other analytics tools.

Step 2: Note PageSpeed Insights’ Recommendations

Once you have PageSpeed Insight’s recommendations, you should have a good idea of which of your site’s technical and on-page SEO characteristics should be improved to further increase site speeds. If you’re lucky, you won’t need the assistance of a web developer to deliver major improvements.

On the example site we used on the video at around 10:36, Google’s PageSpeed Insight tool offered us a few critical recommendations, including:

• • Deferring offscreen images
  • Serving images in next-gen formats
  • Reducing initial server response time
  • Eliminating render-clocking resources
  • Efficiently encoding images
  • Properly sizing images
  • Reducing unused CSS
  • Reducing unused JavaScript

Some of these recommendations such as “Reducing initial server response time” require a web developer to fix. Fortunately, a lot of the other things can be resolved with just the Autoptimize plugin.

Step 3: Install Autoptimize on your WordPress Account

Assuming you have administrator privileges and have knowledge of installing plugins, install Autoptimize. To start, find the “Plugins” option on the left side menu, click on it, and click on “Add New” next to the Plugins header. Check out 11:52 to see where to click. Once Autoptimize is installed, you should be able to view the plugin in “Settings” on the left side menu.

Step 4: Optimize JavaScript, CSS, and HTML

When you open the Autoptimize plugin dashboard, you should be viewing the “JS, CSS, and HTML” tab by default. From here you can do all kinds of optimization fixes to your site’s coding, which should increase loading speeds and conserve server resources.

JavaScript Options

To start, check the box for “Optimize JavaScript Code”. In most cases, checking this box should “minify” or streamline your site’s JavaScript code and make it more efficient. While it won’t be as good as an experienced web developer, it’s good enough for most speed optimization needs.

The next option is “Aggregate JS Files”. This doesn’t always work properly but when it does, it should give your WordPress site a significant boost in loading speed. Again, we have to reemphasize that you need to perform these fixes in a staging environment to reduce the risk to the live website. Test the staging website before and after to see if the option should be enabled for the live version.

The next option is “Do Not Aggregate but Defer”. This essentially tells WordPress to only load JavaScript elements that could be seen by the user, deferring the rest for later when the user scrolls down. From a visitor’s perspective, this can make the site appear to load faster. Again, make sure to test this in your staging environment before applying this to your live site.

Next down is “Exclude scripts from Autoptimize”. If you’re not a coder, we recommend not touching this part.

Lastly, we have “Remove Unused JavaScript”. This simply removes JavaScript code from the site that doesn’t do anything. This option doesn’t work as well as having a developer clean up the unused code, but it works well enough in a pinch. Again, make sure to test this in staging before applying it to your live site.

CSS Options

In this section, we recommend checking “Optimize CSS Code” and “Aggregate CSS” files. Unlike the similar JavaScript options on Autoptimize, these are much less risky to check off, though you will still want to try this in a test environment.

As for the other items, you’ll want to test and retest these to see what works for your site and what doesn’t. “Also Aggregate In-Line CSS”, “Generate data: URI’s for Images”, “Eliminate Render-Blocking CSS”, “In-line all CSS”, “Exclude CSS from Autoptimize”, and “Remove Unused CSS” should all be tested in staging before going live.

HTML

Here, there are only two options: “Optimize HTML code” and “Keep HTML Comments”. “Optimize HTML code” has to be tested much like everything else but you can leave “Keep HTML Comments” unchecked.

CDN

In this section, there is only one option – “CDN Base URL”. You’ll only need this if your site uses cloud hosting services (Content Distribution Networks) such as Cloudflare, CloudFront, and so on. If you do, only add the required base URL and test as usual. If not, leave this section alone.

Cache Info and Miscellaneous Options

Generally speaking, you’ll want to leave these options alone if you’re a non-coder.

Step 5: Optimize Images

Next to the “JS, CSS, and HTML” tab on the Autoptimize dashboard, you should find the “Images” tab. You’ll have four options but the only one non-coders should pay attention to is “Lazy Load Images”.

“Lazy loading” tells your WordPress site to only load images that are “above the fold” and immediately visible to visitors. Normally, all the images on a page will load at the same time, regardless if a visitor could see a particular image. Enabling this option can help significantly improve site speeds from a visitor’s perspective.

Lazy loading is especially important for sites that are primarily accessed through mobile devices. Enabling lazy loading allows users to conserve their mobile data and also makes it possible to offer good performance even in cases where the visitor does not have access to reliable 5G connections. This makes lazy loading an important optimization for sites that serve the Philippine market.

Step 6: Optimize Items in the “Extra” Tab

Next to the “Images” tab, there’s a tab labeled “Critical CSS” that you can skip over. This tab offers a set of additional CSS optimizations. However, these are paid options and we don’t see a significant benefit from using these.

Instead, you should go to the next tab labeled “Extra”. The options here do not directly improve site speed. However, they can be useful for SEO.

Under “Google Fonts”, select “Combine and Link Deferred In Head”. This has the effect of lazy loading fonts, which does marginally increase speed but more importantly, it prevents fonts from becoming render-blocking elements. This can shorten load times and prevents timeouts, thus improving the overall experience for visitors.

You can also choose to check “Remove emojis”, depending on the type of content you want on your website. Doing this removes WordPress’s emojis from the CSS, which helps marginally increase load speeds. But if your site has a community that uses emojis heavily, you may want to leave this on.

The next option is “Remove Query Strings From Static Resources”. To sum things up, enabling this removes the possibility of generating dynamic URLs that can mess with your site’s visibility on search engines. Enabling this option prevents that from happening and may also improve your site’s performance rating on Google’s PageSpeed Insights.

Final Thoughts

Believe it or not, the steps above are all you need to do for a lot of WordPress sites that you’ll come across. While we still wholeheartedly recommend that you develop your JavaScript, CSS, and HTML skills, using a tool like Autoptimize makes it possible to effectively optimize site speeds without the aid of a web developer.

In our experience, it’s possible to get some very impressive performance gains with just the Autoptimize plugin for WordPress. It won’t be better than what’s achievable with a talented web developer actively working to improve a site’s backend. Its utility for fixing a website that has fundamental SEO issues may also be limited. However, for a free plugin, Autoptimize can do much to improve loading speeds and search visibility while being more stable and safer than most similar plugins.

If your client runs a site on WordPress, trying out Autoptimize is a no-brainer, especially if you don’t have access to a web developer who can perform in-depth fixes for you. Even if you do have access to a web developer, using Autoptimize can still save plenty of labor resources, allowing the web developer to focus more of their attention on other critical website fixes.

At the end of the day, while having the best possible speed optimizations is great, sometimes you have to make do with what you have. Even modest site speed improvements can be enough to take your site ahead on the SERPs, especially if competing sites do not have good technical SEO.

If you’re looking for more technical SEO tips or want to discuss how to make your site SEO-ready, we’re ready to help. Set up a meeting with the SearchWorks team today to learn more potential speed fixes for your website.