How to Quickly Create a High-Performance Website 

A website isn’t just about having an online presence or a domain name on your business card. The most successful business websites are high-performance assets that attract prospective customers and encourage them to take action. The best websites are 24/7 sales tools that ensure site visitors become customers. To do so, these sites must respond to site visitors quickly.

What is a High-Performance Website?

There are several factors that make a website high-performance. Essentially, a high-performance site must provide fast page-loading experiences for users, no matter what device they use to visit it. As of November 2024, approximately 64.04% of all internet traffic comes from mobile devices, while 35.96% comes from desktop devices. 

You must consider various factors when building a site for speed. These include:

• Server responsiveness
• Database optimization
• Image sizes
• Lightweight code
• Optimized web fonts

How to Build a Performant Site

Choose a Fast Hosting Provider

If speed is critical for your site, avoid shared hosting plans where your site resides on a server with numerous other sites. The more requests a server must handle, the less performant it will be. 

When choosing a hosting provider, look for speed benchmarks and performance, ensuring that your chosen plan offers optimal performance. Choose a reputable host with a focus on fast servers and high availability. Ensure that your host can handle traffic spikes when needed. 

Evaluate your host’s performance regularly. Hosting performance can change over time, and your site’s needs may grow as your business changes. 

Choose Themes and Plugins Wisely 

The software powering your website is critical. Every line of code contributes to your site visitors’ experience and page speed tool measurements. When using a content management system like WordPress, choose themes and plugins wisely. 

When choosing a new plugin, look to user reviews for others’ experience of that plugin and note any comments about performance. 

Minimize Plugin Use

Minimize the number of plugins you use. Any code on your site could affect its response times. If you’re using utility plugins that duplicate pages or posts, optimize your database, or provide access to a file manager, consider installing them when you use them and removing them when not in use. For daily use, limit your installed plugins to those required for your site’s front-end display. 

Optimize Background Images for Viewports

If you’re using larger images for backgrounds, you’re likely using larger images to ensure that the background is covered on desktop monitors. However, that same large image is also loaded for mobile users as a background, even though the site visitor’s screen cannot show the entire image. Optimizing your image usage for each viewport will improve mobile site performance. Use a separate image for each viewport: desktop, tablet, or mobile. 

Using GeneratePress, this is easy. For a hero area, for example, set a Container Block using Generate Blocks 2.0 and set a different background image for each viewport type rather than one image for all. 

GenerateBlocks allows you to choose a variety of setpoints for block backgrounds:

• All devices
• Desktop
• Desktop & Tablet
• Tablet
• Tablet & Mobile
• Mobile

Choose the most appropriately sized background image for each screen size, depending on the background. 

For smaller screens, you might want to consider a background color instead of an image. GenerateBlocks allows you to set different backgrounds for each and easily preview them within the WordPress editor. 

Load Fonts Locally

Rather than having your website externally load fonts from Google, consider loading fonts locally from your site for dramatically improved performance. When you use Google Fonts, the actual font file is hosted on Google’s server, slowing down your website and negatively impacting user experience. 

A study by KeyCDN found that self-hosting fonts reduced the time to first paint by around 700ms compared to using Google Fonts. Local hosting eliminates the connection setup time to external servers, DNS lookups, and TLS negotiations.

GeneratePress Premium now offers a Font Library, making using local fonts easier than ever. To enable the new Font Library, navigate to Appearance > GeneratePress and activate the Font Library module.

You’ll see a link to open the Font Library, and a Font Library menu item will appear under the Appearance tab after you refresh/load the next page. For more instructions, our documentation walks through how to improve site performance through locally delivered fonts.

Loading fonts locally removes the dependency on external sites, which is also important for privacy requirements in many jurisdictions, such as the EU, with GDPR.

Use Global Styles

By defining styles globally, you can consolidate multiple styles into one. Global styles reduce the redundancy of separate CSS styles the browser needs to load, which in turn creates smaller CSS files and less work for the browser. Global Styles also ensure that branding across the site appears consistently. 

GenerateBlocks Pro offers Global Styles to make setting up global CSS settings easy for both performance and consistent display. 

Use External Files for JavaScript and CSS

JavaScript and CSS can be coded in-line or in external files. When stored in external files, the JavaScript and CSS files can be cached and reused locally when a user browses your site. 

GeneratePress and GenerateBlocks have options that you can control to set CSS to be stored in external files. For the theme, go to Customizer > General and choose the Dynamic CSS Print Method to store in an external file. 

For GenerateBlocks, navigate to GenerateBlocks > Settings and ensure that CSS Print Method is set to external file.

If you’re working on developing your site, simply click Regenerate CSS to rebuild these files after you’ve completed development. 

Minify JavaScript and CSS

Reducing the size of supportive files like JavaScript and CSS files by removing unnecessary characters to speed up load times. When GeneratePress and GenerateBlocks are set to store CSS in external files, these files are already minified. You can use a performance plugin like Perfmatters to minimize your JavaScript files. 

Optimize the Database

Your WordPress database stores several records that become unnecessary over time. These records include revisions, spam comments, transients, auto-drafts, and even trashed pages and posts. Over time, these records can accumulate, wasting space in your database. 

Numerous database optimization plugins, such as WP-Optimize or Advanced Database Cleaner Pro, can reduce the bloat in your WordPress database. Install these, run the database optimization, and remove them when not in use. 

Making changes to the database, even cautiously, can cause problems if you’re unsure of what changes you’re making. Make a database backup prior to any database optimization; it contains numerous critical settings. 

Use Caching

Caching will dramatically improve your site’s performance. When a site visitor first requests a page, a database query is required to pull post or page content from the database and build page content. 

When you use caching, a static version of that page or post is created and stored on your server. All subsequent hits to your site are delivered to visitors from the saved cache without the effort of querying the database and building your page. 

Many hosting providers offer caching as part of their service. If not available, various caching plugins, such as WP Fastest Cache, Super Page Cache, or Cache Enabler, perform this service.  

Use a Content Delivery Network

A Content Delivery Network (CDN) stores your website assets and code (HTML, JS, CSS, images) on different edge servers (POPs) around the globe. When a user visits your site, it’s delivered from the cache on the edge server physically closest. 

If your site’s server is in New York, but your site visitors are coming from Australia, the time it takes to load becomes dependent on traversing the internet. Using a CDN, your site visitor receives your site from the closest edge server, diminishing load times. 

Cloudflare is a popular CDN between your website and the internet and delivers a full-page cache to visitors worldwide. 

Optimize Images

Large images require more bandwidth, so ensure images are not larger than necessary for their display size. If the space required on the page is only 400 pixels wide, ensure you resize images to that size. 

Use image compression tools like TinyPNG to compress images before uploading them to your media library, or use the ShortPixel or Imagify plugin. These tools remove extraneous information from image files, making the file sizes smaller without lowering quality. 

Some Content Delivery Networks (CDNs) compress images for you, and some hosting providers build image compression into their services. If you’re using a CDN or hosting provider that provides compression, you won’t need these plugins. 

Use Next-Gen Image Formats

Next-generation image formats like AVIF (AV1 Image File Format) and WebP offer a significant evolution in digital imaging. They are designed to deliver superior compression, quality, and performance compared to older formats like JPEG and PNG. Both AVIF and WebP are now supported in WordPress. 

WebP leverages the VP8 video codec to provide lossy and lossless compression, offering smaller file sizes with comparable or better visual fidelity alongside support for transparency and animation. AVIF provides even more efficient compression, excellent color accuracy (thanks to HDR and wide color gamut support), and sharp details at low bitrates. 

Both formats reduce bandwidth usage, improve page load times, and are supported by all modern browsers.

Compared to other media types, WebP offers:

• JPEG to WebP (lossy): Around 25-34% reduction.
• PNG to WebP (lossless): Approximately 26% reduction.
• PNG with transparency to WebP: Around 30% reduction.
• GIF to WebP (animated): Often 64% or more reduction.

Compared to other media types, AVIF offers:

• JPEG to AVIF: Around 50% reduction.
• PNG to AVIF: Approximately 60-70% reduction.
• PNG with transparency to AVIF: Around 50-55% reduction.
• GIF to AVIF (animated): About 70-85% reduction.

The ShortPixel plugin can convert your existing images to WebP or AVIF automatically. 

Why GeneratePress is the Professional’s Choice for Performance

GeneratePress is a popular choice for WordPress performance due to several key factors:

Lightweight Design

GeneratePress is exceptionally lightweight, adding only about 7.5 KB to your page size when freshly installed. This minimal footprint is crucial for fast loading times and essential for performance.

Speed Optimization

The theme is developed with performance in mind, ensuring it remains one of the fastest WordPress themes available, even with customization. It achieves high scores on performance tests like Google PageSpeed Insights and GTmetrix, often getting 100% scores in speed categories.

Modular Architecture

GeneratePress uses a modular approach where you can enable only the features (or modules) you need. This means less bloat when fewer resources are used. Each module can be toggled on or off, allowing for precise control over what impacts your site’s performance.

Clean, Efficient Code

The theme follows WordPress coding standards, ensuring the code is clean, secure, and optimized for performance. This includes efficient use of CSS and JavaScript, which reduces the load on the browser.

GeneratePress’s emphasis on speed, combined with its versatility and ease of use, makes it an attractive option for those looking to build high-performing WordPress sites. 

Start Building Quickly with GeneratePress Starter Sites

GeneratePress has several starter sites that make getting a new site up and running easier than ever. You can find these in your WordPress admin module by navigating to Appearance > GeneratePress and enabling the Site Library. 

GeneratePress starter sites take advantage of the performance enhancements in GeneratePress and GenerateBlocks. With the release of GenerateBlocks 2.0, GeneratePress is uniquely positioned as the most performant suite of WordPress tools.