WordPress is the most popular content management system on the internet. It’s estimated that more than 30% of the sites on the internet run on WordPress. We’ve gotten pretty good at getting the most out of it and we want to pass that information on.
Themes and Layouts
It’s no secret that we don’t like to re-invent the wheel. While we can offer complete from-scratch WordPress themes through our web developer, it usually doesn’t make sense to do so. There’s a myriad of premium themes available that already have the design elements that make sense for nearly every web site we design.
That’s not to say that we don’t have to tweak things here and there. Most of the pages we build have well over 100 lines of custom CSS and we often have to create child themes to tweak functionality but it saves both time and money for our clients to start with an established framework.
If you’re starting from scratch or looking to rebuild your site entirely, the best piece of advice we can give is to start with a premium theme. The free themes you can download from WordPress.org are usually pretty limited and often have hard coded credits to the author’s page. Our favourite resource for premium themes is Themeforest.net. You can usually find a theme that has existing custom post types already tailored to your site’s needs. For example we used the theme Palazzo for the Hartigh Homes web site as it already had the custom post types with the correct fields for listing property for sale as well as having custom elements in the WYSIWYG editor for displaying properties in different ways.
When buying a premium theme, take a look at what it offers for a WYSIWYG editor. This is one of the biggest advantages over the free themes. The built in WordPress editor works fine for blog posts but is very limited in what you can do for page layout and structure. Our favourite editor is WPBakery Page Builder but we’ve also used Divi and other more proprietary editors as well. We prefer Page Builder as it is extensible through plugins and because it can be purchased separately from themes. (Though it is very frequently bundled with premium themes, sometimes on themes priced less than just the plugin).
A good layout editor allows you to structure things where you want them on your page. You can create rows with multiple columns, adjust spacing easily, and set things to automatically move, resize, or disappear entirely when viewed on mobile or tablet. This is especially important now that Google is moving to mobile-first indexing which means that your page’s rank is based on content and usability on mobile rather than desktop.
Building your site with the right tools from the beginning will make it much easier to maintain your site.
Enhancing Your WordPress Site
The next thing to keep in mind is the behind the scenes stuff. The things that aren’t immediately visible to the direct page visitor but affect how the site is seen on Social Media and in search engines.
The most popular SEO plugin (and the one we use) is Yoast SEO. This plugin allows you to easily set all the proper meta and open graph tags that are used by search engines and social media. Without these tags in place, Google, Facebook, Twitter, and many other sites just grab the first couple lines of text on the page and the first image that loads as the preview image. This is certainly a less than ideal situation as this content may not accurately represent what that page or post is about. Yoast also offers suggestions on optimizing your page for SEO. It’s important to stress that these are just guidelines and not rules. If you followed every suggestion steadfastly you’d have a web site that was built for robots, not for humans and that will actually hurt you in your search engine ranking. When writing the content, always write for humans first and for search engines second. (We’ll cover that later in a separate blog article)
It’s also important to consider page optimization. Without a caching plugin, your site’s server has to regenerate each page with every single visit. This can mean pulling information from upwards of 100 different files greatly taxing the processor of the server your site is hosted on. This is especially problematic with shared hosting on most of the popular hosts out there. These companies will stack as many web sites as possible (usually hundreds) onto a single server and will outright shut down a site that hasn’t been accessed in a while which can mean boot times of 10-15 seconds before your site even starts to load for the next visitor. Do your research on your hosting. Tallack Media offers shared hosting with a much more limited number of sites meaning your site doesn’t get shut down just because no one has visited in the last hour and that there are significantly more resources available to load your site quickly.
Caching plug-ins pre-render each and every page on your web site so that when a visitor hits your site, the server just has to deliver the already rendered page. This can improve load times by more than 90% especially on shared servers. There are both free and paid plugins for WordPress caching. On this site we use WP Rocket which is a paid plugin with a yearly subscription fee but it does have the best performance of all the plugins that we’ve tested and is incredibly easy to setup.
If you can’t afford (or justify) the price of a paid caching plugin, the free ones can get you close to the same performance gains, they just tend to be trickier to configure. For free plugins, it can be hit and miss depending on your theme and your hosting. We’ve used the free plugins W3 Total Cache, WP Fastest Cache, and WP Super Cache and have had noticed the greatest improvements with WP Fastest Cache even though it has the most clunky interface of the three. You’re best to try each (making sure to read the documentation on how and why to turn features on and off) on your site to see which plugin works best for you.
Alongside caching, you also want to ensure that the images on your web site are correctly sized and properly compressed. There’s no sense having your web site use a 10+ megapixel image when all the visitor is seeing is a 300×200 pixel image. The general rule of thumb is that for small images, you want to use files approximately double the displayed resolution. This is to accommodate retina displays and other high DPI screens used on phones, tablets, and higher end laptops and monitors. For larger images that take up the full width of the screen you can usually get away with a 1600×900 image however you can go as high as 1920×1080 for a little extra clarity on those high resolution screens.
There are several different plugins out there for optimizing your images, most offering both free and paid tiers. There’s also two types, lossy and lossless compression. Lossy formats will slightly decrease the quality of the images but can yield much smaller file sizes over lossless compression. Lossless compression means that the images won’t lose any quality when compressed but you won’t see as significant of improvement in file size. The plugins we’ve had the most success with are Imagify (lossy) and EWWW Image Optimizer (lossless). We have gotten significantly smaller file sizes by using the lossy method and the quality difference really wouldn’t be perceived by 99% of your site visitors unless they were looking incredibly closely at the images. Imagify offers up to 25MB of optimization per month for free (enough for small sites but not enough for image heavy web site.) EWWW offers a paid service that enables lossy optimization.
Optimizing your site will improve the experience for your users but it will also improve your page ranking on Google and other search engines and page load time is one of the factors that can affect your position.
Testing and Resubmitting to Google
Once you’ve taken steps to optimize your page it’s important to test the results. Google has their own tool PageSpeed Insights and there is also Pingdom and GTMetrix for testing your site’s load time. By using the methods listed above, we were able to get the filesize and load time of the main Tallack Media page from over 5MB and more than 10 seconds down to 1.5MB and less than three seconds as measured by Pingdom.
Once you’re satisfied with the results, be sure to re-submit your site on the Google Search Console. This tells Google to re-visit your site (crawl) to update it with the changes you’ve made. It’s also important to submit your sitemap to Search Console to ensure that every page on your site is found. Yoast will create a sitemap for you and can be found by default at YOURDOMAIN.com/sitemap.xml. You can control what pages are found in your sitemap by going to the Content Types tab in the Yoast Search Appearance page in your WordPress Dashboard. If you’ve never used Google Search Console before, Google has created a guide on how to use it.
If you’ve followed all the recommendations on this guide, you should see a noticeable improvement to your page ranking in a few days.
