25个可在WordPress中优化的外部脚本:加速字体,分析,YouTube视频,WooCommerce,第三方脚本

外部脚本 减慢您的WordPress网站?


这些都是可以从您的网站外部获取信息的东西:Google字体,分析,嵌入式YouTube视频,职位发布,Gravatar,甚至评论和社交共享插件.

您可以通过在本地托管文件(字体,分析,Facebook Pixel),使用Asset CleanUp插件有选择地禁用脚本以及添加浏览器提示(例如预连接和预取)来优化WordPress中的外部脚本。如果速度对您很重要,则通常应避免使用某些插件和脚本(例如AdSense)。无论剩下什么,都要确定性能上的牺牲是否值得,是否应该删除它或寻找替代方法.

外部脚本几乎总是在减少DNS查找下的GTmetrix中显示错误:

WordPress外部脚本

以下是优化第三方脚本的方法:

1.查找外部脚本

GTmetrix
通过GTmetrix(我推荐的工具)运行您的网站,然后查看您的PageSpeed和YSlow选项卡。如果您展开项目并看到同一外部脚本(或插件)在整个报告中显示多次,则可能意味着这会降低WordPress网站的运行速度。您还可以使用GTmetrix Waterfall选项卡找出每种资源加载所需的时间.

WordPress外部脚本

查询监控器
查询监控器 让您查看最慢的加载脚本,样式和插件:

查询监控器脚本

查询监视器慢插件

2.禁用未使用的脚本,样式,插件

某些插件会在您整个网站上加载,无论是否正在使用.

资产清理 让您有选择地从特定内容中禁用不必要的脚本,样式和插件。这样可以缩短加载时间,同时减少 HTTP请求. 它还允许您在本地托管字体,预连接,预加载和禁用未使用的WordPress功能.

安装插件,编辑页面,然后禁用该页面上未使用的所有插件或请求:

外部第三方脚本

禁用WordPress外部脚本

资产清理功能:

  • 禁用某些内容上未使用的脚本/插件
  • 缩小,合并,延迟和缓存CSS + JavaScript
  • 在本地预连接,预加载,合并和托管字体
  • 启用CDN URL重写以确保文件得到优化
  • 禁用嵌入,破折号和常用功能
  • 部分或完全禁用XML-RPC协议支持
  • 通过删除代码中不必要的代码来优化HTML
  • 在整个站点上按帖子类型或RegEx(高级功能)在一页上卸载

选择性禁用插件(示例)

  • 在没有滑块的内容上禁用滑块插件
  • 在没有丰富网页摘要的内容上禁用丰富网页摘要插件
  • 在没有联系表单的情况下禁用内容上的联系表单插件
  • 禁用未显示的AdSense或会员链接
  • 在所有页面上禁用社交共享插件(因为它通常用于博客文章)
  • 在非电子商务页面上禁用WooCommerce脚本,样式,购物车片段

3.预连接,预取和预加载外部脚本

对于无法选择性禁用的脚本,预先连接它们有助于浏览器预测它们。这不会提高GTmetrix分数,但可以缩短外部脚本的加载时间.

Pre *派对资源提示 支持DNS预取,预呈现,预连接,预取和预加载,它们用作 浏览器资源提示. 所有这些都有助于更快地加载外部资源,据我所知,WP Rocket仅支持预加载和预取,但不支持预连接.

定义(来源:WP Rocket)

  • 预连接:告诉浏览器建立与外部资源的连接.
  • 预取:告诉浏览器下载用户可能要求的预期文件.
  • DNS预取:浏览器在用户浏览时在后台执行DNS查找.
  • 预渲染:告诉浏览器根据用户浏览模式下载整个页面.
  • 预载:告诉浏览器需要导航资源,并尽快获取.

步骤1:复制您在网站上使用的所有外部域(在GTmetrix和Query Monitor报告中找到它们),否则,以下是 常见的预取域 来自Github:

第2步:将它们添加到您的Pre * Party Resource Hints插件:

派对前资源提示

如果您使用的是WP Rocket,则可以预取它们(位于“预加载”标签中):

预取DNS请求

4.延迟JavaScript解析

延迟解析JavaScript 告诉浏览器等待下载JavaScript,直到下载完所有其他内容.

如果您使用的是WP Rocket,请启用 延迟加载JavaScript 在“文件优化”选项卡中:

延迟加载JavaScript

如果您的缓存插件不支持此功能,则可以使用 异步JavaScript插件

异步JavaScript

5.在本地托管Google字体

在本地托管字体应修复GTmetrix中大多数与字体有关的错误.

您可以使用 自托管的Google字体, 皮肤生长因子, 或资产清理.

但是,优化字体的最佳方法是直接从Google字体网站下载字体,然后使用类似工具将其转换为网络字体文件 Transfonter, 然后将它们添加到您的CSS中。确保对字体和粗细的要求不高,因为每个字体和粗细都会增加请求.

谷歌字体GTmetrix

步骤1:从Google字体下载您的字体.

第2步:使用Transfonter将它们转换为Web字体文件.

Transfonter-Google-Font-Conversion

第三步:将网络字体文件上传到wp-content / uploads.

例:

  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff2

第四步:将自定义字体添加到CSS.

stylesheet.css中的默认URL:
src:url(’Roboto-Bold.woff2’)format(’woff2’),
url(’Roboto-Bold.woff’)format(’woff’);

将它们更改为:
src:url(’http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2’)格式(’woff2’),
网址(’http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff’)格式(’woff’);

第5步:在WordPress文本编辑器中测试字体.

测试中

自定义字体测试

自定义字体测试

6.在本地托管Google Analytics(分析)

如果看到 利用浏览器缓存 问题,在本地托管您的Google Analytics(分析)跟踪代码将解决此问题。您可以使用 WP Rocket的Google跟踪, CAOS分析, 要么 禁用WP.

利用Brower-Caching-Google-Analytics

7.不惜一切代价避免使用Google AdSense

Google AdSense是最难优化的外部资源之一,我建议您使用联属网络营销,因为它不会降低您网站的运行速度,而且利润更高,更个性化。我通常每年通过联属网络营销达到13万+,因此请务必阅读该指南.

黄金产品专家

“通常情况下,有一些可以改进的事情在您的掌控之中,但最终要权衡取舍:货币化能弥补速度上的损失吗?”

金斯塔

“这就是为什么除非您的收入模型围绕第三方广告,否则不要将其放在您的WordPress网站上。”

Cloudflare轨道炮 是优化AdSense的另一种选择,因为它可以加快动态内容的速度.

Cloudflare轨道炮

8.仅在联系页面上使用Google Maps

看起来不错吧?

与其嵌入地图,不如使用带有行车路线链接的图像.

如果您进行嵌入,请仅在需要它们的页面(联系页面和针对实际位置的页面)上使用Google地图。切勿在页脚,小部件或站点范围内出现的区域中出现.

谷歌地图

9.不要在Google跟踪代码管理器中过度跟踪

有人会说Google跟踪代码管理器实际上可以加快您的网站速度,因为它将网站上的所有Javascript替换为一个脚本,该脚本是由GTM触发的.

但是现实是,除非您有一个未经优化的大型网站,该网站使用许多第三方脚本,否则Google Tag Manager可能会降低您的网站速度,在这种情况下,GTM可能会加快它的速度.

Google跟踪代码管理器速度

避免 常见的陷阱 并且不使用太多标签可以有所帮助,但是我不使用GTM。实际上,老实说我从未尝试过。但我确实知道,我在很多糟糕的GTmetrix报告中都看到了它.

我也推荐 适用于WordPress插件的Google跟踪代码管理器 只会为每个页面启动所需的标签(加快GTM的加载时间),并使代码易于添加.

10.用截图替换社交媒体帖子

嵌入式帖子(例如Tweets)可以用屏幕截图代替.

这需要一些时间,但是您实际上可以使它们看起来非常好。由于这些都是图片,并且不必从Twitter提取信息,因此加载起来比嵌入要快得多.

2019年托管投票

2017-WordPress-托管-FB-民意调查

Elementor托管建议

2019年7月托管建议

2016-WordPress-托管-FB-民意调查

Elementor的最爱托管

2018托管建议

我是怎么做到的
在我的博客上,我使用了 2列布局 并测量每列为340像素(宽度)。接下来,我使用了 放大 Chrome扩展程序与 很棒的截图 要了解缩放比例,我需要获取有关Tweet的良好屏幕截图。我拍摄了每个推文的屏幕截图,然后将它们裁剪为恰好340像素。接下来,我比较了所有屏幕截图,以查看哪些屏幕截图具有相似的高度,然后对其进行裁剪或操作以使2个屏幕截图具有相同的高度。当您有2条宽度/高度相同的推文时,它们在列中并排看起来很棒.

是的,我建议 SiteGround 用于托管或 云道 / 金斯塔. 那里有很多不好的托管评论;查看Facebook的民意调查,您会看到谁是获胜者.

11.延迟加载YouTube视频

嵌入式视频可以轻松增加2秒以上的加载时间.

可以通过延迟加载和将iframe替换为预览图像来优化视频,因此只有在人们点击播放按钮后才加载视频(如下面的示例视频).

两者都可以在WP Rocket中完成:

WP火箭延迟加载

WP YouTube Lyte 是另一个不错的选择,它支持浅色的YouTube嵌入(单击播放按钮时仅调用“胖YouTube播放器”)并在本地缓存YouTube缩略图.

或者,这 YouTube嵌入教程 可以使用.

12.禁用墓碑

如果您有很多博客评论, 墓碑 真的可以减慢发布速度.

我最终决定禁用Gravatars,这意味着注释中不会显示任何面孔. WP Rocket的博客 也不使用Gravatars(仅使用文字)。看起来有些无聊,但是如果速度很重要,则可能只想使用CSS设置注释样式并禁用Gravatars。 Gravatar缓存插件对我没用,我不想隐藏或破坏评论.

以下是一些选择:

  • 禁用Gravatars(仅显示文字,日期等)
  • 使用Optimum,Harrys或FV缓存Gravatar(对我而言不起作用)
  • 将评论分为几页,因此仅显示几个Gravatar

我不使用Gravatars:

没有Gravatars的评论

13.禁用统计插件

您是否正在使用插件来收集统计信息?

这会使您的网站变慢,并且您不需要插件.

您可以在Google Analytics(分析)+ Google Search Console中看到所需的一切,而不会减慢您的网站速度。您不需要JetPack,WP统计信息或其他统计信息插件.

Google Search Console性能仪表板

14.禁用断开的链接检查器

损坏的链接检查器会持续进行扫描,这就是为什么它被许多主机禁止的原因.

我仍然喜欢这个插件,每隔几个月安装/运行一次。但是,完成后,我会立即将其删除。您也可以尝试 博士链接检查 还会扫描整个网站上的损坏链接,但是您无法像使用“损坏的链接检查器”那样直接在WordPress信息中心中修复链接。因此,要么使用它,然后立即将其删除,要么使用Dr. Link Check.

15.禁用未使用的JetPack模块

首先,禁用所有未使用的JetPack模块.

但是,如果仅使用几个功能,为什么还要安装功能强大的插件?如果需要统计信息,请使用Google Analytics(分析),Cloudflare(免费CDN),UpdraftPlus(用于备份),WP Rocket(用于延迟加载)以及安全性,我会使用Wordfence,Sucuri或iThemes Security.

您不需要所有这些模块,更不用说膨胀的插件了.
确定需要的功能的优先级,并为这些功能安装单个插件。毕竟,这就是轻量级主题的整个概念(购买功能最少的主题,并依靠插件来添加所需的主题)。不要安装a肿的主题或插件,而会因速度下降而陷入困境.

步骤1:转到您的JetPack仪表板,向下滚动,然后单击“调试”.

JetPack调试

第2步:访问WordPress网站上可用的JetPack模块的完整列表.

JetPack模块访问

第三步:停用所有您不使用的模块.

JetPack模块

16.禁用高CPU社交共享插件

社交分享按钮必须从Facebook,Twitter等中获取分享计数.

如果您的插件可以选择定期或在非高峰时间进行更新,则比实时更新这些计数要好得多。但是,您可能只想知道哪些社交共享插件是最快,最轻巧的,所以这里有一些.

社交共享插件请求

推荐的(轻量级)社交共享插件:

17.禁用并更换其他高级CPU插件

WP Engine,GoDaddy和其他主机是有原因的 黑名单 某些类型的插件.

大多数速度较慢的WordPress插件包括社交共享,统计信息,滑块,备份,页面构建器,日历,聊天,联系表单,投资组合,相关帖子,站点地图,Wordfence,WPML,WooCommerce,JetPack,以及运行正在进行的扫描或流程的插件。可以使用查询监视器或您的GTmetrix Waterfall报告找到慢速插件.

  1. 添加此
  2. AdSense点击欺诈监控
  3. 多合一活动日历
  4. 备用好友
  5. 海狸生成器
  6. 更好的WordPress Google XML Sitemaps
  7. 损坏的链接检查器(使用Dr. Link Check)
  8. WordPress的持续联系
  9. 联络表格7
  10. 内容相关帖子
  11. Digi自动链接
  12. Disqus评论系统
  13. Divi Builder
  14. 基本网格
  15. 脸书聊天
  16. 花式画廊
  17. 模糊SEO助推器
  18. 谷歌分析
  19. Google语言翻译器
  20. 查看65个慢速WordPress插件的完整列表

18.禁用WooCommerce脚本,样式,购物车片段

所有WooCommerce网站都带有额外的脚本,样式和购物车片段.

这些将在整个网站上加载,甚至在非WooCommerce页面上也是如此。仅购物车碎片会占用多达 10秒 装载。在顶部 3 WooCommerce样式表 以及WooCommerce生成的多个脚本(以及WooCommerce网站通常需要更多插件的事实),难怪其中大多数网站的页面加载时间通常都很慢.

WooCommerce购物车片段

选项1:资产清理
在不需要加载的页面上有选择地禁用WooCommerce功能.

资产清理WooCommerce

选项2:使用来自Github的代码
禁用WooCommerce脚本: 加上这个  functions.php:

禁用WooCommerce样式: 参见WooCommerce的 教程.

禁用WooCommerce购物车片段: 加上这个 到funtions.php:

选项3:渗透物
Kinsta的Perfmatters插件 一键式停用所有这些功能,还有许多其他功能 特征 优化您的网站,例如禁用不必要的WordPress功能。我在自己的网站上使用它.

性能优化woocommerce优化

19. Disqus条件加载

Disqus和许多评论插件可以创建外部请求.

Disqus条件负载 是Disqus的高级版本,其中包括延迟加载和脚本禁用。如果Disqus在您的GTmetrix报表中创建请求,则可以修复大多数请求.

Disqus条件负载

20.选择性地加载联系表7

尽管我不喜欢联系表格7,因为它加载时间很慢,但是您可以 仅在使用联系表单的页面上加载JavaScript + Contact Form 7样式表. 否则,它们将在每个页面上加载。我建议使用Gravity Forms或其他更快的表单插件.

您还可以使用资产清理功能在不使用的页面上禁用联系表单:

资产清理选择性禁用

21.为Facebook Pixel启用缓存

WP火箭的 Facebook Pixel附加组件 让您为Facebook Pixel应用浏览缓存.

据我所知,这是优化Facebook Pixel的唯一方法,它使您可以跟踪谁访问了您的网站,并使用Facebook Ads和其他功能对其进行跟进。.

Facebook Pixel浏览器缓存

22.正确配置缓存插件

即使是 很重要, 大多数人没有正确配置其缓存插件.

许多GTmetrix错误可能与您的缓存插件可以处理的事情有关(缩小和合并文件,推迟JavaScript,缓存,添加到期标头,视频优化,从CDN提供文件以及在本地托管Google Fonts + Analytics)。由于不同的缓存插件具有不同的功能,因此您应该仔细检查所有设置并进行严格测试,检查启用功能如何导致更快的加载时间和更高的得分.

我个人使用WP Rocket是因为它具有大多数缓存插件没有的许多功能(在本地托管字体,分析和Facebook Pixel,延迟加载图像和视频,数据库清理,预加载,心跳控制以及Cloudflare和多个CDN的集成)像StackPath)。否则,您可能必须安装7个额外的插件才能获得这些优化.

缓存插件教程:

WP火箭文件优化

23. CDN无效

CDN非常适合优化以下文件 您的 WordPress网站.

但就外部脚本而言,这无济于事。我什至告诉StackPath,他说CDN可以帮助许多其他事情,但外部脚本并不是其中之一。这很有道理-如何卸载甚至没有托管您网站的内容?哦,至少他们是诚实的.

我还是推荐 云耀斑 和StackPath,因为它们极大地帮助将资源卸载到其数据中心(使服务器更轻松),并使用Cloudflare页面规则,Hotlink Protection之类的功能及其安全性功能来加速和保护您的网站。更多的CDN意味着更多的数据中心可以托管您的文件,这意味着可以更快地交付您的内容。这就是为什么我同时使用Cloudflare和StackPath的CDN.

24.使用Cloudflare工作者

工人 是一个JavaScript执行环境,允许开发人员在不配置或维护基础结构的情况下扩展现有应用程序或创建新应用程序。定价为$ 5 /月+使用费(前1000万个由工人提供的请求是免费的,然后$ .50每百万个请求)。可以将工作进程配置为运行特定的页面,子域等. 在这里测试.

25.在较慢的时间内运行高CPU任务

备份,断开的链接检查器和其他占用大量CPU资源的任务应在较慢的时间内运行。简单.

经常问的问题

✅我如何找到哪些第三方脚本会使我的网站变慢?

这些通常会显示在GTmetrix YSlow选项卡的“减少DNS查找”部分中。一些最常见的第三方脚本是Google字体,分析,地图,AdSense,Google跟踪代码管理器,社交媒体请求,嵌入式YouTube视频和Gravatars.

✅如何优化Google字体?

组合Google字体并将其托管在本地是使字体加载速度更快的最佳方法。您还可以预取和预连接字体。尝试使用OMGF插件.

✅ GTmetrix中的社交媒体错误怎么办?

这些通常是由社交共享按钮,社交媒体小部件或您网站上的任何其他社交媒体元素引起的。这些通常无法优化-最重要的部分是选择轻量级的社交共享插件(如果您决定使用一个插件).

✅如何修复Google Analytics(分析)的杠杆浏览器缓存问题?

您可以尝试通过WP Rocket(或您使用的任何缓存插件)或CAOS Analytics插件在本地托管Google Analytics(分析)跟踪代码。但是,修复此错误通常不会直接改善加载时间.

✅我可以加快嵌入式YouTube视频的加载速度吗?

是的,WP Rocket或WP YouTube Lyte等插件可让您延迟加载视频并将iframe替换为预览图像。这样可以节省几秒钟的内容加载时间.

您的GTmetrix现在如何报告?

我的首页是100%,但我的帖子通常会给人留下深刻的印象.

我将在6.28MB的页面上花费1.7s的加载时间,每天有196个请求.

最初,使我的网站运行缓慢的外部脚本是Google字体,Google Analytics(分析),嵌入式YouTube视频,嵌入式Tweets,而我在配置StackPath的CDN时遇到了一些问题。但是一旦我实现了本文中的步骤(并牺牲了一两个插件),我的整个WordPress网站通常就会以惊人的速度加载. Cloudways托管 也有帮助.

2019 GTmetrix报告

从100%撤回这篇文章的主要内容是那些嵌入的Github代码。但是,嘿,您不一定总是完美的,至少我在预先连接和预取的列表中添加了Github!

需要帮忙?

给我留言或联系我们的团队以了解我们的WordPress速度服务.

干杯,
汤姆

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map