Speed up your website: 1 – General tips, mistakes, elements & optimization

Website speed is one of the most important aspects of any website. And we’re starting some cool stuff, 4-5 articles all on speeding up your website. All the important elements, aspects, mistakes to avoid and results to seek. This is the introduction to the series, Speed up your website: 1 – General tips, mistakes, elements & optimization.

Table of content:

1. Intro – General topics & notes
2. Website speed components
3. Best practices for speeding up a website
4. Common mistakes web developers make
5. The Shortcut – Sum up in a paragraph

Useful articles:

1. Optimize your website codes HTML, CSS & JS
2. Optimize website content – Images, videos & fonts
3. Caching – best practices, mistakes and WordPress plugins
4. Hosting (The absolute best & fastest WordPress hosting ever)

How to 100% speed up WordPress Website – Step by step guide (not the regular tips)

Intro – General topics & notes

Let me quickly brief you on how loading any website works in simple terms (because I don’t know the complex terms).

What is a website?

Basically, your website consists of files and folders. The files are codes written in HTML, CSS, PHP, JS, etc… The codes tell how each file in each folder should behave when it’s opened from a browser.

Where are the files?

Think of it this way, imagine the files are in your computer, and you go to your browser, open the file’s location and access your website.

Now if you want people from different devices in different parts of the world to access your website, you would have to put your website’s files, in other words host it, on servers. So the domain is the location of your files, and the URL slug, the different pages of your website,  is the location of the different folders.

How does the browser understand the website?

The browser is used to access your website’s files on the servers, understand and present its codes.

HTML – The general structure of the website, the columns, widths, structures, background images, etc… 

CSS – The styling, colors, shadows, hover effects, etc… 

PHP, JS, and other web coding languages – They are mostly used for creating functionalities. Behavioral based or other kind of functionalities.

How does the browser open a website?

The browser renders your files, the first is HTML then CSS & JS.

So the browser goes to the domain’s nameservers, which point to the servers where the website is hosted. Then access the files on that server. After accessing the files, it loads them on the browser and executes the codes.

Speed components of a website, and how to optimize each:

Ok, so your website consists of:

1. Codes: HTML, CSS, JS, PHP, etc…
2. Files: Images, videos, audios, icons, etc…
3. The above points are stored on your servers.

How to optimize codes: HTML, CSS, JS, PHP, etc…

For starters, if you’re not a senior expert in web development, then: 

• Avoid having a lot of complicated functionalities on your website.
• Avoid having a lot of design variations for the same elements:
  • 5-6 button styles on a page
  • 2-3 font types
• Try adding the general styling and then let the elements inherit their style based on what they are.
• Minify HTML, CSS & JS whenever possible.
• Avoid heavy animations and effects.

Note: The above doesn’t mean to have a simple website, but it means to think twice before adding something that looks fancy at first but adds no value.

How to optimize files: Images, videos, audios, icons, etc…

Easy, I have a complete article on optimizing images. Also, here some tips to consider:

• Always & always, resize and compress your images.
• Unless transparency is necessary, avoid using PNG formats, use JPEGs or even WebP.
• Lazy load images & videos.
• Avoid hosting large videos on your servers, instead use Youtube or other services and embed the video on your page.
• Do not store unused images, videos and media files on your WordPress.
• Always make sure to set the viewable part of the image as the width. Don’t use 5000px images for 400 width places.

How to optimize servers:

I can’t stress this enough. All your codes, files and media are stored on your servers, and the browser accesses these files and codes through that server. So, if your servers are slow and not competent, then your website will be slow. It is that simple.

Here’s the fastest WordPress hosting.

Your website’s speed heavily depends on:

• Your servers’ specifications – (RAM, CPU, SSD/HDD, etc…).
• How your servers serve the website. How optimized it is.

Best practices for speeding up a website

Since this is rather general, I will only name the best practices, and then later link to each practice’s detailed explanation. Now, let’s go.

Here are the best practices for speeding up your website:

1. Use high-quality hosting. Don’t go for the cheapest, because that might be the slowest. Here’s the fastest WordPress hosting possible.
2. Always resize and compress your images.
3. Make sure all your images are WebP. If you use WordPress, here’s a plugin that does the job.
4. Minify HTML, CSS & JS. You can minify with Cloudflare or the caching plugins mentioned below.
5. Connect a CDN, like Cloudflare.
6. Use caching. Here are two of my favorite caching plugins for WordPress. Autoptimize & W3 Total Cache

Common mistakes web developers make

This is from experience and past mistakes.

1. Leaving website speed to the end:

Usually web developers start worrying about speed only after finishing the website. This doubles the work, as now you have to check images, their sizes, compress them, and then insert them one by one. Then go over all your functionalities and start checking their effectiveness on the speed, etc etc…

2. Not having styles template:

Styling each element on its own makes the page load each element’s CSS style, while if you set your general styling upfront, the elements will only inherit the styling of their particular type. For example, you can set your site settings in Elementor so that all similar elements inherit the same styling.

3. Not being organized:

This is a self-discipline kind of problem. Not organizing your work and everything that you do will lead to everything being either a mess or in a mess. Think of it this way, if you can’t tell what’s what, then how on earth the browser’s going to figure it out that fast?!

4. Overcomplicating simple things:

Web developers always try to impress their visitors, but more often than not they end up making things overly complicated. Over complicated content on a website makes it slower for two reasons. Firstly, more content means more elements to load. And secondly, the more the content the more the user has to navigate to understand, and chances are they will simply drop.

The Shortcut – Sum up in a paragraph

To sum things up, there are many factors that affect your website’s speed. Starting with servers and ending with the cache in your browser. Here’s how to optimize everything.

1. Use fast hosting services.
2. Avoid any unnecessary functionalities and extra stylings.
3. Resize and compress images.
4. Lazy load media files.
5. Minify HTML, CSS & JS.
6. Use Cloudflare & caching.