Debugging into the code and related page resources—HTML, CSS, JavaScript and images—isn’t actually that much work.

You’re not committing to a full site redesign. Instead, there are many simple checks you should be doing anyway to optimize all the weather of your site. Developing a far better understanding of how the browser pulls in and renders all of your page resources can help, too.

Simplify Your HTML

Your first step is optimizing the HTML itself. It’s a good idea to go through your basic HTML markup and confirm you’re following modern conventions. Start by making sure your code is clean, readable, and not using any unnecessary tags.

I also recommend getting on board with semantic markup: separating content from its styling and stripping the HTML down to only the required elements will help you get organized. In 2008, Chris Coyier wrote a superb primer called “12 Principles For Keeping Your Code Clean.” Most of the principles still apply.

HTML5 brings new features that enable you to reduce semantic markup even further. There’s a new, simpler doctype, and new tags like <header>, , , and that map directly to ele‐
ments of your page.

Put Your CSS and JavaScript on a Diet

Externally referenced CSS and script files cause additional resource requests and round trips, but can be cached by the browser. Even small files incur trip costs that cause latency, whether or not bandwidth is a performance factor.

DNS lookup also causes latency, so minimize the number of different DNS lookups needed to load critical resources.

Further visits still got to request the info , though it are of ten fetched from the cache, which is faster. But remember: you only get one chance at a first impression. Make
sure that initial experience is a good one.

Minification makes externally referenced files smaller and more efficient. Combining your CSS and JavaScript into as few files as possible also reduces the number of requests.

Remember, each file you need to load requires its own request and response (and potentially a DNS lookup as well).Don’t use the CSS @import directive as a shortcut to combine stylesheets—it doesn’t work like compiling code; the browser still needs to request both files.

If you like this post, don’t forget to share 🙂

This article is written by our awesome writer
Comments to: How to optimize a website perfectly

Your email address will not be published. Required fields are marked *

Attach images - Only PNG, JPG, JPEG and GIF are supported.

New Dark Mode Is Here

Sign In to access the new Dark Mode reading option.

Join our Newsletter

Get our monthly recap with the latest news, articles and resources.

By subscribing you agree to our Privacy Policy.

Latest Articles

Explore Tutorials By Categories

About

Codeverb is simply an all in one interactive learning portal, we regularly add new topics and keep improving the existing ones, if you have any suggestions, questions, bugs issue or any other queries you can simply reach us via the contact page

Login

Welcome to Codeverb

Ready to learn something new?
Join Codeverb!

Read Smart, Save Time
  •  
    Strength indicator
  •  
  •  
    Log In | Lost Password