We have updated our Privacy Policy and Privacy Options

Got It

Three Ways a Clean-Coded Website Improves Optimization

Share

Building an online optimization test is different than building a website. It requires developers to adjust the code to fit the requested modifications. How well (and quickly) this can be completed depends on the existing code. Developing a clean framework during the initial stages of coding a website will produce enormous benefits on future optimization efforts.

Selectors
When developers are creating a test, they use HTML selectors – including IDs, class names and tags – to change the style and placement of items on a page. If a page has nonexistent or unreliable IDs and class names, developers need to rely on tags and use selectors such as:

div > div:nth-child(3) > a

to pinpoint the elements which require modification. If there are slight changes to the page during the test execution (just one <div> moved, for example) the selector will not work anymore and the test will break. Additionally, when a developer uses selectors like the one above, the test will take longer to build. The developer will need more time to find selectors and may need to add their own IDs, or class names in the code to ensure it works.

An example of a more optimization-friendly page would have HTML split into sections, each beginning with a unique ID and clear class names for elements within each section. Suppose you’re trying to target the same <a> element as in the example above, but with the selector:

#mainNav  .categoryLinks > a

It’s much clearer what is being targeted. As long as the #mainNav element and its children stay consistent, the modified code with that selector will be safe even if the other elements on the page are moved around over the test duration.

Consistency
At Brooks Bell, we often build tests to run on multiple pages. For example, we may run a test on every product detail page (PDP) of a client’s site. If there is code variance between pages, it will increase the development and quality assurance (QA) efforts required.

For instance, if your site sells men’s, women’s, and children’s clothing and the markup for each page type is different, running a site-wide PDP test would become more complex. Even though you’re running one test, it will take three times the amount of work for your developer to create the same experience on each of the three PDPs.

Some variance in markup across pages may be impossible to avoid, but keeping HTML as consistent as possible throughout your website will increase developers’ efficiency when building tests.

Changes While Building Optimization Tests
Sometimes it can take a few weeks (or even months) from the time a developer begins to build a test to the time it launches. There may be a lot of back and forth between departments, requiring multiple changes from the developer at different times. If the developer makes these changes on code they wrote for a page that has fragile, inconsistent selectors, or if the developer needs to make these changes three times for three different page types, it increases the chances things will go wrong and mistakes will occur. If the developer is building a page with clean code, however, these changes are more likely to go smoothly.

Conclusion
The cleaner the initial code is on your website, the easier and faster it will be to build tests. This will also help eliminate any issues with flicker, increase load speed and minimize QA issues.  Spending the time to create clean code from the start will save you time and energy in the future, and developers aiding in your optimization efforts will thank you!

Aly Pilkons, Junior Optimization Engineer
As a Junior Optimization Engineer at Brooks Bell, Aly Pilkons builds and QA’s test pages for clients like Barnes and Noble, SunTrust, and Ralph Lauren. She specializes in JavaScript, HTML, and CSS.  Aly holds a bachelor’s degree from Hampshire College and is an Adobe certified expert in Adobe Target.