Speed up your website 3: Optimize website content – Images, videos & fonts

In the 2nd article, we talked about how your entire website consists of codes. However, using codes you can add images, videos, icons and other media files. The main website structure is given by the codes, but most of the content is texts, images, videos, etc… Here’s Speed up your website 3: Optimize website content – Images, videos & fonts.

Table of content:

1. Intro: The importance of optimizing your website files
2. Optimize website content & fonts
3. Optimize website images
4. Optimize videos on your website
5. The Shortcut – Sum up in a paragraph

Useful articles:

1. General tips, mistakes, elements & optimization
2. Optimize your website codes HTML, CSS & JS
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: The importance of optimizing your website files

As I said earlier, you write codes, in the codes you define images, videos, icons, texts, etc… So, the browser, after getting the structure of your website and the styling of the elements, it then starts downloading the media files to present it to the user.

Let’s say you have around 16MB worth of images and videos on your website, this means that the browser will have to load 16MB worth of media files, take into consideration that it also renders the HTML, CSS, etc… And, if you optimize your files correctly, the same amount of files and everything will most probably be reduced to 3-4 MBs. Almost 4 times faster. Sounds good? Well let’s see how to optimize each element.

I will try and make it as short as possible.

Optimize website content & fonts:

The tips below are considered best practices both from experience and general knowledge.

• Make sure you’re consistent with your styling of texts.
• Set clear formatting for all similar types of content. (P, H1, H2, H3, …, H6)
• As a general best practice, use only one font for the entire website.
• Make sure to use a web font, preferably Google Fonts. (You can still upload your custom fonts though)
• Be consistent in the distribution of your headings.

When uploading a custom font:

• Host the fonts locally, on your servers.
• Upload only the styles that you need.

Here’s an amazing article by KeyCDN covering all the details of web fonts. \

Optimize website images

This is even faster, I have a complete article on optimizing website images.

1. Resize images: Make sure you don’t add 5000 x 5000 images in a place where the placement’s going to be 300 x 300.
2. Format images: Convert to a more optimal format, preferably WebP. JPEG is the second best option. Use PNG format only when transparency is a must.
3. Compress images: Go to TinyPNG, compress images.

Now let’s optimize how we insert images in a page.

• Give image elements an explicit width and height:

<img src=”{image URL}” width=”500″ height=”600″>

• Lazy load images: If you’re using WordPress, you can easily lazy load that with the following plugins. Autoptimize & SEM Rush

Optimize videos on your website

When it comes to adding videos on your website/page, you have two options.

1. Upload the video to your server, and then insert it in the page.
2. Upload the video on YouTube/Vimeo/etc and embed it in the page.

Please note, there are many things to consider when choosing which option to go by, but from page speed’s point of view having your videos embedded on your page from YouTube is at least a few times faster.

The average video would be some 50-100+ MBs, imagine getting requests to load the video from all over the world by your visitors, this will definitely cause problems.

Another tip is to always use lazy loading for videos.

Here’s a great comparison article between self-hosted videos and YouTube embeds.

The Shortcut – Sum up in a paragraph

1. Use one font and try to use Google Fonts.
2. Resize & reformat images to WebP & compress them.
3. Use YouTube embedding instead of hosting large videos on your servers.
4. Use lazy loading. This is even easier for WordPress websites.
5. Use caching.