I have never deployed my code and passed all the below-mentioned 9 steps at once. There were always things I misspelled or didn’t go deep into the standards, or there was a code snippet that highly affected the website’s performance, and so on. Sometimes those mistakes were just small enough to go unnoticed, but in some cases, they caused performance decline and accessibility issues. But if I had taken the time to detect them right after deployment then I would avoid all the negative consequences.
Here is the list of steps I take after every deployment to ensure that my projects are running smoothly and without any glitches.
Check the code for JavaScript errors
JavaScript errors are often detected during build time, but sometimes they come up only on production. The first step to take is simply to open the developer tools and check for any messages sent by your scripts in the Console tab. But in order to save time and don’t check every single page manually I prefer using online tools. My personal favorite is Hexometer — very simple and offers monitoring service as well.
Validate HTML and CSS (W3C Check)
When you are developing a website, it is important to check the website’s W3C validity. This will help to avoid many potential problems in the future such as user experience drops or browser incompatibilities due to having W3C errors on the pages!
Checking W3C validity is simple, just visit https://validator.w3.org/ and provide the URL you want to debug.
Test the forms to see if they are submitting correctly
I know how frustrating it can be when a user reports that your form isn’t working properly on the website. To avoid any possible issues with your website, check all of its forms every time after deployment — this will ensure that everything works as expected.
To test this manually just put the form through its paces by filling it out multiple times and making sure that the data is submitted correctly each time. But there are also testing tools out there that will help to automate the process and ensure that no mistakes are found on the way.
Make sure that all the pages are loading correctly
There is always a possibility that issues will arise after deployment that could result in accessibility problems such as styles not loading correctly or a change on one page causing an issue elsewhere. Nearly every website has this problem at some point, but it’s easy to overlook when you’re just browsing. If left unnoticed the issue can lead not only in decreased user experience on the website overall — which will turn off visitors and potential customers alike — but also other consequences.
The pages can be checked manually or by using online change detector tools that monitor the visual changes on the webpage such as Hexowatch. You just provide the page URL and set the interval of the monitoring. It will notify you in case any visual change will be detected.
Check the spelling
The way you communicate with customers can make or break their experience. Make sure that what comes out sounds professional and correct, especially when it comes to things like grammar (spelling). Developers usually don’t spend much time proofreading the content, so to avoid neglectful mistakes it’s important to keep the track of spelling.
The easiest way to do it is using online monitoring tools such as Hexometer which provides a PDF with the mistakes found and possible replacements.
Get the updated list of tech stack
Checking the website’s tech stack after deployment is important for two main reasons. First, you want to avoid issues caused by library version updates which may go unnoticed during build time but could lead your page crashing or misfunctioning as a result of an upgrade in libraries used on the website. Second, check if newly added technologies are reliable and suitable for the project — this will ensure that you don’t end up wasting resources from using something unnecessary later down the road.
Again this is easy to check with online tools such as Hexowatch. It will notify you when any change in your tech stack list will be detected.
Analyze the website’s performance
Analyzing the performance of a website is an essential step in improving user experience and driving more conversions. One of the crucial factors is the website load time, or how quickly a page becomes fully visible on screen after being clicked. High website load times can lead to poor user experience, as users may grow impatient waiting for pages to render and may decide to navigate away from the site.
Usually, performance issues are not noticeable during developing the website on the local environment, but on production, you face slow loading and even page crash issues. That’s why you should monitor the page performance to keep your website running smoothly.
The easiest way to check the performance is to use the Google PageSpeed Insights tool. You just need to enter the URL and it will provide the page performance metrics with possible optimization suggestions.
Check that the site looks good on different browsers and devices
Browser and device compatibility is a must when it comes to website development. After all, you want your website to be accessible by as many people as possible, regardless of what type of device or web browser they are using.
To ensure that your site is looking its best on different browsers and devices, you should carefully check its appearance at various screen resolutions and across different operating systems. Additionally, be sure to test it out on both desktop and mobile platforms, since the layout often differs significantly depending on which type of device you are viewing the website with. There are a couple of ways to test for compatibility, but one of the easiest is simply to open up the website in different browsers and on different devices and see how it looks or use online tools.
Verify that there are no broken links
Links that lead users to an error page or do not take users to the appropriate destination will negatively impact user experience and SEO. Users will not be able to find the information they are looking for and SEO rankings will drop. To prevent this from happening you should quickly detect the broken links and fix them before they cause any damage.
Manually detecting broken links on the website may be time-consuming and there will be a possibility of missing some of the links, that’s why I recommend using online tools. There are lots of good ones that will keep an eye on your website’s health and notify you about link status changes on the website. With the combination of the earlier mentioned tools, Hexometer monitors also the broken links.
This is pretty much it. The steps are quite simple to implement especially if you are using online tools to automate the flow, but will definitely help you to avoid headaches caused by neglectful mistakes and always keep your website’s health and performance on top.
Building Clickable Breadcrumbs Component for Angular