Site Performance: Designing a Performance-Focused Website
4 min
In this article
- Optimizing element loading order
- Designing a high-performing above the fold section
- Using dedicated pages
- Optimizing images and videos
- Lazy loading
- Managing additional elements
- FAQs
Create a fast, engaging website by making design choices that prioritize performance. When you choose what to show first, where to place images and videos, and how to organize your content, you help your pages load quickly and make it easier for people to find what they need. Use these performance-focused tips to improve your site’s speed, keep visitors interested, and deliver a smooth, professional experience on any device.
Optimizing element loading order
Elements on your site load in a specific order based on their type and size. Understanding this order helps you prioritize what appears first and ensures a seamless experience.
- Static elements: These include text and basic shapes that load the fastest. Add these above the fold to ensure quick visibility.
- Fluid elements: Images and videos fall under this category. While they add life to your site, they can slow performance. Place these below the fold when possible.
- Interactive elements: Elements like iFrames, animations, and third-party apps load last. Use them sparingly and strategically to avoid long load times.
Tip:
We recommend paying particular attention to the homepage, as this is usually the first page that your visitors encounter.
Designing a high-performing above the fold section
The above the fold section refers to the area of your webpage visible before the user starts scrolling. As it loads first, keeping it lightweight and purposeful is critical.
Recommended elements:
- Text: Use succinct, impactful text that clearly conveys your page’s purpose. Stick to system fonts and avoid excessive use of font families and weights.
- Calls to Action (CTAs): Include clear buttons or links to guide user actions, such as “Shop Now” or “Learn More.” Avoid placing distracting elements near CTAs.
Elements to minimize:
- Large images or videos
- Animations
- Overuse of high-resolution images
Tip:
Use tools like Google PageSpeed Insights or Wix’s Site Speed dashboard to ensure content above the fold is optimized for fast loading.
Using dedicated pages
Overloading pages with too many elements affects performance, particularly the homepage. Instead, create dedicated pages for specific site features or apps.
Add pages for features like Stores, Blogs, or Videos, and link to them from the homepage with buttons or menu items. Keep page length under approximately eight screens by distributing content across your site pages and limiting unnecessary elements.
Optimizing images and videos
Media files often slow websites due to large sizes and resolutions. Here’s how to manage them effectively:
Images:
- Use lightweight formats like WebP or JPEG.
- Compress files before uploading to Wix.
- Showcase images in a pro gallery for built-in optimization.
Videos:
- Host videos on Wix Video, YouTube, or Vimeo to optimize performance.
- Avoid placing videos above the fold for faster initial page loads.
Lazy loading
Lazy loading delays the loading of images and videos until they appear in the user’s viewport, improving initial page load times. This feature is automatically enabled in Wix but works best when images and videos are placed within supported elements, like galleries or strips, and above the fold content is kept minimal for faster visibility.
Managing additional elements
Other design decisions can also impact your site’s speed and performance:
- Buttons: Create clear and concise buttons linking to relevant content elsewhere on your site. For example, you can use “Explore the Catalog” or “View More Projects.”
- Custom Code: Ensure any custom code is optimized and uses attributes like "defer" or "async" to reduce lag.
- Pagination or load more buttons: Especially for product-heavy sites, avoid showing all products at once on a single page. Implement pagination or load-on-demand features to keep loading efficient.
Tips:
- Test regularly: Use Google PageSpeed Insights and Wix Site Speed dashboard to monitor and improve performance.
- Prioritize above the fold content: Make sure key content loads quickly by adding lightweight and static elements.
- Minimize third-party apps: Only use essential apps or widgets to avoid unnecessary slowdowns.
FAQs
Click a question below to learn more.
Why is my Wix website slow to load, and how can I improve its speed?
Why is my mobile site slower than my desktop site?
How can I improve my Largest Contentful Paint (LCP) score?
What is the best way to display a large number of products without slowing down my store?
