Ok, your website consists of a bunch of codes, wouldn’t it be nice if you knew how to optimize your codes to have a faster website? I bet it would. Here’s the 2nd article on speeding up your website. Speed up your website: 2 – Optimize your codes HTML, CSS & JS.
Table of content:
- Intro: How browsers render website codes?
- Optimization: Best practices to optimize the load of your website
- Minify HTML, CSS & JS
- Unused JS & CSS: Avoiding & removing them
- The Shortcut – Sum up in a paragraph
Useful articles:
- General tips, mistakes, elements & optimization
- Optimize website content – Images, videos & fonts
- Caching – best practices, mistakes and WordPress plugins
- Hosting (The absolute best & fastest WordPress hosting ever)
How to 100% speed up WordPress Website – Step by step guide (not the regular tips)
Intro: How browsers render website codes?
A website is essentially a pack of codes. HTML, CSS, JS etc… Every time you visit a website, your browser requests to access the server and then starts rendering the codes in that directory (domain).
Here’s the role of each language:
HTML – Is the structure of your page.
Example: Sections, columns, headings, paragraphs, links, etc…
CSS – The style of elements in your page.
Example: Colors, button styles, paddings, background, etc…
JavaScript – All the functionalities that accrue after the loading of the page.
Example: Open a popup, accordions, toggles, entrance/scroll animations, etc…
Here’s an article that explains the process in detail, I mean in very details.
Optimization: Best practices to optimize the codes on your website
Aight aight aight, I’m not going to lie, you need to focus here, this is not simple, it is not. So pay attention and proceed step by step.
I will point out a list of optimizations for general websites AND for WordPress websites:
Optimizing HTML:
This is rather simple, don’t over complicate your page. Don’t make it too long, with 2 columns, then 3 columns, then 1 column, then 3 then 4 then 3 then 1… The less structural changes the better.
If any content needs a very detailed and long explanation, then create a new page for it. This is also better for SEO, especially if the topic has a decent amount of searches.
Optimize HTML in WordPress & Elementor:
Nothing very special for WordPress & Elementor. Just make sure when you have a lot of 1-2-1-3-4-1 structures, don’t create a new section every time. Add the Inline element, this way the hierarchy stays the same however the browser doesn’t render 4-5 sections, rather 1 section with multiple outlines.
Optimizing CSS:
Focus, remember to stay focused. Whenever the browser loads a page, it first renders the HTML to understand the structure of your page, the elements and stuff. Then it renders the CSS to give them styling.
There are 3 ways to add CSS to your elements:
1. Inline CSS
The CSS you directly give to the element. This is usually good for faster loading of the page, because the browser doesn’t have to render additional files (external CSS file).
Example: <p style=”color:#4c4c4c; font-size:18px;”>text</p>
Advantages:
- You can add your CSS way faster.
- You can customize each element on its own. (not something you might want to do tho)
- No need to have a separate CSS file to upload.
Disadvantages:
- Time consuming, as you have to add the CSS to each element separately.
- It’s super hard to keep track of the maintenance, as with every change you will have to change each element separately.
- Having multiple elements styled inline will affect your page’s size.
2. Internal CSS
The CSS is defined for a single page. You define each element’s CSS for that particular page.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
}
h1 {
color: red;
padding: 60px;
}
.
.
.
</style>
</head>
<body>
<h1>External CSS file</h1>
<p>This is a paragraph.</p>
</body>
</html>
Advantages:
- No need to add multiple files because you have the CSS in the HTML.
- You have some customization options.
Disadvantages:
- Adding the code in the HTML file will increase its size and loading time.
3. External CSS
This is an extra file that you create which defines the CSS styling and you link to it in your HTML.
Example: <link rel=”stylesheet” type=”text/css” href=”style.css” />
Advantages:
- Since the CSS is in a separate file, your HTML will be cleaner.
- Your browser will be able to cache the CSS, thus have faster load times for other pages.
- You can point multiple pages to the same CSS file, saving time & resources.
Disadvantages:
- You might have some rendering issues.
- Having multiple CSS files and linking to them will slow your load time.
The best option for adding your CSS files?
- Create external CSS files for all the similar pages, for 95% of the content, and inline CSS whenever necessary.
- Make sure you don’t fall-off of your initial styling on multiple elements, in other words, be consistent.
- For all similar pages add the same CSS file.
- Live the good life baby.
Optimize CSS in WordPress & Elementor:
- Set your website’s styling from Elementor’s Site Settings sections.
- Avoid editing every item on its own.
Sources:
https://www.hostinger.com/tutorials/difference-between-inline-external-and-internal-css
https://hostpapasupport.com/understanding-inline-internal-external-css-styles/
Minify HTML, CSS & JS
All the coders & developers write their codes in a certain style, usually with extra spaces, line breaks and stuff. Minifying HTML, CSS & JS removes all the extra characters, making it lighter and faster to be read.
To minify HTML, CSS & JS:
Connect a Cloudflare, the tools allows you to do it.
Here’s another way of doing it by Google. https://developers.google.com/speed/docs/insights/MinifyResources
Minify HTML, CSS & JS with WordPress:
There are two plugins that do the job perfectly, Autoptimize & W3 Total Cache.
Unused JS & CSS: Avoiding & removing them
This is rather complex, imagine having all your website’s CSS & JS files as external files and linking to them in your HTML. Every time a web page is loaded, the browser loads every piece of CSS & JS, however some elements or functionalities might not be present on that particular page. Got the point? This means, your browser is loading a lot of pieces of code but using only some of them.
This is usually the case when you create a single file for each of CSS & JS codes, and include all the functionalities and styles in there. However, some functionalities are meant for only certain pages. But they will still be loading for all the other pages that it’s not being used on.
To avoid them, create different CSS & JS files for pages that have specific functionalities, this way they won’t load on unnecessary pages.
However, if you ever face the issue and you yourself can’t do it, then consider using inline CSS for every page, or use a faster hosting. Here’s the fastest & most affordable WordPress hosting I know.
The harsh truth about removing unused CSS & JS – Speed up your website
The Shortcut – Sum up in a paragraph
- Avoid having long pages with many sections.
- Avoid using Internal CSS.
- Use external CSS files for pages that have the same styling and elements.
- Use inline CSS whenever necessary
- Minify your codes.
On WordPress & Elementor:
- Avoid having multiple sections with columns, instead use the Inline Section element.
- Set your website’s styling from Elementor’s Site Settings section.
- Use minify & cache plugins – Autoptimize and/or W3 Total Cache
