When you’re learning how to make a website, half the battle is learning how to make sure it functions as well as it looks. After all, nothing’s a bigger buzzkill than launching your site—only to find out that most people are leaving it because your page won’t load.

In today's fast-paced digital world, time is a commodity, and no one wants to waste it waiting for your website to load. That’s why you’ll want to know how to test your website speed and know how to improve it to avoid losing customers to a slow-loading website.

Multiple factors impact your site speed, including (but not limited to) your web hosting provider, the quality of your backend code, your plugins and more. It's easy to lose track of everything—but before we dive into mistakes, let’s go over how websites work behind the scenes.

Think of the internet like a restaurant: A website acts as a menu, displaying all the food available to be made in the kitchen. When you order something off the menu, your server is asked to retrieve it from the kitchen and send it back to your table. The more complicated your order, the longer it takes for the kitchen to serve it up your meal and the longer it will take for the server to return to your table. Keep this metaphor in mind as we jump deeper into common site speed mistakes.

Looking to create a website on a reliable platform? Create a website on Wix today.

01. Using too many custom fonts

When working on your website design, it’s easy to get carried away enthusiastically experimenting with elements like fonts. While there’s a whole design explanation for why you should stick to typography principles—such as contrast, hierarchy and balance—you really just need to know why having too many fonts can affect your page’s performance.

Browsers can easily comprehend system fonts, because most computers already have those downloaded (think the fonts you see most often, like Times New Roman and Arial). However, those who use “custom fonts,” or special stylistic fonts outside of these common fonts, require the file to be downloaded in order for text to be visible. While this will always take more time than system fonts, the more you use on a single page, the longer it will take to load.

For example, asking your server to make one special request at a restaurant will usually go faster than if every patron is asking for meals that need to be specially made.

For the speediest user experience for your visitors, try not to have more than three to four custom fonts or opt for system fonts instead.

02. Using non-optimal image formats

File formats seem like a persnickety thing to deal with when creating your website, and for the most part, they are. For example, when you make a website with Wix, Wix automatically makes sure that the pictures you add to your site look great and load as quickly as possible. It does this by converting images to a “WebP” file, which maintains image quality but requires a smaller file size. But for this to work the best way for your website, you need to ensure the original file you’re uploading is not only the highest quality it can be, but also that that high quality file doesn’t create too many problems in uploading or downloading it.

You can start by choosing the right image formats. Stick to common image formats like JPGs, PNGs or SVGs—you can think of these as the equivalent of ordering the most common drinks at a restaurant. If you order a Coke anywhere in the world, it’s likely they’ll have it on tap and can serve it to you in minutes.

Additionally, use JPGs instead of PNGs when possible. JPG images can be up to 10 times smaller than PNGs and, as a result, can load much faster. While PNGs and JPGs work well for photos, SVGs usually work better for shapes and illustration-style elements like logos. SVGs files are usually much smaller than PNGs and JPGs, and they load on the page faster because the images are directly embedded in the website code. Since the website doesn’t have to go find the image somewhere else on the internet, it helps the image load faster.

03. Overdoing it with lightboxes

If you’re building a website and want to make sure your visitors see an important message or announcement, you may choose to add a lightbox, or a popup window, that appears on top of the main page’s content.

While it’s okay to have one advertising a sale pop-up a few moments after the visitor has entered the site, having something pop up every few seconds would not only be annoying for your visitor, but also slow down your site.

Think of it like how a server interacts with a table. While it’s okay for them to stop by and announce the specials after you’re seated and looking at the menu, it would be annoying if they popped by every few moments—and would simultaneously keep them from going back into the kitchen and serving you the meal you came for.

04. Going wild with third-party features

A fun thing about today’s websites is that you don’t have to use all of your own content—you can often embed third-party content onto a web page, essentially borrowing another website’s content to appear on your page. While this can increase the amount of things visitors can do on your website, it can slow down your website. Essentially, you’re asking a server to run to another restaurant for a special part of the meal and bring it back to the restaurant.

Best practice is to reserve third-party apps and iframes (small windows for other websites) on parts of your website that are not the homepage—and to limit the number of third-party scripts on your site. Only keep the apps that you’re actively using.

Moreover, add any essential third-party apps in a non-blocking manner. You can do this by manipulating the body of HTML code with a special script called “defer” or “async,” as well as placing the code at the end of the main content. Both options will tell the website to load these resources only after all the main content has loaded. Essentially, this is like telling your waiter not to wait on a special dish before bringing out all the other food to your table.

Better yet, avoid using any custom code at all by using Wix’s integrated marketing tools as opposed to third-party apps when possible.

05. Top-loading your homepage design

A common culprit to slow website speed is top-loading a homepage with heavy visual content, like galleries, videos and custom fonts. To avoid this, focus on simplifying the above-the-fold section of your homepage. Try to limit this content to text in system fonts and static images, since they load faster.

Wix also automatically lazy-loads images in most scenarios, meaning that images that live below the fold are first downloaded as very small, low-resolution placeholder images. As the user scrolls the page, these stand-in images are then replaced with the original high-resolution images.

06. Using GIFs

GIFs have completely changed modern communication. Tempting as they may be, GIFs are actually a higher lift for computers to handle than video. Reason being, you can’t control their playback and they will only start playing once all of its content frames are loaded. Since these are multiple speed bumps for page loads, you’ll want to consider using videos instead of GIFs to showcase animated content. (As a bonus, modern video encoding formats have both better quality and smaller file sizes.)

If you’re looking for a GIF-like effect, you can use Wix VideoBoxes to showcase your own videos. You can customize them to show a border around your box, or to add an overlay or video mask (among other customizations). Wix also features Transparent Videos, which allow you to add or upload your own videos and place them anywhere on your site with a transparent background.

07. Not attending to your site’s DOM order

While the Wix Editor is a simple drag-and-drop interface that does most of the work for you, there is room for user error. In fact, a common error in first websites is not matching the order of elements—like images, texts and videos—on your site (also known as a DOM) with the order in the Editor’s Layers panel.

DOM stands for document object model, and is how the computer reads the importance and order of your website elements. With Wix, DOM determines the sequence in which elements load on your site. Automatic DOM order is enabled via the Editor, but it is communicated via the Layers panel where you control each layer of your website elements.

So, if your Layers do not mirror the importance of your site’s elements, your website will load out of order. Think of it like ordering a meal with an incompetent waiter: if you don’t specify that you’d like your food to come out in the order of drink, appetizer, entrée then dessert, don’t be surprised if the first thing that comes out of the kitchen is a bowl of ice cream.

08. Automatically caching

This one isn’t so much of a mistake as it is a flip that just needs to be switched. Wix uses Content Delivery Networks (aka CDNs) to cache (or store) and serve responses as fast as possible for most visitors.

In our restaurant metaphor, you can think of them as condiments and water stands. Since servers know these are the things visitors want most often, they strategically store them throughout the restaurant so they don’t always have to walk back to the kitchen.

However, if you’re an experienced web developer using Wix and Velo, and you notice that your web page still takes too long to load, you may need to manually enable caching for your site to ensure that it stores your most-used content on the CDN servers (if you brought your own sauce to the restaurant, you’ll just need to tell the waiter to keep it on hand for you).

09. Not designing for mobile

Lastly, to provide a tailored experience for mobile users, all Wix websites are adaptive, meaning that the platform automatically optimizes them for each of the most common devices. However, a common mistake that website owners make is not checking to see that the mobile version looks and functions exactly how they want it to.

Some elements may not look as good on a mobile device as they do on a desktop, and others may be unnecessary. By optimizing your mobile site’s layout and hiding unnecessary elements, you can pare down your mobile site to the basics and give the server fewer things to serve. Think of it as a takeout window that only serves the best of your website’s content for on-the-go consumption.