2.17.2.3. Site optimization

There are several ways to improve a site’s performance and speed:

1. Site optimization:
   • Site-side optimization (scripts, database queries, pages, etc.).
   • Using hosting features to optimize site performance.
2. Server software optimization (for VPS and dedicated servers).
3. Increasing available resources:
   • Upgrade your business hosting plan to a higher plan.
   • Upgrade your VPS server's performance or switch to a higher-tier plan (for VPS and dedicated servers).

Site optimization is listed first for a reason, because it takes priority over other methods. If you take two completely identical servers with identically configured software and host on one a site using an unoptimized theme, plus 2-3 dozen plugins that haven't been tested by anyone for load and compatibility, and on the other the same site, but using caching of pre-rendered pages, with the critically necessary minimum of plugins and modules optimized to work seamlessly together, it turns out that the second server can operate 2-4 times faster (in some cases, the difference is much more dramatic, and after proper site optimization, speed can increase tenfold) and generate less load than the first, even without implementing the other points.

This article does not provide specific recommendations for modifying script code to improve performance, due to the difficulty of implementing universal solutions for every content management system. Any configuration or modification of the site must be performed independently or by engaging third-party web development specialists.

Key areas of optimization that apply to most popular CMS platforms:

1. Avoiding plugins and add-ons. All sorts of plugins, modules, and extensions that seem to expand a site's functionality are, in many cases, its enemies when it comes to performance. There are plenty of reasons for this. The main one is that many modules are written by enthusiasts and are of very low quality, both in terms of resource consumption and compatibility with other modules and CMS. Therefore, before installing any module or plugin, consider whether you can implement the same functionality without it. If not, after installation, thoroughly test it under load, assess its resource consumption, and read reviews from other users.
2. Avoid stolen and low-quality themes and plugins. Strange as it may seem, this is also an important point, since in 8 out of 10 cases, a hacked product, contrary to hackers' assurances, remains not only dangerous in terms of potential "backdoors" and vulnerabilities, but also much more problematic in terms of resource consumption. "Homemade" components and themes are, in the vast majority of cases, of very poor quality; avoid them whenever possible. If low resource consumption is important, do not use "universal" themes. Due to the use of various additional frameworks, such "all-in-one" solutions run slower and consume more resources.
3. Page caching via scripts. This method allows you to generate site pages in advance and save them as static files, which load significantly faster. You should use scripts to save site pages as files wherever possible. Serving a pre-generated site page consumes far fewer resources and takes much less time than generating it from scratch for each new visitor. This method is one of the most effective due to the use of static pages.
4. Optimizing the database and queries to it. When using most CMS platforms, one of the most critical aspects is optimizing database performance and queries, as the database is used to store virtually all the data required for the site to function properly and generate pages. Many sites may run slowly simply because of issues with data storage in the database and unoptimized queries to it. This is precisely why the TTFB metric may increase and the time required to process queries may grow.
5. Accessing external sources. A significant factor affecting page load times or page generation can be the retrieval of data from other servers. There are countless reasons why resource loading might fail, but the most common issues that can be resolved on the site side are:
   • The distance to the server being queried. The farther away the target server is, the longer it takes to exchange data with it. This results in slow page generation by scripts because they are waiting for a response from the remote server and, consequently, in slow page loading in the browser, which quite often freezes at certain stages of page rendering (this is clearly evident during the sequential, slow loading of page parts — first the header, then, after a short wait, the rest of the content).
   • Target server unavailability. If the server with which data is supposed to be exchanged is unavailable, this can cause significant issues with page loading and rendering speeds. If the problem occurs on the backend, the page may remain blank for a long time, and only when the connection process is reset will the page display (most often this is a connection timeout, which in shared hosting occurs 3600 seconds after the connection begins), making it appear as though the site is down.
   • To resolve such issues, we recommend:
     • Use CDN services for the necessary resources, if available.
     • Minimize the use of remote resource storage. This can be achieved by storing the necessary resources in the site directory, thereby improving the site's stability and speed.
     • Use asynchronous loading for resources (using async or defer) that do not contribute to content generation or are non-essential. For example, counters, advertisements, and so on.
     • Minimize backend requests to third-party resources and, where possible, set a specific timeout for functions that establish connections (for example, by using stream-set-timeout, the CURLOPT_CONNECTTIMEOUT option in curl, etc.).
6. Reducing the number of server requests. When loading a site, if there are many files to be loaded, issues may arise with loading speed or even result in errors. Hosting providers impose certain limits on the number of concurrent connections, which can lead to errors. But even if there are no such restrictions, a large number of requests will still affect the site's loading speed. Each file establishes a separate connection to the server, and the process of initiating the connection and all subsequent steps for proper data transfer also takes a certain amount of time, which causes delays in the site's loading speed. If you compare two identical sites, but one has 150 files to load while the other has the same data spread across 50 files, you'll notice a significant increase in loading speed. To solve this problem, we recommend:
   • Reduce the number of files loaded on the site by removing unnecessary elements or by loading them after specific events (such as scrolling the page, clicking buttons, and so on).
   • Combine multiple files into one or a few. If you use multiple CSS files, in some cases you can combine them into a single file to reduce the number of requests and improve compression. Certain plugins or components, as well as the Pagespeed feature, can perform these actions automatically. However, it is extremely important to ensure that the site functions correctly when using such optimization tools.
   • You shouldn't use asynchronous loading for all resources, because if a site that loads 50 resources sets asynchronous loading for all files, this will generate 50 simultaneous connections for a single visit to the site, which can cause issues not only in the form of server errors due to limits on concurrent connections, but also on the client side that opened the site, since all these simultaneous requests also place a fairly heavy load on the browser.
7. Site resource optimization. When loading a site, issues may arise where the layout itself loads fairly quickly, but site elements take a long time to load, causing the site to freeze up and similar problems. This issue is most commonly observed when large site resources are loaded incorrectly. For example, high-resolution images may load in high resolution immediately for the mobile version, or numerous JS scripts containing a massive amount of data may be loaded. There are various technologies available to speed up data loading; here are a few examples:
   • Lazy loading — the essence of this technology is that when a page is opened, not all images are loaded at once, but only those that are within the visible area. The remaining images are loaded dynamically by the browser as the page is scrolled.
   • Image size optimization. Effective image compression can significantly improve page load times.
   • Use of WebP images. This format has gained popularity because its file size is smaller than that of other formats, without compromising image quality.
   • Deferred script loading. For the most part, some site scripts are not needed until the site is generated, so loading them first makes little sense. To make the site appear extremely fast, the visual components of the site should load first, followed by all dynamic content. By changing the loading order in this way, you can achieve a visual acceleration of the site's loading speed.
8. And another very effective, though labor-intensive and not always feasible approach is to avoid using scripts wherever possible. The fastest site is one that consists of a set of static files. One way to achieve this is by using content management systems (CMS) that generate a set of HTML files (of course, the administrative part of the CMS itself may well consist of scripts). An example of such a CMS is Movable Type.

Hosting providers offer a range of settings that can help optimize your site's performance, but these should not be viewed as a one-size-fits-all solution, as certain technologies may not deliver the expected results. Most hosting configuration recommendations focus on using data and page caching to deliver content to the client without re-processing the request via scripts or regenerating pages. The principle of data caching allows you to reduce the amount of data transferred between scripts or servers, decrease the number of scripts processed, and more, thereby speeding up response generation. This method is useful for resolving issues with high TTFB. It is important to note that not all CMS platforms allow you to configure all of the optimization methods listed here.

1. OPcache. Using OPcache saves time by caching the compiled bytecode of scripts. This method is useful when using many static scripts, the compilation of which can take a long time. OPcache can be enabled on the site without requiring any changes to the site's scripts.
2. Memcache(d). The use of Memcache(d) varies across different systems — in some, it is used exclusively to store data retrieved from databases (which saves time on sending a query to the database, searching for the required data, and returning the response), while in others it is used to cache specific site pages (which is more efficient in terms of speed but less convenient for generating dynamic content). It is worth noting that the behavior of data caching in Memcache(d) memory is determined directly by the site's scripts.
3. Redis. It is similar to Memcache(d) in that both store data in RAM and then use it to provide faster access. The logic behind data storage and other aspects is also similar.
4. PageSpeed. The PageSpeed optimization module is installed on the hosting by default, and all its features are available for any site. To some extent, most of its settings can be risky for the site's operation because they change the names of loaded scripts, their loading mechanism, and more, depending on the enabled parameters. However, it can be considered one of the optimization methods to speed up content loading. It is important to understand that this method is not suitable for reducing TTFB (time to first byte), as it is aimed at improving page rendering in the client's browser and the loading of site resources.
5. Caching of static content. Speeds up the loading of web pages by caching the pages and the resources they link to in the visitor's browser. Since this caching occurs on the client side rather than the server side, the initial page load speed remains the same, but subsequent page transitions or site visits can be much faster or even imperceptible if the site and caching are configured correctly.