Don’t Judge A Website By Its Cover

Coffee & Code

Front-end Development Best Practices

There are too many nice looking websites that are actually extremely ugly on the inside, not to mention they become a code nightmare behind the scenes.

I blame this bad trend on marketplace themes and templates. Why? Because they’re not built for you! They’re built to be as customizable as possible and that sometimes requires sacrificing best practices.

There are endless ways to optimize your website’s user experience. Each one of these isn’t a whole lot on it’s own but all of them together can really make a difference when it comes to speed and in general, working on the site later on. With this in mind, here’s some quick and easy things you should always be doing (or not doing) when developing a website:

Best Practices for Developing a Website

  • Compress your HTML output and strip comments
  • Avoid using inline styles and javascript
  • Minify and combine your site’s stylesheets and javascript into one file
  • Move js resources to the bottom of your site or load with “defer”; Note: In most cases, javascript is already waiting for the document to load before executing any code so help yourself out
  • If you’re ok with how the site looks without styles for a second (FOUC aka flash of unstyled content), consider loading the site without block rendering CSS. Make sure your stylesheets are lean and only load what you need by media query. I don’t mean media queries in a big stylesheet but link separate stylesheets per media
  • Learn how to create modular and scalable CSS
  • Don’t load unnecessary styles. Often entire responsive frameworks get pulled into a website when only a small portion is needed or being used
  • Don’t load unnecessary js libraries and consider using light versions of these libraries. Pro tip: jQuery offers a light version
  • Only load tracking scripts you need! It’s good to audit your site’s tracking scripts every once in awhile to determine what is necessary and what isn’t being used anymore. I don’t know how many times I’ve run a site speed test on a site to figure out that all the external tracking sources are taking longer to load than the actual page does. Some might be thinking that these should cache after the first request, but most times tracking scripts are set up not to cache. If they cached, that tracking data wouldn’t be accurate. Even Google Tag Manager doesn’t specify a cache validator.
  • Consider the use of a CDN for your assets to parallelize download across multiple hostnames. This will put less stress on your website’s server
  • Avoid non-passive event listeners and executing event listeners without setting a time out. A simple browser resize can fire the same event 50 times in one second and if you’re executing a large function this could really slow things down for the user
  • display:none should never be your first solution to something! Same goes for !important
  • Ever heard of caching?
  • Please, don’t load an image larger than 2000px on any website (I don’t care how pretty it looks). If you still MUST, consider using srcset
  • Keep your technology up to date. Codebase, server, etc. Most major updates come with performance boosts
  • Optimize and clean your database
  • Build your own plugin instead of installing 10 just to leverage 1% of what it does

Web Development Resources

It’s important to understand best practices and why they’re important. Here’s a few resources your web team can leverage to ensure you’re developing websites that are beautiful, both inside and out: