The Insides of The Best WordPress Website Accelerator Plugin

If you’ve ever been curious about how one of the most effective SaaS WordPress accelerator plugins operates, you’re about to find out. We’ll uncover all the inner workings in this blog post.

Intro

Let’s kick things off with an intro. FastPixel is a WordPress plugin designed to deliver lightning-fast speed while conserving resources and ensuring security. It has been fine-tuned to operate at peak efficiency.

To begin, you would have to download the plugin and install it, following the same straightforward process you would typically use for any other plugin.

We believe in keeping things user-friendly. FastPixel offers only a handful of settings (see the screenshots) to provide optimal results. We’ve removed any options that don’t significantly impact performance or can be automated. This approach saves our users time and eliminates the potential for human error.

How the plugin works

After the installation, a unique security key is generated, ensuring an extra layer of protection. This key is a cryptographic string composed of alphanumeric characters. It ensures the confidentiality and integrity of the optimization process. The key serves two primary purposes:

• it provides a secure and reliable method for identifying the optimization session. This ensures that the optimization process is both authenticated and authorized.
• it acts as a unique identifier, allowing the plugin to access the specific resources required for the optimization. This ensures that the right set of resources is utilized for each session, avoiding any conflicts or mix-ups.

When FastPixel is activated on a WordPress website, a request is dispatched to FastPixel’s Website Accelerator Cloud (FPWAC). This request carries essential information, including the URL of the page requiring optimization, the randomly generated security key, and a postback URL. The postback URL serves as a designated return address for optimized data.

Next, the entire process unfolds in four distinct stages, outlined as follows:

• Processing: Upon the initiation of the optimization request, FPWAC undertakes the task of processing the incoming request.
• Awaiting: As FPWAC proceeds with the optimization, the plugin assumes an anticipatory stance, waiting for a response.
• Receiving: Once FPWAC completes the optimization, it signals the plugin to take action. This moment marks the transfer of the optimized page, essentially a single HTML file, from the cloud back to the plugin.
• Delivering: After the plugin receives the optimized page through the postback URL, WordPress, under the directive of advanced-cache.php file dynamically serves the optimized content based on the visitor’s device and screen resolution.

How FastPixel’s Website Accelerator Cloud (FPWAC) works

In the initial phase, the deployment strategy begins with the incorporation of a dual-load balancing architecture. This consists of an active load balancer and a standby unit, ensuring the utmost redundancy. Continuous server monitoring occurs at 5-second intervals.

If the active server encounters an issue, an automated failover is executed, redirecting all traffic to the backup server. This process transpires within a swift timeframe, typically taking approximately 30 seconds to complete.

The efficacy of this load-balancing operation is pivotal to FastPixel’s overall reliability and speed and brings a multitude of benefits, specifically:

1. Availability: Helps distribute incoming traffic. This means that if one server fails or experiences high traffic, the load balancer redirects requests to the backup unit, reducing downtime and potential service disruptions.
2. Scalability: Our team can easily add more servers or resources to the load-balancing pool to handle increased traffic. This flexibility ensures that FastPixel can adapt to changing optimization demands without overloading any single component.
3. Security: Help mitigate attacks by distributing the incoming traffic and filtering out malicious requests. Additionally, it encrypts and decrypts traffic, adding an extra layer of data security.

The second stage entails the utilization of an advanced queuing system by the request-handling servers. This mechanism operates with the primary objective of efficiently and equitably distributing tasks among the available workers.

Moving forward to the third phase, one of the multiple worker instances is selected to receive a request, initiating the optimization processing stage, which will be explained below.

Following an extensively optimized and expedited process, the HTML page is dispatched back to the plugin through the postback URL. This marks the beginning of the delivery process, as mentioned above.

How the optimization works

FastPixel’s optimization revolves around images and various elements across different screen resolutions. There are 10 different resolutions in the mix.

Here are the resolutions the optimization is tailored for:

width: 412, height: 823, deviceScaleFactor: 1.75 // Moto G Power 412x823, DPR 1.75
width: 414, height: 915, deviceScaleFactor: 2 // mobile 414x896 + 412x915 + 390x844, scale 2
width: 414, height: 915, deviceScaleFactor: 3 // mobile 414x896 + 412x915 + 390x844, scale 3
width: 767, height: 1024, deviceScaleFactor: 2 // mobile 768x1024 for Elementor default breakpoint
width: 834, height: 1280, deviceScaleFactor: 2 // tablet 834x1194 + 601x962 + 800x1280 + 810x1080
width: 1024, height: 640, deviceScaleFactor: 2 // tablet
width: 1366, height: 800, deviceScaleFactor: 2 // desktop 1366x768 17% + 1280x720 + tablet 1280x800
width: 1536, height: 900, deviceScaleFactor: 2 // desktop 1536x864 11%  + 1440x900
width: 1980, height: 1080, deviceScaleFactor: 2 // desktop 1920x1080 23% + 1600x900
width: 2560, height: 1440, deviceScaleFactor: 2 // fallback

This challenge is tackled by using a browser-tab-based strategy, each dedicated to a specific screen resolution. Each tab is specifically allocated to accommodate a particular screen size, allowing for a customized optimization process for each resolution. This approach ensures that the web content is seamlessly adjusted to suit the varying requirements of different devices, from 412 to 2560 wide screens.

Data from Statcounter is used to gain insights into the prevalent screen resolutions for both mobile and desktop. This methodology allows for the customization of solutions to align with the most commonly used resolutions, in order to enhance the capacity to meet user needs effectively.

Image optimization

The image optimization process involves an initial examination of the website’s elements, particularly images necessary for rendering at each resolution. Backgrounds are blocked so that URLs can be sent to a Content Delivery Network (CDN), accompanied by specific crop parameters. For example, this move ensures that when accessed from smaller devices like mobiles, the images are properly sized (scaled) and optimized to improve page load speed.

By properly sizing images, they’re adjusted to fit the dimensions of the container they occupy on a page without causing distortion or excessive loading times. This way, the images adapt to the viewer’s device and load efficiently without losing quality or causing unnecessary data transfer.

For example:

• Unoptimized > https://fastpixel.io/wp-content/uploads/2023/10/leverage-browser-cache-wordpress.png – file weights 70.04 kB
• Optimized > https://free-cdn.fastpixel.io/fp/ret_wait+w_1000+h_612+q_lossy+to_webp/https://fastpixel.io/wp-content/uploads/2023/10/leverage-browser-cache-wordpress.png – file weights 8.30 kB – compressed by ~88%

Furthermore, the optimization process takes into account the capabilities of each visitor’s browser. For instance, if a visitor’s browser can support WebP images, the website will deliver these formats for faster loading times. In cases where WebP is not supported, the original optimized images (JPG, PNG, etc.) are served instead. This approach ensures that the web content is delivered in a format that aligns with the visitor’s browser capabilities.

API image parameters

Let’s break down the structure of the URLs, which consist of three key parts:

1. Fixed CDN domain: Every URL begins with https://free-cdn.fastpixel.io/fp/ which remains constant for all images.
2. API parameters: These parameters, separated by commas, offer control over the image’s output when calling the API.
   • w (width): The width in pixels, adjusted to fit the viewport.
   • h (height): The height in pixels, adjusted to fit the viewport.
   • q (quality setting): Image quality level.
   • to (conversion setting): This parameter supports conversion to formats like WebP. This depends on the browser’s support.
   • ret_wait (return setting): How the image is returned.
3. Original image URL: This is the URL of the original image.

Critical CSS

Critical CSS plays a fundamental role in web development by encompassing the crucial styles required to render the initial view of a web page. It’s the foundation on which the first impression of a website is built that greatly influences the speed at which a web page appears to users.

The optimization process involves algorithms that calculate the ideal CSS styles for each of the 10 different screen resolutions. It’s not a one-size-fits-all solution; instead, the approach is customized to suit the specific demands of each resolution. The algorithms are designed to select the exact set of styles required to display the core content of the page without unnecessary frills. This precision ensures that the website initiates its rendering process promptly.

The goal is to deliver the right styles for the right resolution which ensures that the web page begins to materialize swiftly.

JavaScript and CSS loading sequence

Next, the loading sequence of JavaScript and CSS files is organized. By giving priority to vital resources and minimizing elements that can obstruct rendering, the website’s performance experiences a substantial boost.

Prioritizing critical resources

When a user accesses a web page, the browser is responsible for fetching various JavaScript and CSS files. The order in which these files load plays an important role in determining the speed at which the page renders.

FastPixel employs a strategic approach to address this challenge. It begins with the identification of essential resources required for the initial rendering of the web page. These resources encompass JavaScript and CSS files containing the necessary code and styles for displaying the core content, fast. By recognizing these components, the process ensures their priority in the loading sequence.

For instance, if a website depends on a specific JavaScript file to render its primary navigation menu, it ensures that this file is given top priority in the loading sequence. This enables users to interact with the menu and explore the site while the remaining resources load in the background.

Mitigating render-blocking elements

Render-blocking elements refer to JavaScript and CSS files that have the potential to impede the rendering process of a web page. Typically, web browsers follow the practice of withholding the display of content until these files have fully loaded and executed.

To address this concern, a set of techniques minimizes the impact of render-blocking elements. This optimization process prioritizes the loading sequence by allowing non-critical files to load asynchronously. In practical terms, this means that while certain resources are still in the process of loading, users can start their interaction with the page, even if it hasn’t been fully rendered. This strategy effectively reduces the delay associated with render-blocking elements.

Let’s consider a website that features various animations and dynamic effects driven by JavaScript and CSS. This optimization approach ensures that these animations do not significantly impede page loading. By carefully managing the loading sequence, users can engage with the interactive elements of the site without the need to wait for every animation to complete.

Font optimization

The font optimization begins with an analysis of the textual content on a specific web page. This analysis encompasses an examination of every character, symbol, and glyph that the particular page employs. The objective is to identify which of these elements are actively used within that specific page.

Next, algorithms are used to precisely pinpoint the characters and symbols that are essential for the content of that specific page. This process distinguishes it from conventional font delivery methods that often include an extensive set of characters, many of which might never be used on a particular page, leading to unnecessary bloat, potential layout shifts, and slower loading times.

Once the characters and symbols in active use are identified, they’re integrated as a customized font. This is where the technical magic unfolds.

The final unique font is tailored to the specific needs of that particular page, containing only the elements that are necessary for its content. The goal is to make sure that typography remains consistent within the context of the page and that unnecessary or unused characters do not weigh down the page.

Refined preloads and prefetches

The optimization strategy extends to the management of preloads and prefetches, fine-tuning these techniques to improve website performance. Specifically, it identifies and removes preloads and prefetches that, while beneficial in the past before FastPixel’s optimization, are now a surplus. This ensures that the website doesn’t carry the weight of outdated or redundant optimization practices.

Basically, before FastPixel, these preloads and prefetches were put in place to expedite the loading of specific resources. FastPixel recognizes when these techniques have outlived their usefulness and streamlines the website by removing them. The result is a leaner, more efficient loading process, free from the excess baggage of outdated optimizations.

Also, FastPixel proactively optimizes the LCP by generating preloads for images that play a pivotal role in triggering the Largest Contentful Paint. The LCP measures the time it takes for the most substantial element within the viewport to become visible. By targeting the preloading of resources central to the LCP, the goal is to diminish waiting times for visitors and improve the overall speed and efficiency of the website.

The results

All of these optimizations are woven together into a single, minimized HTML file. This isn’t just any HTML file; it’s the result of a carefully orchestrated performance symphony. The goal is to create a single, all-encompassing file that caters to all resolutions, an approach that ensures the website isn’t weighed down by numerous files.

With the optimized HTML file in hand and all the optimization techniques already applied, there’s no need for user intervention. The website will be finely tuned for peak performance.

Wrapping up

FastPixel is an optimization engine and website accelerator plugin working smartly behind the scenes to ensure that WordPress websites load fast with minimal effort from the user. From load balancing techniques, image optimization, CCSS, and more, it’s a comprehensive solution that can turbocharge a WordPress site.

So, next time you enjoy the fast-loading pages on a website, remember that FastPixel might be the secret ingredient making it all possible.