经常发生，随着代码库的增长，Web应用程序（站点）开始工作较慢。该页面需要很长时间才能加载。所有这些都使最终用户烦恼，引起流失和流行程度较低。在互联网上，您可以找到消除这种缺陷的许多技巧和方法。但是我还将提供一些在某些情况下可能非常合适的非标准解决方案。我想鼓励读者从一开始就制作一个优化的应用程序。

这一切都取决于Web应用程序的类型和特定情况，但是我将告诉您如何使Web应用程序更快，更响应。我将Web应用程序的优化分为两个部分：前端优化和后端优化。

前端优化

您需要从搜索引擎的角度进行优化的所有内容都会告诉您https://pagespeed.web.dev/

图像压缩

用户不需要最高质量的图片，就足够了。为了获得更大的结果，您可以将图像转换为WebP格式，此格式的文件比JPEG小26％。

减少对服务器的请求数量

也就是说，将所有JS文件组合到一个文件中，或并行下载。 CSS文件相同。减少使用内联图标的图标数量。

Minification JS，CSS，HTML

WebPack在生产模式下构建它们时默认情况下会将JS和CSS文件减小。但这不会删除无用的样式或课程。为此，您可以使用诸如https://purgecss.com/的库
不要忘记检查依赖项，仅连接使用的功能。

浏览器的缓存

PWA是允许您在浏览器中缓存数据的工具之一，以便您可以在没有Internet的情况下完全使用Web应用程序。但是，如果您不想太多潜入其中，则可以将Exes exes HTTP标头设置，并且静态文件将在浏览器中自动缓存。
您还可以使用本地存储，Cookie，会话存储，索引DB，Web SQL，“缓存存储”，如您所见。不同的存放物具有其优势和缺点。

网络插座

WebSocket是一项非常强大的技术，可让您聆听服务器并实时更新来自服务器的数据。它们允许您减少对服务器的请求数量，并使用它更改小数据。

懒惰加载

不必一次下载页面的所有内容。屏幕外，手风琴，选项卡或其他隐藏的内容可以在以后使用AJAX请求或WebSockets加载。
请记住，这可能会影响搜索引擎对页面的索引，尽管他们说他们知道如何使用此类页面。

CDN

最终用户越接近服务器，内容将越快加载，因此将静态数据放在CDN服务器上越有意义。
简而言之，CDN是将文件重复的一组服务器。这些服务器位于不同的地理区域，并在要求时，用户从最近的一个区域接收文件。

后端优化

opcache

如果您在PHP中开发，则可以在大多数情况下安全地启用它。
由于整个站点的代码不会太快变化，因此不需要从头开始编译。 PHP可以缓存已编译的代码，这使他的工作更快。

拉链或GZIP压缩

诸如Apache和Nginx之类的Web服务器可以即时压缩数据。

可以很容易地使用nginx

server {
    ...
    gzip off;
    ...
}

两个模块负责Apache中的压缩。第一个模块称为mod_deflate和第二个mod_gzip，只需要启用其中一个。但这在服务器上增加了额外的负载。使用mod_gzip，您需要自己压缩每个文件并将其上传到网站root。

数据库优化

通常，服务器本身迅速工作，在大多数情况下，由于对数据库的大量请求，服务器的长响应发生。
在这种情况下，有必要检查n+1请求问题是否没有出现，例如在周期中发生请求时。如果解决此问题，则有必要检查是否插入所有必要的索引。数据库优化是一个单独的大主题，我不会在本文中关注。
数据处理方法（例如数据缓存）和排队某些请求扮演着重要角色。我将在接下来的两个点中详细讨论这一点。

数据缓存

大多数数据很少发生变化，以致使用高速数据存储将其缓存是正确的。根据速度，可靠性，成本和数据量，有不同的存放物，例如文件，memcache，redis等。

尾巴

在提出请求时必须排队的同时工作的所有功能。
例如，我们保存订单，结果 - 我们需要获取订单号。将订单保存在数据库中，将有关它的信息通过第三方API传输给经理，向客户和商店管理员发送信件 - 所有这些功能都必须排队。这不仅有助于卸载服务器，还可以减少数据库的负载。

缩放

如果这些都没有帮助，则可能无法应付大量负载，那么您需要采用更强大的服务器。这是最简单的缩放（垂直缩放）。
但是最终，您需要考虑水平缩放。它也不同，具体取决于负载最重要的位置。提出多个服务器实例并安装负载平衡器，以平衡这些服务器之间的负载。但是，假设有一些瓶颈，其中服务器的容量被用于最大值，例如渲染，转换或文件生成等。在这种情况下，此类功能将转移到单独的服务中，进而将其分开缩放。现在有许多工具和服务可以根据其加载自动扩展您的应用程序。
还可以选择切换到无服务器技术，这将使您不考虑扩展。
还碰巧有必要水平扩展数据库，在这种情况下，使用了不同的复制方法。

我描述了可以提高Web应用程序速度的主要解决方案。无论如何，都必须考虑Web应用程序的类型，结构及其目的。