WordPress is a pretty fantastic platform for building websites, especially for non-developers! There are a ton of free themes available that can fit your needs, there are tutorials on how to do everything from creating a basic blog to a complex e-commerce site. There are plugins for all these things and more! Creating your own attractive website has never been easier!
So now, after hours (perhaps days or weeks) of diligent work creating your website in WordPress you’re happy with how it looks and publish it to the web! It looks great, you tell your friends, family and colleagues. You publish your site to Facebook, Twitter, LinkedIn. Life is good! Right?
There are some things most WordPress beginner tutorials don’t tell you. Things like performance of your site, or accessibility. Things that most themes don’t take into account either. They look fantastic, but how do they perform in the real world? Can a blind or low vision person navigate your site comfortably? Does it eat up all your mobile users bandwidth loading a gallery page? How quickly does your site load?
WordPress Performance, SEO isn’t Everything!
So, you’ve installed an SEO plugin and you’ve been very careful to make sure your page titles, headings and content are great for SEO. All your images have good alt tags, your content is legible and of decent length.
That’s great! You are on your way to getting ranked higher on Google and getting more visitors to your site! But what happens when they get there? Getting visitors to your site is only the first small step, converting them or having them consume your content is what you really want isn’t it?
If your site performs slowly there is every chance your visitors will leave before you can get your message through to them. There is a great article at Hobo SEO that delves into site performance metrics and how they impact users.
A presentation by AliExpress claimed they reduced load time for their pages by 36% and recorded a 10.5% increase in orders and a 27% increase in conversion rates for new customers.
By the way, Google does take performance into account in their ranking, slower sites will rank lower than faster sites all other things being equal, so it actually does matter for SEO purposes too!
What Can I Do about My Site’s Performance?
Thankfully there are a number of very good tools to help you gauge the performance of your website, and even give you tips on how to solve any issues they find.
My personal favourite, although I use most of the tools I am about to mention when testing sites, is GTMetrix. I like this one because it’s very simple to use, tests using Google’s PageSpeed as well as the Open Source YSlow project. It also gives you a waterfall view, showing you what resources your page is loading and how long each resource took to load.
After your page has been analyzed you’ll see a page that shows your page’s scores on Google and YSlow, as well as the time it took for your page to fully load (which is the full load of everything, usually your page will be visible faster than this if it’s built right), the total size of the page and the number of requests (each item your page loads, this includes images, css and javascript files etc.). Beside each of these statistics is a small chevron. A green up chevron means your page is faster, smaller or makes less requests than the average page tested by GTMetrix. A red down chevron obviously means your page is slower, bigger or makes more requests than the average.
Below the header you are presented with Google’s PageSpeed report, this is a list of rules it checks with the grade for each rule. You can click on each rule to see how well your page did and ways to fix any possible issues it found.
Some of the solutions are going to be technical, you can search Google for help on how to implement them.
You can click the YSlow tab to see a very similar list with their recommendations (they have some rules that are slightly different than Google’s). The list is in the same format, click a rule to see how your site performed and any solutions to issues found.
The Waterfall tab is not based on any rules, it shows each of the resources your page loads, the order in which they load, the time and size of each resource. Hovering over one of the graph lines gives you details about that particular item. How long it waited to start, load, whether it is a blocking item or not (blocking means other items lower in the list have to wait for that item to load before they can start loading). This is a really nice way to see if there are any bottlenecks holding up your page loads.
There are a couple of other nice tools to help gauge your site’s performance
- Pingdom – Is similar to GTMetrix but they use their own grading system, they also have the really nice feature of being able to test your site from different locations world wide!
- Google PageSpeed Insights – Hey, you’re trying to rank on Google right? What better tool to use than their own? Okay, honestly I feel the first two are better overall tools, but PageSpeed Insights does have the benefit that it shows you desktop and mobile performance, which is cool! There are some rules it applies to mobile that I find to be frustrating though, things like not loading fonts before the page (if you load fonts after the page loads you’ll see a brief flash of unformatted fonts before the real ones load, the trade off in performance vs that flash is negligible, I ignore this rule). So don’t be too dismayed at a lower mobile score.
What about Accessibility?
Web accessibility is a very complex subject that is mostly beyond the scope of this article. Moz has a very good article discussing accessibility as it relates to SEO that you may want to read.
I am only going to cover one tool relating to accessibility and that is the WAVE (web accessibility evaluation tool) which will give you the basics of getting your site to at least be accessible for low vision/blind users.
When you enter your your site’s URL in the WAVE tool it will load your page with a sidebar on the left. This sidebar initially shows you the number of errors, alerts and other elements it finds on your page in a summary. If you click the small flag tab it will show you these things in a detailed view.
Clicking one of the items in this view will scroll your page to the place that element exists. There is a small “code” tab at the bottom of the page, clicking that will also show you in the code where the element exists.
Primarily here you want to find and fix any of the red errors it finds. Most often in WordPress themes these are going to be bad form elements or empty links.
Each item will have a small question mark beside it that you can click for more details on what it means and possibly how to fix the problem. Be forewarned, almost always accessibility errors can only be fixed in code. You might need help fixing these if you aren’t comfortable working in HTML.
Still Have Questions?
I understand fully, some of the things you’ll see if you use the tools I mentioned above are a bit daunting, but have no fear, this is the Interwebz after all. There is a ton of information at your fingertips to help you sort out these issues (if you have any, if not great job!) and give your users a better experience on your site.
If you still have questions, you can of course give us a call at 905.515.4951, fill out our contact form or shoot us an email and we’ll be happy to help you out!