11 Essential Checks Before Launching Your WordPress Site
So after designing, implementing and testing your site, you are finally ready to make it live. But a website is more than just a bunch of images, text and some ninja JavaScript magic tricks. Having published quite a few websites of my own, I realized that there are many things a web developer needs to check before making his/her site live. For my own future reference, and for anyone else who is about to publish a new website, I have decided to organize all of these post-development steps into a single checklist.
Use HTTPS instead of HTTP
Yes — HTTPS is no longer optional. Google will soon start to penalize sites that use HTTP by demoting them in the search results. I’ve written an article that explains how to set up a HTTPS site, or to move an existing HTTP site to HTTPS in a WordPress environment.
There is a reason why this is the first step — the longer you wait before moving to HTTPS, the harder the process becomes, and the greater the impact on the site’s traffic is going to be. That’s because changing the protocol actually causes you to lose all your social media likes, shares, tweets etc (just the figures), since they consider it as a different URL. As of the writing of this article, there is no solution to that, so it’s a good idea to use HTTPS from the beginning.
Debug Social Media Appearance
How does your site look when it is shared in the social networks? What title is used? Description? Thumbnail? It is very important to know how your site appears when visitors share your site, or articles within your site. Some social networks like Facebook and Twitter offer debugging tools that provide information regarding a given URL and even let’s you see a preview of the URL when it is shared.
Facebook uses Open Graph meta tags to get the title, description and preview image of a given URL. You can use the Sharing Debugger to test your URL. Twitter also offer their own tool. And there is also a free online tool that let’s you test for all the major social networks at once, called iframely.
The Yoast SEO plugin for WordPress provides an interface for controlling your social network appearance. It let’s you choose your Facebook/Twitter preview image, title and description, among other things.
Check Cross-Browser Compatibility
This step is no fun, but it’s a must. When I initially started developing websites, this step was a nightmare. The difference between each browser’s rendering engine was so great that I felt like I was developing a different site for each browser. This is no longer the case, since browsers nowadays abide mostly by the W3C specs & standards, but there are always new & experimental features that you want to make sure are working properly on all browsers.
You can check for browser compatibility manually by installing all the major browser on your machine and simply running your site in each of them. I usually develop my sites on Chrome (which offers the best developer tools in my opinion, and is also the most popular browser), and then test in Safari, FireFox, IE and Edge. The market share of the other browsers is negligible and you can simply ignore them.
If you want a more comprehensive tool for browser testing, browserstack.com is a good option. It lets you see how your site appears in different browsers simultaneously, making the testing process more effective.
Check your Page Speed
We all know that if a site takes longer than 3 seconds to load (some will say 1 second), the user will not bother with it. There are many things to take into account when testing for site speed, including server response time, number of HTTP requests within the page and content size (images, CSS, JS etc.). There are 2 main tools that I use to check for page speed: Pingdom & Google Page Insights. The latter actually lets you download the compressed version of all the assets in your site. This is particularly useful when it comes to images, because you can simply download and replace your uncompressed ones (Google uses a lossless compression tool).
To further improve your site’s loading time, consider concatenating JS & CSS into a single file and leveraging browser cache using a WordPress plugin like W3 Total Cache. I don’t recommend using a plugin to minify your scripts and styles as it tends to slow down the server processing time. Instead, use a tool like GruntJS to minify your scripts and styles prior to launching your site.
Check Mobile Friendliness
Mobile devices are now widely used to surf the web, even more than desktops, as the majority of digital media consumption now takes place in mobile Applications.
On top of that, Google won’t show non-mobile-friendly websites in their search results, if the search is done through a mobile device. To help web developers, Google recently launched a new tool that checks whether your site is mobile-friendly or not.
Validate HTML Markup
Use the W3C HTML Markup Validator to make sure your site is using a valid HTML markup. The tool can help you find elements that are missing important attributes (like the ‘alt’ attribute for images!!) as well as missing closing tags, obsolete HTML elements and more.
Eliminate Console Errors
Use your favorite tool — mine is Chrome DevTools — to debug your JS and see if there are any errors or warnings in the JS console that needs to be taken care of. Similar to CSS — different browsers may generate different JS errors so you may want to open the console in different browsers to make sure that everything is OK.
Check Links
You can use the W3C Link Checker to make sure that you don’t have any broken links in your site. The tool can be used to recursively test all the pages in your site. The validation process may take a few minutes, depending on the number of links in the page.
Add A Favicon
Having a favicon is an important part of your site’s identity. Favicons are used in browser’s tabs and mobile apps (When a user saves your site as an “application” in his/her mobile device).
Fortunately, since WordPress 4.3, adding a favicon is an extremely simple process that can be done through the customizer. WordPress will automatically add an App icon as well.
Analytics
Connect your site to Google Analytics to get useful insights regarding the traffic coming to your site. Most themes usually allow you to add your tracking code to every page of your site automatically. If your theme doesn’t let you do it, you’ll have to manually insert the tracking code to footer.php. Another option is to use the Jetpack WordPress plugin. Jetpack provides site statistics, although the information is not as comprehensive as what Google Analytics provide.
SEO
As far as SEO, there are 2 important things to do before you launch your site: Add your site to Google Search Console, and submit a sitemap. If you are using HTTPS, you will need to create 2 properties in the Search Console, one for HTTP and one for HTTPS.
Yoast SEO lets you connect your site to Google Search Console, and automatically generates an XML sitemap for you, which you then have to submit to the Search Console.
Conclusion
This is the checklist that I go through every time I launch a website. I hope you find this list useful. Are there any other steps that you take before you launch a site? Feel free to share them with me in the comments.
Originally published at https://blog.askupasoftware.com on December 1, 2016.
