如何减少wordpress中的dom元素个数

Question

如何减少 wordpress 网站上的 DOM 元素数量以提高性能？

Answer 1

如果您正在寻求提高您的网站加载速度，您可以做一些事情并对其进行优化。 首先，访问Pingdom这是一个免费的在线工具，可让您从不同位置测试网站的速度。

现在，一旦您完成了网站速度分析，您现在就可以按照网站速度优化的过程进行操作了。 有些事情会使您的网站变慢，例如您的 web 托管、WordPress 配置、页面大小、外部脚本和插件。 使用优质托管：始终使用优质托管 WordPress 托管，例如 WP Engine 或 Namecheap。 使用缓存插件：缓存可以使您的 WordPress 站点的速度提高 2 倍到 5 倍。 从这里阅读指南以使用缓存插件。 优化图像：您应该始终优化您的网站图像，这将有助于减小图像大小，从而有助于更快地加载您的网站的页面大小。 使用内容交付网络 (CDN)：始终使用内容交付网络来优化您的 WordPress 网站速度。 您可以使用 Maxcdn 或 Cloudflare 获得良好的 CDN。

减少外部 HTTP 请求：您可以通过禁用脚本和 styles 或将它们合并到一个文件中来减少所有这些外部 HTTP 请求。

优化 WordPress 数据库：使用 WordPress 一段时间后，您的数据库将有很多您可能不再需要的信息。 为了提高性能，您可以优化数据库以消除所有不必要的信息。 使用任何 WordPress 数据库优化器插件（例如 wp sweep）来优化您的 WordPress 数据库。

启用 GZIP 压缩：将此代码添加到您的 hta 访问文件中。

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts

  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml



# Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

遵循这些提示，我相信您将能够加快您的 wordpress 网站的速度。

参考： https://wordpress.org/support/topic/page-loading-5/

Answer 2

就个人而言，我认为 DOM 不会对性能产生太大影响。 一方面，我建议你缩小你的js，css和html代码。 另外，尝试将您的 js 和 css 文件合并到一个公共文件夹中，以减少 http 请求。

这是我建议的一些缩小器

css => https://cssminifier.com/

js => https://javascript-minifier.com/

或者如果你想做所有=> https://refresh-sf.com/

Answer 3

有一个关于这个的问题。 如果你想在 .html 上工作： 减少 DOM 元素数量的最佳方法

减少请求实际上有类似的结果。