Test Browser and Mobile Compatibility
You probably only use one browser, but the rest of the Internet uses a wide variety of browsers. You should test your site in Chrome, Firefox, Edge, and Safari. Check to make sure your site looks the same, as certain browsers can handle CSS differently. For example, intrinsic & extrinsic sizing ( width: fit-content ) has a few bugs in Firefox, so you should make sure you have fallbacks in case the browser doesn’t know how to handle it.
It’s up to you if you want to support the 2% of users stuck on IE 11, as many modern CSS and JavaScript features may be broken, and may require workarounds or fallbacks for IE. You can use the CanIUse to check compatibility of different language features. For example, the prefers-color-scheme media query used for automatic dark themes on websites is supported in the latest version of Chrome and Firefox, but isn’t supported in IE or Opera, or on Chrome for Android.
Mobile support is another major issue, and requires more work than browser support. But this goes further than just making sure it works on your phone—you’ll want to make sure your site looks good at every resolution. This is called responsive design, and is a big part of modern web development. Chrome has very good tools for testing this; you can open them by right clicking anywhere on your site and choosing “Inspect”. Then, select the mobile devices icon in the top-left corner, and select “Responsive”:
You can drag the handles around your site to change the desktop size, which you can see in terms of pixels at the top. Additionally, you can select different mobile devices to see what it will look like at that resolution.
You should still test on real mobile browsers on real devices, as they have different properties and different user agents. Additionally, you should check your site from a VPN so you can change your country of origin. Make sure nothing strange is happening to the ads in particular, as those can be region dependent.
Test For Speed
People are incredibly lazy, and your site needs to be as fast as possible to catch their attention quickly. Even if your site takes just three seconds to load, 53% of mobile users have already left your site.
You can use Google’s PageSpeed Insights tester to test your website’s speed. It will analyze your site, and give you a list of recommendations for desktop and mobile on how to fix your speed issues.
Your speed directly affects your rankings in search engines like Google, so it’s important to stay up to par with the competition.
Make Google Happy (SEO)
SEO is a complicated subject, but here are a few tips to help out your site’s ranking.
You can test your SEO manually with the help of services like Moz, Ahrefs, and Screaming Frog. These will crawl your website and monitor your analytics to let you know how you’re doing. You should also check for broken links with a spider tool, as they can negatively affect your SEO. You should have an XML sitemap for your site. This acts as a directory to help Google index it. You don’t have to make this manually though; there are WordPress plugins like Google XML Sitemap, and many online generators. Then, you can submit it online, or make it available through the Sitemap: directive in your robots. txt file. Speaking of, check your robots. txt file to make sure you’re not disabling search engines from crawling your site. Optionally, you can disable certain routes like /wp-admin that search engines should ignore. Your social metadata should be set correctly. This is particularly important to tell other sites how to embed your pages, whether that’s as an article, video, or general website. You can use an online tool to generate these. You should look into Google’s Structured Data features, as it can greatly improve your search presence. For example, if your page is an article, you can include the structured data as JSON to tell Google what the hero image, headline, and lede are, so it can display it in Google News. There are all kinds of content types, so you’re certain to fit in somewhere. If you’re using Google’s Accelerated Mobile Pages, you’ll want to make sure it’s valid. You can use their online tester to test the AMP version of your site. The major requirement for AMP pages is that JavaScript is not allowed, other than the experimental amp-script. It’s a good idea to validate your HTML to make sure there are no major issues, although perfect W3C validation is very strict and you don’t have to abide by it completely (most sites don’t)
Make Sure It’s Accessible
Disabled people use the internet too, so you’ll want to make sure your site is accessible via a screen reader. Usually this means adding alt text to images, properly marking your site’s landmarks, making sure keyboard navigation works correctly, and making sure labels are properly set.
You can use the userscript tota11y from Khan Academy to debug your site’s issues. This will display a button in the corner that lets you check things like contrast, heading order, and labelling issues, and it will show you how a screen reader will see your site. You can read our full guide on fixing accessibility issues to learn more.
Install an Analytics Tool
Analytics tools monitor and log the traffic on your website. It’s important to have one running from the start, collecting data in the background. Even something as simple as Google Analytics to collect traffic data lets you know how your site is doing.
After you launch, you can also make use of A/B testing to land on a design that’s optimized and achieves its goal as often as possible. This is particularly important on landing pages, shown to users coming to your site from your advertisements, as improving your conversion ratio means you get more revenue per dollar spent on advertising. You can read our review of a few popular analytics tools to learn what’s right for you.
