Performance is the New SEO: Use it Wisely
Join the DZone community and get the full member experience.Join For Free
1. The Classic: SEO
When the internet finally reached the big masses, getting your site noticed became increasingly difficult on an ever expanding web. Around the same time semantics came into play after years of abusing HTML for whatever designers asked us to make. Seemingly unrelated at first, those two concepts would find each other in a rather unlikely marriage.
Semantics made things a lot more difficult though. Writing HTML became a skill that actually required knowledge of the language. Then again, it benefited CSS, accessibility and machines alike, but sadly those three arguments were hardly convincing. Especially when implementing these new HTML structures lead to back-end development issues (which it always did, as all of sudden the default CMS code wasn't good enough any more).
But then SEO came along and thanks to Google SEO became the perfect wave for us HTML guys to latch onto. Correct use of headings, paragraphs and tables ... they were all taken into account when determining the position of a site in the search results. This opened up a path that forced people to take notice of our HTML. It was a lever we used to force our own HTML in a project so that not just CSS and accessibility would benefit, but that we were finally able to deliver some properly structured HTML code.
2. Updating the Classic: Responsive
Nowadays CMSes churn out pretty acceptable HTML, at least from an SEO perspective. Most of them are still pretty html5-agnostic, but the SEO-argument has definitely lost some of its weight. That doesn't mean we just have to comply with the default HTML of popular CMS systems though. Our new lever: responsive web design.
Position:absolute; and box:flex; are our life savers here. They require specific structures that are often lacking in default CMS code, meaning custom HTML code is actually required to make everything work in a way that doesn't break a page whenever it appears in a different viewport.
3. The New Kid on the Block: Performance
Performance is our lever when we want to scale down the functional complexities. Recently a lot of tools have appeared to help us determine the exact impact of certain techniques on the overall performance of a web page, which is a great help when trying to block those exact functional demands from being implemented.
A Word of Warning
Just remember though: while the three arguments above are all valid, they are not holy. If you go around yelling at everyone they can't have X or Y because of performance and they need to implement Z because of responsive needs without solid arguments to back up your claims, you're not going to be working on the project for very long.
Use the above arguments in valid cases, but when such a case present
itself you can try to use it as a lever, sneaking in some extra bits and
pieces that will improve the overall quality of the front-end code.
Trust me, everyone else is doing this already (designers, information
architects, back-end developers), so don't feel too bad about it. Just
don't be too obvious when you're doing it.
Published at DZone with permission of Niels Matthijs, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.