Site Performance: Designing a Performance-Focused Website
3 min read
Site pages that contain relevant and neat content generally have an improved loading time, and are a smoother experience for site visitors.
Enhance your pages' performance by following the below design tips, such as optimizing your above the fold section, and creating dedicated pages.
In this article, learn more about:
Tip:
We recommend paying particular attention to the homepage, as this is usually the first page that your visitors encounter.
Element loading order
Elements on your site load in a specific order. Elements that are static, or low-resolution load faster than heavy or interactive elements.
The order that elements load on your site are:
- Static: Elements that are low-resolution and generally not animated, such as text and shapes.
- Fluid: Elements that are content-heavy and may have a higher resolution, such as images or videos.
- Interactive: Content that is interactive and may include external code, such as iFrames and third-party apps.
Keep the loading order in mind when structuring your site and adding content. We recommend adding elements that load quickest to the above the fold section, as this is the first content displayed when a visitor opens your site.
Above the fold
The section above the fold is the section of your site that visitors can see without scrolling, and is usually the first part of your site to load.
We recommend only adding necessary static elements where possible, and keeping the design of this section simple and relevant.
The elements we recommend adding the above the fold section of your site are:
- Text: Text gives your visitors a clear idea of what your site page or brand is about. Furthermore, it can be indexed by search engines and may improve your site's SEO. We recommend sticking to system fonts, and avoiding overuse of different font families or weights. Learn more about optimizing text on your site
- Calls to Action: CTAs are buttons and links that help visitors take a desired action on your site, such as making a purchase or contacting your company. CTAs should be clearly defined, and we recommend avoiding adding elements near them that may distract your site visitors.
Galleries, videos, and animation
Fluid and high resolution elements can add movement and life to your site. However, they can increase site loading time and therefore impact performance.
We recommend being mindful of these elements. Use them only when necessary, and try to avoid adding them above the fold of your site.
Dedicated pages & page length
Wix offers a variety of apps that you can add to your site, some of which include Stores, Blog, and Video.
We recommend having dedicated pages for these apps that are not the site's homepage. This will prevent your homepage from being overloaded, which can impact your loading time. You can then link to these dedicated pages from your homepage using elements such as buttons, menu items, and links.
Adding dedicated pages can also decrease the page length. This is the number of screens a visitor has to scroll through in order to view an entire site page. We recommend keeping your page length at eight screens and below by only adding necessary components, and optimizing the use of CTAs.
Buttons
Buttons are a great way to preview content on your without compromising site performance.
Add static elements to your homepage (such as text) that give visitors a sample of site content, then add a button that links to their respective pages. Some examples include "Check Out My Blog", "See More", or "Start Shopping".
