任何问题请联系WX:uu16853

买模板送网站采集器 让你轻松放开双手运营网站!

购买更多有优惠!

WordPress Cache Enabler,htaccess,W3 Total Cache,WP Fastest Cache,浏览器缓存,缓存插件 文字详细教程

WordPress网站设置缓存机制与不设置缓存机制,网站的加载速度有天壤之别。Google PageSpeed Insights或GTmatrix或Pingdom等工具可能会建议您通过htaccess或者Nginx设置浏览器缓存。 或者使用现有的WordPress缓存插件实现WordPress网站的浏览器缓存。我们在另外一篇文章《网站测速性能测试深入浅出教程[附15款常用网站测速工具]》详细地说明了网站测速方法,有兴趣的站长也可以参考阅读一下。 好吧,在本文中,我们将一起探讨如何解决网站测速工具提到的浏览器缓存设置提醒。此外,还将会一些在WordPress中实现浏览器缓存的简单但非常有效的技术。 下面根据我们的经验,利用浏览器缓存帮助您将网站加载速度提高多达50%。 文章阅读导航 什么是优化浏览器缓存? 浏览器缓存如何加速您的网站 如何修复浏览器缓存警告 在WordPress中启用浏览器缓存 在Apache服务器上通过htaccess设置浏览器缓存(不使用WordPress插件) 在Web服务器NGINX上启用浏览器缓存(不使用WordPress插件) 使用WordPress缓存插件实现浏览器缓存 #1 WP Fastest Cache #2 Cache Enabler – WordPress Cache #3 W3 Total Cache 什么是优化浏览器缓存? 优化浏览器缓存即,设置浏览器本地存储网站的可缓存资源的时间值(即图像,JavaScript和CSS),减少客户端访问相同页面时的HTTP请求所需要的资源下载,提高了站点加载速度。 在使用Google Pagespeed进行网站速度测试时,您通常会注意到建议你为将WordPress的一些资源设置浏览器缓。 在大多数情况下,可缓存资源是可以由浏览器临时存储的网站文件(例如图像,JavaScript和CSS)。 浏览器缓存如何加速您的网站 在进入本文优化WordPress网站浏览器缓存细节之前,让我们首先了解WordPress中的浏览器缓存是如何工作的?以及它是如何更快地加载您的网页。 Web浏览器需要从服务器检索许多资源(即HTML文件,CSS文件,JS文件,文本,图像等)以便加载网站。 Web缓存是Web浏览器和软件应用程序中用于“临时存储”或“记住”本地磁盘上访问过的网页资源的技术。此临时存储的数据称为“Web缓存”或“HTTP缓存”。 当你再次访问同一个网站时。Web浏览器仅从服务器端下载来自网站的更新内容,“临时存储”数据则直接从你的本地电脑读取。 因此,Web缓存有助于减少带宽使用,服务器负载等。因此,利用浏览器缓存对于加快网页加载非常重要。 换句话说,它命令您的Web浏览器(i)在本地缓存网站文件一段时间(ii)并从本地存储加载文件以供下次访问,直到缓存时间失效。 (iii)因此,从本地存储加载网站文件有助于Web浏览器更快地呈现和显示网站。 如何修复浏览器缓存警告 为了修复浏览器缓存设置警告,您的Web服务器应该允许Web浏览器临时在本地磁盘上存储访问过的Web页面资源。此外,当用户再次访问您的站点时,由于本地已经缓存了部分可用静态资源,它将加载更快。因此,您会发现网站加载速度有了显着提高。 那么问题是如何启用WordPress站点的浏览器缓存功能? 要在WordPress中启用浏览器缓存,您需要通过在HTTP标头中添加缓存控制标头和ETag标头来设置内容过期日期。 Cache-Control状态通过Web浏览器指出特定文件的缓存周期。 而ETag用于验证缓存资源和请求资源之间的更改。 我们可以设置一个特定的时间段(数月或数年)来保持本地缓存资源(即HTML,CSS或JS文件,图像等)。 温馨提示:请根据资源更改的频率设置到期日期,或者换句话说,更新网站静态资源的频率。而不是照本宣科参照下面提到的方法,应该因地制宜适当调整缓存策略。 在WordPress中启用浏览器缓存 你可以通过以下方式设置你的WordPress网站的浏览器缓存: Adding Expires Headers-HTTP添加Expires头 Adding […]

WordPress WordPress垃圾评论,WordPress评论设置,垃圾评论拦截 文字详细教程

WordPress作为一款开源的CMS内容管理系统,受到众多站长的青睐。但这个开箱即用的CMS系统有烦人的事情就是必须处理大量的垃圾评论。 值得庆幸的是,您可以通过安装插件,一些技巧或者设置,即可拦截过滤掉99%垃圾评论。作为站长,我们不要浪费时间来管理垃圾评论,而应该将精力集中在经营网站内容上。 过多的垃圾评论会损害您的网站。它可能会影响您的搜索引擎排名,也会影响您网站的评论用户的体验,甚至可能导致网站安全隐患。因此,通过一些策略将这些“垃圾”拒之门外,还是非常值得您花时间。 那么,如何拦截WordPress垃圾评论呢?一共有以下五种办法: 使用WP内置功能拦截垃圾评论的7种方法 使用插件拦截WordPress垃圾评论 使用验证码拦截WordPress垃圾评论 使用第三方评论系统接管WP评论功能 使用Web应用程序防火墙拦截WordPress垃圾评论 今天我们先来具体讲解,如何使用WordPress内置功能拦截垃圾评论。使用WP内置功能拦截垃圾评论的7种方法: 与WordPress垃圾评论作斗争,应该做的第一件事情就是进行WordPress评论设置。您可以通过WordPress仪表盘,“设置”-“讨论”进行操作。 讨论设置界面 在这里,您可以: 完全禁用评论 关闭匿名评论 启用评论审核 仅允许来自登录用户的评论 创建列入黑名单的单词列表 减少或禁止评论中的链接 禁用个别帖子的评论 您还可以通过文章编辑界面禁用单篇文章的评论。下面我们来逐一说明每种方法。 1. 完全禁用评论功能 这是最懒人的一种办法。或许你的网站根本不需要使用到评论功能,为了保护自己免受垃圾评论的骚扰,干脆禁用它们。最简单的方法之一就是取消选中“ 设置”>“讨论”下的“ 允许他人在新文章上发表评论”选项。如下图所示: 禁用评论功能 这将关闭所有新文章的评论。您也可以关闭pingback。 请注意,您已经发布的文章并未关闭评论。如果您要关闭这些功能,则需要分别对每个文章进行此操作。后面我们会说到这一点。 完成设置后,滚动到屏幕底部,然后单击“ 保存更改”按钮。现在将禁用所有评论。 2. 关闭匿名评论 另一个选择是关闭匿名评论。WordPress要求访客提供四项信息:评论内容,昵称,电子邮件和网站。 如果启用了匿名评论,则将不需要填写这些信息。你的网站将会有大量的垃圾评论涌入。 要在WordPress中禁用匿名评论,只需在WP仪表盘后台的“设置”>“讨论”界面,勾选上“ 评论作者必须填入姓名和电子邮件地址 ”选项。 关闭匿名评论 这将增加僵尸程序自动评论的难度(绝大多数垃圾评论来自于僵尸程序),但并非没有可能。它也可能阻止人们发表恶意评论。 3. 启用评论审核 在我看来,如果你的WordPress网站如果真实的评论留言并不是十分频繁,或者启用评论审核是一个很好的方法。 首先是能够手动批准每个评论。虽然这不会减少垃圾评论,但可以确保您网站访客仅看到您已批准的高质量评论。 第二个是评论审核规则。例如,如果评论包含一定数量或更多的链接,则您可以自动保留评论。您还可以建立一个单词,名称,URL,IP等的列表,匹配这些列表规则的评论也应保留以进行审核。 你还可以设置有评论等待审核时,发邮件告知你。 要审核所有评论,请选中评论必须经人工批准。 要审核来自新评论者的评论,请选中评论作者先前须有评论通过了审核。 要收到等待审核评论的电子邮件(重要的是,您可以进行审核并迅速批准或丢弃它),请选中“发送电子邮件通知我……有评论等待审核时”选项。 启用评论审核 4. 仅允许已登录用户发表评论 如果要进一步限制可以发表评论的人员,则可以选择仅允许来自登录站点用户评论。如果您的站点属性为社交网站,并且您想鼓励访客评论,但将其他评论者拒之门外,则可以这样做。 为此,请在“ 其他评论设置”部分,选中“ 用户必须注册并登录才可以发表评论”选项。 允许登录用户发表评论 您还需要考虑用于用户注册的设置-您将允许任何人进行注册还是审核注册?您可以通过转到设置>常规来进行访问注册设置。 5. […]

WordPress 延时加载,延时加载js,异步加载,异步加载js,渲染阻塞 文字详细教程

每次页面渲染时,WordPress都会加载一系列外部引用JavaScript。 这些包括由WordPress添加的标准脚本以及由使用wp_enqueue_scripts函数的主题和插件添加的一些脚本。 根据脚本的类型,它可能位于网页的头部,正文或页脚部分。 位于页面头部和主体部分内的脚本可能会导致页面加载延迟,因为浏览器甚至在页面内容之前尝试加载和执行这些脚本。 这就是为什么这些脚本被称为渲染阻塞javascripts。 解决此问题的最直接的方法是将所有脚本移动到页面的页脚,但如果这种办法不可行,则可以考虑为这些脚本添加延迟或异步属性标记,就是我们常常挂在挂在嘴边的延迟加载、异步加载。 让我们深入了解这些属性以及它们如何帮助您改善页面加载时间。 什么是异步和延迟属性? 以下是async和defer属性的作用: 异步属性:async属性即异步加载脚本。 换句话说,确保脚本与页面的其他相关内容一起异步加载。 延迟属性:延迟属性即延迟加载脚本。 它确保仅在页面的所有内容完成加载后才执行脚本。 所有现代主流浏览器都支持这两个属性,包括Firefox,Chrome和Internet Explorer。 自IE10以来,Internet Explorer也已经添加了对这些属性的支持。 具有async和defer属性的脚本标记示例如下: <script src=’http://sitename.com/js/scripts.js’ async=’async’ type=’text/javascript’></script> <script src=’http://sitename.com/js/scripts.js’ defer=’defer’ type=’text/javascript’></script> 将“异步/延迟”属性添加到阻塞渲染脚本 在这个章节中,我们将介绍三种不同的方法,将这些属性添加到阻塞渲染javascripts中。 这些方法如下: 方法1:向所有脚本添加延迟/异步。 方法2:向大部分脚本添加延迟/异步,部分例外。 方法3:仅向选择性脚本添加延迟/异步。 (最灵活的方法,因为它允许因地制宜地为脚本添加延迟或者异步属性。) 您可以根据自己的实际情况使用适合您的方法。 方法1:向所有脚本添加延迟/异步属性。 如果您想毫无例外地将async或defer属性添加到所有脚本,则可以使用以下代码。 打开主题的functions.php页面,将此代码添加到页面底部。 /*function to add async to all scripts*/ function js_async_attr($tag){ # 添加异步加载属性到所有js脚本 return str_replace( ‘ src’, ‘ async=”async” src’, […]

WordPress Invisible reCaptcha插件,reCaptcha,reCAPTCHA插件,垃圾评论拦截,验证码插件 文字详细教程

除了使用WordPress自带的评论设置功能及第三方垃圾评论拦截插件,使用评论验证码也是一个很好的办法。 并且随着人工智能的发展,防机器人的技术越来越成熟,验证码技术基本可以做到无感知的程度,在不影响网站用户体验下,能够拦截99%的评论机器人。 今天,我们一起来讨论下垃圾评论拦截的第三种方法-如何使用验证码拦截垃圾评论机器人。 使用WP内置功能拦截垃圾评论的7种方法 使用插件拦截WordPress垃圾评论 使用验证码拦截WordPress垃圾评论 使用第三方评论系统接管WP评论功能 使用Web应用程序防火墙拦截WordPress垃圾评论 在国外的博客圈子,尤其喜欢使用CAPTCHA验证码来作为拦截垃圾评论机器人工具。通过某种表单或问题的形式,用以证明访客是真实的人而不是机器人。有很多很棒的插件,可帮助您将这种策略实施到WordPress网站中,并且其中大多数都是完全免费的。 不过此类验证方法有时候并不友好,尤其是当您使用要求人们识别其中带有某些对象的图像的种类时。但是,现在越来越多的网站正在使用带有“我不是机器人”复选框的验证码字段,机器人无法填写。 Google Captcha (reCAPTCHA) by BestWebSoft reCaptcha by BestWebSoft 说到验证码策略,我们首先应该想到的应该是Google的CAPTCHA(或称为reCAPTCHA),你可以在访问国外的网站时,经常看到它(由于GFW,国内是没办法使用谷歌的reCaptcha)。Google所提供的reCaptcha可能是最干净,最容易使用的工具之一,不会因提出令人困惑的问题或显示难以阅读的字母而损害用户体验。 您绝不希望有人仅仅因为他们对CAPTCHA困惑而离开了您的网站。如果你的网站在国外,小编特别推荐 Google Captcha (reCAPTCHA) by BestWebSoft 插件。 该插件无需让您阅读难以辨认的字母、数字或识别照片中的元素,而只是要求用户在一个框上打勾,以确认它们不是机器人。该框只能手动打勾,机器人是无法做这个勾选动作的。 您需要使用Google的Captcha API来注册您的网站,并选择reCAPTCHA v2作为复选框,或者选择reCAPTCHA v3作为使用JavaScript来检查垃圾评论的验证码,而无需用户进行任何操作。 相关阅读:比WordPress防垃圾留言插件Akismet更好的Invisible reCaptcha 为您的网站注册Google reCAPTCHA 然后,您将获得一个Site Key和一个私钥,然后将其复制到站点上的插件设置界面中。并勾选中Enable ReCAPTCHA设置选项下的“Comments Form”,最后点击“Save Changes”按钮。 reCaptcha插件设置 现在,当用户尝试添加评论时,他们必须首先选中“I’m not a robot”,才可以参与评论。 使用了Captcha插件的评论留言 其他功能包括: 它还适用于注册表单,登录表单,重设密码表单等。 对列入白名单IP隐藏CAPTCHA。 不同的主题风格。 支持多语言和RTL。 其他ReCaptcha插件 除了上述的Google Captcha (reCAPTCHA) by BestWebSoft,还有很多reCaptcha插件可用,其中一些需要联合第三方插件(例如表单插件)一起使用。 […]

WordPress Disqus,WAF,WordPress垃圾评论,垃圾评论拦截 文字详细教程

此前,我们已经深入探讨三种拦截WordPress垃圾评论的方法: 使用WP内置功能拦截垃圾评论的7种方法 使用插件拦截WordPress垃圾评论 使用验证码拦截WordPress垃圾评论 今天我们一起来看看,最后的两种办法:使用第三方评论系统接管WP的评论功能及应用防火墙。 使用第三方评论系统接管WP评论功能 在前三种方法都不符合你的需求时,你还可以考虑更粗暴的办法就是舍弃WP原生评论系统换作第三方评论系统插件。 我们曾经在一个海外的项目上应用过Disqus平台,的确可以拦截99%以上的垃圾评论,站长从不花时间清理垃圾评论。 但是,不能说Disqus没有任何问题。因为您需要付费才能删除Disqus界面广告,否则这可能影响您网站的性能和用户体验。 Disqus Conditional Load 如果你希望在博客上使用Disqus,我们建议使用免费 Disqus Conditional Load 插件。这是由Joel James开发,该插件的最大特征即采用了评论内容延时加载方法,以免降低WordPress网站性能。 以正常方式安装启用插件及注册Disqus。该插件比官方提供的Disqus插件更可靠。 Disqus替代品 如果您对Disqus广告植入的方式感到不舒服,则可以使用其他的第三方评论插件。其中一些改进了内置评论系统,而另一些则直接替换。 Yoast Comment Hacks允许您自定义评论并添加设置,例如禁止在一定长度以下和以上的评论,将首次评论重定向到“感谢”页面,以及清理评论通知电子邮件。 wpDiscuz插件声称自己是“最佳Disqus代替插件”。 Super Socializer可以向您的网站添加社交评论,以便人们可以使用其社交媒体帐户发表评论。 Jetpack的插件包括一系列的设计,提供WordPress.com的一些功能特点,包括使用Akismet拦截垃圾评论。 使用Web应用程序防火墙拦截WordPress垃圾评论 添加诸如Sucuri或Cloudflare等Web应用程序防火墙(WAF)可以大大减少WordPress网站收到的垃圾评论数量。 为什么?因为这些服务位于您的WordPress主机和网站之间,以阻止和过滤所有不良的代理访问量和机器人。有了它们,你甚至可轻松封锁整个国家。 WAF还可以帮助减少带宽和访问次数,从而帮助您节省每月的服务器托管费用。 小结 WordPress附带了一个开箱即用的评论系统,但是有时候该系统某些地方还存在不足。 如果您想保护自己的网站免受垃圾评论的侵扰,则需要采取额外的措施来阻止它。这些可能是: 配置WordPress以阻止或审核您的评论。 安装第三方评论和垃圾评论拦截插件。 创建您自己的插件以防止您网站上的垃圾评论。 如果您使用这些方法之一来阻止WordPress垃圾评论,则可以使您的网站更加安全,并提高用户体验和性能。

WordPress Autoptimize,Autoptimize设置,WordPress优化,WordPress优化插件 文字详细教程

Autoptimize是一个免费的WordPress优化插件。除了HTML,CSS和JavaScript优化之外,Autoptimize还包括针对WordPress网站其他方面的优化功能。 在本文中,我们将分享Autoptimize插件设置教程,以帮助站长提高WordPress网站的性能和页面加载速度。 为什么选择Autoptimize? JS,CSS和HTML优化选项设置 图片优化选项设置 其他优化选项设置 为什么选择Autoptimize? 在深入探讨Autoptimize插件设置之前,让我们先了解下Autoptimize之所以成为众多站长选择的优化插件的三个原因。 Autoptimize的免费版本拥有优化你的WordPress网站的完整功能集。 Autoptimize严格来说是一个优化插件,不执行任何HTML页面缓存。这意味着它与所有Web主机兼容,甚至包括具有自定义页面缓存配置的Web主机。 Autoptimize在WordPress插件市场有超过一百万的激活安装,并持续更新(发布新功能及修复bug)新功能。 JS,CSS和HTML优化选项设置 HTML,CSS和JavaScript是Autoptimize的基础。与其他优化插件一样,深入了解Autoptimize广泛的功能集和设置可能是一项艰巨的任务。为了使事情变得简单,我们已经整合了最佳的“Autoptimize”设置,以提高您网站的性能。 JavaScript选项设置 Autoptimize之JavaScript优化项. (1)Optimize JavaScript Code(JavaScript代码优化) 我们建议启用此选项。启用“optimize JavaScript code”后,Autoptimize将最小化您的JavaScript文件。 (2)Aggregate JS Files(JS文件合并) 启用Autoptimize插件的“aggregate JS files”选项,会将网站所有JavaScript文件合并为一个文件。过去,合并JS和CSS文件是WordPress优化的关键一步。但需要注意的是,现在很多服务器提供商使用支持并行下载和多路复用的HTTP/2服务器 -这意味着合并文件不再像以前那样重要,因为HTTP/2允许同时下载多个文件。话虽如此,聚合CSS和JS文件仍然可能会提升某些类型的WordPress网站的速度,因此我们建议在启用和禁用此选项的情况下测试您的页面速度,再决定是否启用该选项。 (3)Also Aggregate Inline JS(聚合内联JS) “also aggregate inline JS”选项可提取HTML中的内联JS,并将其与Autoptimize的优化过的JS文件合并在一起。由于此选项会导致Autoptimize的缓存体积瞬间增加,因此,除非您有特定的原因要启用它,否则我们建议禁用此选项。 (4)Force JavaScript in(强加载JavaScript) 在大多数情况下,我们不建议强行将JavaScript文件加载到您网站的HTML的 <head> 元素中。强制JS提早加载可能导致渲染阻止元素,这可能会降低您的页面加载速度。如果您有需要在 <head> 元素中加载的JavaScript文件,建议您将这些脚本文件设为Autoptimize排除列表。 (5)Exclude Scripts from Autoptimize(JS优化例外列表) 此选项可设置特定目录和JavaScript文件例外列表(列表内容不进行合并)。默认情况下,Autoptimize排除以下脚本或者目录。 wp-includes/js/dist/ wp-includes/js/tinymce/ js/jquery/jquery.js 请注意,默认情况下,添加要排除的脚本只会影响合并。除非未选中“Misc Options-其他选项”下的“minify excluded CSS and JS […]

WordPress Cache-Control,Google Analytics,Google PageSpeed Insights,浏览器缓存,缓存有效期,缓存策略 文字详细教程

Google PageSpeed Insights是评估网站性能工具之一。但是,它的一些建议(例如“采用高效的缓存策略提供静态资源”警告信息)可能会使缺乏经验的站长感到困惑。 当你对其进行分解时,缓存并不难理解。通过一些调整,在网站上实施最佳代码,以减少加载时间并提高PageSpeed得分。 在这篇文章中,我们将通过“采用高效的缓存策略提供静态资源”警告信息进行讲解,然后,分享解决此问题的一些技巧。 如何理解采用高效的缓存策略提供静态资源? 采用高效的缓存策略提供静态资源的具体措施 如何理解采用高效的缓存策略提供静态资源? 为了了解“采用高效的缓存策略提供静态资源”警告信息,先了解一下Google PageSpeed Insights会有所帮助。如果您是该平台的新手,建议先阅读完整的指南《如何做到Google PageSpeed Insights测试满分》一文。 采用高效的缓存策略提供静态资源是Google PageSpeed返回的许多“诊断结果”之一,可作为改善分数的建议,如下所示: Google PageSpeed Insights之缓存策略 Google建议使用浏览器缓存来减少页面加载时间并提高性能。简而言之,缓存是指用户的浏览器保存站点页面的静态副本。然后,在随后的访问中,可以更快地重新加载此内容,因为浏览器不必连接服务器即可访问所请求的静态资源。 但是,每个缓存的资源都需要指定的到期期限。这会告诉浏览器您网站上的内容何时过时,过期后使用更新的版本替换其缓存的副本。 如果您在性能测试结果中看到“采用高效的缓存策略提供静态资源”警告,则可能意味着以下两种情况之一: 您的站点服务器或第三方服务器缺少Cache-Control或Expires标头。 存在必需的标头,但是有效期很短,因此对性能没有太大影响。 采用高效的缓存策略提供静态资源的具体措施 您可以通过几种不同的方式来修复WordPress网站“采用高效的缓存策略提供静态资源”警告,具体取决于其原因。您可以尝试以下三种解决方案。 1. 添加缓存控制并过期标头 有两个与浏览器缓存相关的标头:Cache-Control(缓存控制)和Expires(缓存有效期)。必须至少存在一个才能为您的站点启用浏览器缓存,因为这是浏览器确定刷新资源之前应保留资源多长时间的方式。 确定这是否是导致“采用高效的缓存策略提供静态资源”警告的一种简单方法是查看每个资源的详细信息。在Google PageSpeed Insights最新版本,您会在“ 缓存TTL ”下看到“None”: 在Google PageSpeed Insights中缓存TTL列表 又或者缓存有效期过短时,最新版的Google PageSpeed Insights也会在“采用高效的缓存策略提供静态资源”警告列表罗列,只是“ 缓存TTL ”展示的是缓存有效期: 浏览器缓存资源缓存有效期过短 Cache-Control标头启用客户端缓存并设置资源的最大使用期限时,Expires标头仅用于指定缓存资源有效期。 Expires在HTTP / 1.1中引入并提供了比Cache-Control更多的选项。它们可用于完成相同的事情,但Expires的数据值是HTTP日期,而Cache-Control max-age允许您指定相对的时间量,以便您可以指定 “请求页面后X小时”。 HTML Cache控件是一个非常类似的问题,并且与缓存教程有很好的链接,可以回答你的大部分问题(例如,[http://www.mnot.net/cache_docs/#EXPIRES).)总结一下, 当您需要更多地控制缓存的方式时,建议对图像和Cache-Control等静态资源使用Expires。via itranslater.com 您不必同时添加两者,因为这可能是多余的。通常推荐使用较新的Cache-Control。但是,某些Web性能工具(例如GTmetrix)仍会检查Expires标头。 如何在Nginx中添加Cache-Control缓存控制标头 要在Nginx中添加Cache-Control标头,可以将以下内容添加到服务器的Nginx配置文件中: location […]

WordPress Async JavaScript,Autoptimize,PageSpeed Insights,WordPress优化,WP Rocket,延迟加载,异步加载,阻塞渲染资源 文字详细教程

通过Google PageSpeed Insights执行WordPress网站检测,Google将会告诉您需要移除WordPress网站上阻塞渲染的资源。那么: 什么是阻塞渲染资源? 如何移除WordPress上的阻塞渲染资源? 在这篇文章中,我们将为您回答上述两个问题。文章将会分四个部分进行说明: 什么是阻塞渲染资源及他们有什么影响 如何发现网站阻塞渲染的资源 如何移除阻塞渲染资源(方法) 如何使用插件解决此类WordPress问题 如何理解“移除阻塞渲染资源”? 了解什么是阻塞渲染的资源以及为什么它们会影响网站的加载时间,我们需要从基本的角度来了解网络浏览器如何呈现网页。 当访问者登陆您的站点时,他们的Web浏览器从站点代码的顶部开始并进行阅读,记住,是从上到下。 如果在此过程中遇到CSS或JavaScript文件,则在等待下载和处理该文件时需要停止 “读取”。那么花费在“暂停”上的时间来下载和解析这些资源可能影响到更重要的进程,例如加载游客访客应立即可见的网站内容。 让我们看一个极端的例子来说明为什么这可能是一个问题。 假设您一个网站的页脚设计了很酷的JavaScript效果。它由“ coolfooter.js”提供支持,但该脚本在您网站代码顶部引用(实际上访问者只有滚动到页脚才能看到它)。 那么这个网站代码的布局就显得不合理了。 我们知道,当访问者登陆您的网站时,他们的浏览器开始从上到下阅读。因此,在它可以解析和呈现网站上首屏内容的HTML之前,它需要等待下载并解析coolfooter.js文件。 这就会导致,显示首屏内容的HTML需要更长的时间,这意味着您的访问者会觉得网站速度较慢。 当Google告诉您移除阻塞渲染资源时,它实际上是在说:“嘿,不要在网站代码的顶部加载不必要的资源,因为这将使访问者的浏览器下载优先可见部分内容所需的时间更长”。 有了本文中的提示,您就可以延迟加载某些CSS和JavaScript资源,直到页面的可见部分已经加载为止。 什么是阻塞渲染资源? 当提到阻塞渲染资源时,我们通常指的是: CSS JavaScript 重要的是要了解并非所有CSS和JavaScript文件都是阻塞渲染的。 例如,在页面顶部加载重要的CSS至关重要,否则访问者可能会遇到所谓的未样式化内容闪烁(FOUC)现象。 图像是否属于阻塞渲染资源? 不,图像不会造成渲染阻塞。优化WordPress图像以减小其文件大小仍然很重要,但不必担心优化图像的传送路径。 如何发现网站是否存在阻塞渲染的资源 要评估您的WordPress网站当前是否具有阻塞渲染的资源,可以使用Google PageSpeed Insights。 您要做的就是输入要测试的URL。然后,PageSpeed Insights将在“ 优化建议”下的“ 移除阻塞渲染的资源”部分列出每个资源的地址: PageSpeed Insights阻塞渲染资源提示 如何移除阻塞渲染资源? 不用担心,您不必手动执行此操作。在下一节中,我们将讨论可帮助您移除阻塞渲染资源的WordPress插件。但是,我们应该了解这些插件工作的原理。 如何移除阻塞渲染的JavaScript 有几种不同的策略可以移除阻塞渲染的JavaScript。我们在有关如何推迟解析JavaScript的文章中详细介绍这些方法,但以下是主要方法: 异步加载 –让HTML解析器(例如访客的浏览器)下载JavaScript,同时仍然解析HTML的其余部分。也就是说,文件下载时并不会完全停止解析。但是,一旦下载,它将暂停HTML解析器以执行脚本。 延迟加载 –让HTML解析器在解析其余HTML的同时下载JavaScript,并等待执行脚本,直到HTML解析完成。 这Growing with the Web网站制作的插图可以帮助你更好地理解正常脚本加载、脚本异步加载和脚本延迟加载三者之间的区别: JavaScript 正常/异步/延迟加载对比 使用延迟加载的好处是可以确保脚本按照它们在代码中出现的顺序执行。 异步加载不使用这种方法,如果将异步加载应用于所有JavaScript资源,有时会导致问题。因为异步加载通常会破坏页面文档前面呈现所依赖的资源。异步加载产生的最常见问题是损坏的jQuery资源,这些资源会在将jquery.js添加到文档之前尝试加载。 如何移除阻塞渲染的CSS […]

WordPress URL优化,URL查询字符串,查询字符串,网站优化 文字详细教程

当谈及WordPress性能的时候,静态资源URL地址的查询字符串问题必不可少。网站的CSS和JavaScript文件通常在其网址的末尾带有文件版本,例如domain.com/style.css?ver=4.6。某些服务器和代理服务器无法缓存查询字符串,即时存在cache-control:public标头。 删除它们,有时可以改善缓存。这也将修复您可能在GTMetrix和Pingdom等网站性能测试工具看到的警告,即“从静态资源中删除查询字符串”。 从静态资源中删除查询字符串 请记住,设置查询字符串通常是有原因的。WordPress开发人员使用文件版本控制来解决缓存问题。例如,如果他们为style.css更新了一个版本,从?ver=4.6迭代至?ver=4.7,则它将被视为全新的URL,并且不会被缓存。如果删除查询字符串并更新插件,则可能导致浏览器继续使用缓存的版本。在某些情况下,这可能会影响到页面的外观,直到缓存资源过期或缓存完全刷新为止。 查询字符串还用于开发工作流程中,以便于开发跟踪版本。 删除静态资源URL地址查询字符串 您可以通过两种不同的方式删除查询字符串,一种是使用少量代码,另一种是使用WordPress插件。 使用代码从静态资源中删除查询字符串 使用插件从静态资源中删除查询字符串 1.使用代码从静态资源中删除查询字符串 您可以通过几行代码即可删除静态资源URL地址的查询字符串。只需将以下内容添加到WordPress主题的functions.php文件中即可。 function remove_query_strings() { if(!is_admin()) { add_filter(‘script_loader_src’, ‘remove_query_strings_split’, 15); add_filter(‘style_loader_src’, ‘remove_query_strings_split’, 15); } } function remove_query_strings_split($src){ $output = preg_split(“/(&ver|\?ver)/”, $src); return $output[0]; } add_action(‘init’, ‘remove_query_strings’); 重要提示:  如果操作不正确,编辑WordPress主题源代码可能会影响网站运行。如果你对代码不熟悉,建议找开发代劳。或者,也可以利用免费的Code Snippets插件,支持以插件的方式添加上面的代码,你又不必担心添加代码会使网站瘫痪,相对保险很多。 只需创建一个新代码段并添加上面的代码即可。选择“仅在站点前端运行”,然后保存代码段。查询字符串就会被删除!可能需要清除WordPress网站缓存,才能看到更改在前端生效。 删除查询字符串代码段 带查询字符串(代码前) 这是一个使用查询字符串加载脚本的示例。 带查询字符串的请求 没有查询字符串(代码后) 这是删除查询字符串后的脚本示例。 没有查询字符串的请求 2.使用插件删除静态资源URL地址查询字符串 如果你不想操作代码,另外一个替代方法是使用WordPress插件。通过安装启用Perfmatters插件,你只需要单击按钮即可实现一键删除静态资源URL地址的查询字符串。当然除了该功能,插件还可以帮助你实现WordPress网站其他优化。 使用Perfmatters插件删除查询字符串 没有更多的查询字符串 通过以上任一选项后,再使用GTMetrix或Pingdom等网站速度测试工具对网站执行测试,有关查询字符串的警告就完全消失了。 修复“删除静态资源警查询字符串”警告

WordPress CDN加速,Cloudflare,dnspod,网站速度优化 文字详细教程

在大家开始阅读此文之前,小编先陈述下自己的观点:非必要的情况,国内站点尽可能不使用Cloudflare的CDN服务。除非你所搭建的WordPress网站所使用的服务器不在境内,否则国内有很多CDN服务可以满足你的网站加速需求,比如阿里云、腾讯云,七牛云、UPYUN等服务商提供的CDN。 但,如果你非得要使用Cloudflare的CDN,不妨看看sleele这篇教程,思路清晰且易于理解,enjoy! 前言 最近再一次着手优化博客的访问速度,基于上次的优化再次提升,这次用上了我之前放弃的cloudflare cdn加速方案,现在有了新的思路和新的工具。 cloudflare的cdn节点都在海外,国内访问速度其实并不理想,如果自己的vps线路质量可以的话,用cloudflare cdn反倒会减速,这是我之前的想法,但是自cloudflare推出了cloudflare partner计划,可以通过partner免费使用cname解析,从而可以使用某些奇淫巧术实现自定义cdn节点。 dnspod dns解析 本来想按逻辑顺序来写,但是考虑到实际操作是按照工具顺序来执行,就先从dns解析说起吧! 以往如果我们要使用cloudflare的免费cdn,就要使用cloudflare的dns解析,现在有了partner计划,可以免费使用cname解析,这次我们选用dnspod提供的dns解析,dnspod还提供d监控服务,d监控可以监控网站线路,并根据网络情况自动切换节点 先说说什么是d监控 什么是D监控? D监控就是:当您的一个服务器确认宕机后,系统会自动给您切换到可用的服务器,宕掉的服务器恢复后自动切换回原ip(注意:系统不默认开启D监控,需要您手动启用D监控) 检测的原理:所有监控点会向目标服 务器发起一次 http请求,当且仅当所有监控点都得不到应答时,我们会认为服务器宕机,从而进行操作。(这里需要注意的是,403等错误返回只提示警告,不进行ip切换,500以上错误返回提示宕机,进行切换) 要使用dnspod dns解析,首先要注册dnspod,并把域名挂在上面,这个相信有能力建站的人都会操作,我就不赘述了 域名放在dnspod dns解析后,暂时不要设置d监控,现在可以去搞cname了 cloudflare partner 先注册cloudflare账号(http://cloudflare.com/),之后去cloudflare partner处登录。 我使用的是笨牛网提供的cloudflare partner服务:https://cdn.bnxb.com/, 注册登录笨牛网的cloudflare partner服务,然后选择添加域名,使用cname方式接入。 BNXB管理后台 提交后会给出cname地址,把cname地址填写进dnspod的dns解析中。 CNAME回源设置 过一会就会生效,ping一下的网站,看是否走了cloudflare cdn,如果这时候走了cloudflare cdn,那么ping网站的时候会出现cname地址。 重头戏来了 cname接入cloudflare cdn最大的好处就是可以自定义cdn节点,这样我们就可以选择国内访问最快的cloudflare cdn节点,从而实现加速访问,并且在d监控的加持下防止网站因线路的缘故中断访问。 目前cloudflare所提供的免费节点很多都被玩烂了,所以需要大家自行测试。 我这里分享一些网上的提供的ip,这些ip段,从中选择ip段后修改ip地址,填写到dnspod中,例172.64.32.56,并且按照运营商填写,每个运营商填写两个节点,海外为默认: 172.64.32.1/24 (推荐移动,走香港) 104.28.14.0/24 (推荐移动,走新加坡) 104.23.240.0-104.23.243.254 (推荐联通、移动,线路未知) 108.162.236.1/24 (推荐联通,走美国) 104.20.157.0/24 (推荐联通,走日本) 104.16.160.1/24 (推荐电信,走洛杉矶) 172.64.0.0/24 […]

WordPress emoji,禁用Emojis,表情符号 文字详细教程

我们可以进行许多网络性能优化和调整,以使WordPress网站加载速度更快。其中一种简单的优化方法是禁止加载表情符号Emojis。表情符号(Emojis)是用于表达想法或情感的小图标。尽管这些图标很有趣,但它们对于WordPress网站真的必要吗?对于很多网站来说,或者这些只是增加了不必要的额外加载时间。 当WordPress 4.2发布时,针对较旧版本的浏览器WordPress核心中添加了对表情符号的支持。最大的问题是,它会在WordPress网站上生成一个额外的HTTP请求,以加载wp-emoji-release.min.js文件。每个页面都会载入此文件,尽管此文件只有10.5 KB,但随着时间的推移,类似的东西会累加起来。 Emojis表情符号JS文件 有两种不同的方法禁用WordPress表情符号Emojis:使用免费插件或代码来实现。 使用插件禁用Emojis 修改代码禁用Emojis 1. 使用插件禁用Emojis 禁用表情符号Emojis的第一种方法是简单地使用由Ryan Hellyer开发的名为Disable Emojis的免费插件。 Disable Emojis插件 这是一个超轻量级的插件,确切地说只有9 KB。该插件目前拥有70,000多个激活安装,100%的好评5星。注意:Emoticons和emojis仍然可以在内置支持它们的浏览器中使用。该插件仅删除了多余的JavaScript文件,该文件用于在较旧的浏览器中添加对表情符号的支持。 还有一个名为Emoji settings的免费替代插件。这是在考虑到多站点的情况下开发的,  并为用户提供了禁用表情符号本身的选项。 Emoji settings插件 启用插件后,用户可以在WordPress仪表板的“设置-撰写”中选中或取消选中“Enable emoji support”。 您还可以使用perfmatters类的高级插件,该插件支持禁用emoji表情以及WordPress网站的其他优化功能。 使用插件perfmatters禁用emojis 2. 修改代码禁用Emojis 如果您不想安装各种杂七杂八的插件,也可以使用代码禁用表情符号。只需将以下内容添加到WordPress主题的functions.php文件中。这实质是Disable Emoji插件的代码。 警告:修改代码前请先备份源文件,以免因操作不当导致网站出现问题,可以通过备份恢复! /** * Disable the emoji’s */ function disable_emojis() { remove_action( ‘wp_head’, ‘print_emoji_detection_script’, 7 ); remove_action( ‘admin_print_scripts’, ‘print_emoji_detection_script’ ); remove_action( ‘wp_print_styles’, ‘print_emoji_styles’ ); remove_action( ‘admin_print_styles’, […]

WordPress WordPress评论分页,WordPress评论设置,评论分页 文字详细教程

如果你稍加注意,你会发现拥有大量评论的文章的加载速度比其他评论很少的文章慢?那是因为加载太多评论会增加服务器负担,从而增加平均页面加载时间。 当然网站文章拥有大量评论是一件好事,这意味着更多的用户参与了内容讨论,网站更加活跃。一般情况,评论最多的文章通常是博客上最受欢迎的文章。 但是,如果大量评论导致网站变慢,那么它可能会影响到SEO排名。那么,对WordPress评论分页变得非常有必要了。 在本文中,将介绍如何实现WordPress文章评论分页,以提升文章页面的加载时间。基于WordPress的默认功能,操作也相对简单。 为什么要做WordPress评论分页 评论分页可帮助提高网站速度,这是网站SEO排名的重要因素。 有时附带超多评论的文章页可能会导致读者死亡白屏,因为它耗尽了服务器的内存。 即使它不会导致“死亡白屏”,超多评论的文章页加载也往往非常缓慢。 通过将评论分为多个页面,评论分页减少了这类文章页对服务器负载。 对WordPress评论进行分页的另一个原因是保证文章的关键字密度。评论会在文章页面上增加很多内容,并且可能不会总是包含足够数量的目标关键字。 当关键字占比降低时,搜索引擎将无法为文章索引正确的关键字。 如果未正确使用评论分页,也可能会对SEO产生负面影响。基本上,WordPress为每个新的评论页面生成URL。搜索引擎可能会将其视为“重复内容”。 使用Yoast SEO插件可以轻松解决此问题,该插件将搜索引擎指向文章的唯一URL。 上述,我们已经讨论了评论分页的利弊,下面让我们看一下如何实现WordPress评论分页。 设置WordPress评论分页 首先登陆WordPress后台,在仪表盘进入“设置”»“讨论”页面。勾选“分页显示评论”选项,及输入每页显示评论数以及显示方式。如下图所示: WordPress评论分页设置 最后不要忘记点击“保存更改”按钮来保存上述设置。 然后访问网站评论较多的热门文章,就会看到评论下方的分页链接。 根据不同主题的样式,你将会数字分页或“Previous / Next”评论翻页链接。 又或者你进行样式自定义,以获得更美观体验更好的样式。下面是我们开发的百度搜索推送插件的评论样式,如下图所示: 教学博评论分页样式 Tips:如评论分页一样的道理,您也可以对较长文章页面进行分页。 希望本教程可以帮助您实现WordPress评论分页操作。关于WordPress评论内容,你可能对以下内容感兴趣: WordPress必装插件之垃圾留言拦截插件Akismet 比WordPress防垃圾留言插件Akismet更好的Invisible reCaptcha 使用WordPress内置功能拦截垃圾评论 使用插件拦截WordPress垃圾评论 使用reCAPTCHA验证码插件拦截垃圾评论机器人 应用第三方评论系统或防火墙拦截垃圾评论

WordPress DEFLATE压缩,Gzip压缩,htaccess,缓存插件 文字详细教程

Gzip压缩可以减少了HTML文件,JavaScripts,CSS样式表和XML文件的大小。 通常,使用WordPress插件启用(使用)Gzip压缩可以减少60%到80%的站点大小。 在WordPress中通过.htaccess启用Gzip压缩可以减少服务器响应时间和服务器发送到Web浏览器的数据量。 当然,压缩页面大小有助于减少传输的响应和数据。 启用压缩的最佳方法是在WordPress站点服务器的 .htaccess文件中使用mod_gzip或mod_deflate。 你只需要通过在您网站的WordPress安装目录下的 .htaccess文件中添加一个简单的代码来启用Gzip压缩。 如果您不想通过.htaccess文件启用压缩,我们还可以使用一些插件来实现,比如如W3 Total Cache,WP Super Cache插件均支持启用WordPress中的Gzip压缩。 文章阅读导航 什么是Gzip压缩? Gzip压缩如何工作? WordPress的DEFLATE压缩和Gzip压缩 开始之前 通过Web服务器配置开启WordPress的Gzip压缩 在Apache服务器上压缩 在Nginx服务器上压缩 应用压缩后的结果 使用W3 Total Cache缓存插件实现Gzip压缩 使用WP Super Cache缓存插件实现Gzip压缩 写在最后 什么是Gzip压缩? Gzip是一个文件压缩器,用于压缩和解压缩文件。 它提供了压缩文本文件(如CSS样式表,HTML和JavaScript文件)的最优版本。 在网站上启用时,Gzip会在从服务器传输文件之前压缩文件。 因此,它改善了页面速度,加载时间并且还节省了用户请求的数据量。 如果您希望进一步了解更多有关Gzip压缩的信息,请查看这些链接 [1, 2]。 Gzip压缩如何工作? Gzip压缩的概念非常简单。 它使用的算法仅在一个位置组织重复的字符串,而不是一次又一次地保存那些相同的字符串。 并且它在压缩和从压缩文件中检索数据时管理具有位置值的字符串。 Gzip压缩适用于样式表和网页,因为这些资源文件都有许多重复的字符串。 由于其压缩技术,Gzip能够将文件大小减少70-90%。 让我们看一下以下的例子来理解Gzip压缩…… 假设你的HTML文件内容是这样的…… <h3>Enable Gzip Compression in WordPress </h3> 然后,经过压缩后的版本为如下示例。 Hkg6dkGhJkjsdHkgHjL 但是,如果您的HTML文件内容重复字符串如下… <h3>Enable Gzip […]

WordPress Cloudflare,Cloudflare Workers,WordPress缓存 文字详细教程

Cloudflare一直是我非常喜欢的厂商,免费的套餐就可以提供不错的服务,只不过现在被玩坏了,国内访问速度大不如前,但是总体来说有还是比没有强。 不过免费版套餐的Cloudflare CDN有个非常致命的缺点,就是不能根据cookie来区分访客,从而针对性提供访问内容(比如不为登陆、评论过的用户提供缓存)。并且还会把已登录或已评论用户的信息缓存上去,这点难以接受,也是我抛弃Cloudflare的重要原因之一。 不过在Cloudflare Workers面世后,这个问题就迎刃而解了,我们可以使用Workers来绕过这个限制,自己编写缓存策略。 介绍 关于Cloudflare Workers的介绍可以自行搜索,通过搜索引擎看到本文人或许应该已经有所了解。 我简单阐述一下,本文要讲的内容,就是通过Cloudflare官方曾编写的一款脚本,实现自定义缓存策略。 Edge Cache HTML Cloudflare官方曾编写的一款WordPress插件,用以搭配edge-cache-html,不过这个项目已经快两年没更新了,应该是觉得这个项目会影响到他们付费套餐的出售。 https://github.com/cloudflare/worker-examples/tree/master/examples/edge-cache-html 目前这个脚本直接使用,是无法在WordPress下生效的,并且缺失URL路径规则。我稍作修改,增加了路径排除和支持在WordPress下是缓存(去除header cache判断)。 前期操作请参考 [WordPress]利用 Cloudflare Workers 来缓存博客的 HTML 网页 ,写的非常详细,只不过这位博主没有没有缓存成功。 以下是修改后的脚本 // IMPORTANT: Either A Key/Value Namespace must be bound to this worker script // using the variable name EDGE_CACHE. or the API parameters below should be // configured. KV is recommended if […]

WordPress Core Web Vitals,WordPress优化,网站优化 文字详细教程

Core Web Vitals(网站核心网页指标)是Google的一项举措,旨在帮助网站站长改善用户体验和网站质量。这些评估指标对于任何网站的成功都是至关重要的。 在本教程中,我们将向您展示如何针对WordPress优化Google提出的网站核心网页指标。 什么是Google Core Web Vitals? 如何测试网页核心指标评分 为什么网页核心指标如此重要? 如何改善WordPress网站页面核心指标 什么是Google Core Web Vitals? Google Core Web Vitals是Google认为对网站的整体用户体验很重要的一组网站性能指标。这些网络生命力得分将成为Google整体页面体验得分的一部分,这将影响您的SEO排名。 事实是,没有人喜欢加载速度缓慢的网站,包括Google。 即使您的网站加载速度很快,用户执行其想做的事情或访问所需信息也可能无法完全发挥作用。 这就是Web Vitals可以帮助您评估的内容。您的网站加载,显示并为用户准备就绪的速度有多快? 为此,Google使用了三个质量测试(Web Vitals)。 Largest Contentful Paint(LCP):衡量加载体验,为了提供良好的用户体验, LCP 应该在页面首次开始加载后的 2.5 秒内发生。 First Input Delay(FID):衡量可交互性,为了提供良好的用户体验,页面的 FID 应当小于 100毫秒。 Cumulative Layout Shift(CLS):衡量视觉稳定性,为了提供良好的用户体验,页面的CLS应保持小于 0.1。 这些测试的名称听起来可能太技术性了,但它们的操作却很容易理解。 让我们看看每个Web Vitals测试的工作原理,测量标准以及如何提高得分。 Largest Contentful Paint – LCP Largest Contentful Paint 或LCP查找主要内容(无论是图像,文章还是描述)对用户可见的速度。 例如,您的网站加载速度可能很快,但是最大的内容可能不会像页面其余部分一样快地出现在屏幕上。 […]

WordPress Imagify,Optimole,ShortPixel,WebP,WebP图片,WebP插件,图片优化插件 文字详细教程

提升WordPress网站的加载速度的其中一种办法——减少图片体积大小。平均而言,图片约占网页文件大小的一半,因此即使是很小的改进也可以取得很大的效果。 WebP是一种较新的图片格式(相比jpg和png),该格式的最大特点是减小图片体积大小而不影响质量。将图片转换为WebP格式可以将其尺寸缩小约25-35%,而不会造成质量损失。 我们将在此文中深入探讨该主题! 什么是WebP? 哪些浏览器支持WebP? WebP vs JPG vs PNG体积大小比较 如何在WordPress网站上使用WebP图片 什么是WebP? 那么……什么是WebP文件?简而言之,WebP是Google开发的一种图片格式。我们更为常见的图片格式是JPEG或JPG和PNG,WebP则算得上后起之秀。 WebP致力于提供相同质量的图片,但文件尺寸较小。通过减少图片文件的大小,而不会“降低图片呈现质量导致糟糕用户体验”,并且有利于网站加载速度提升。 在Google的WebP压缩研究中,Google发现平均一个WebP图片文件… 比JPEG图片小25-34%。 比PNG图片小26%。 这就是为什么如果您通过PageSpeed Insights运行网站测试,会看到采用WebP等下一代格式提供图片: Google PageSpeed Insights建议使用WebP格式图片 那么Google的WebP格式如何实现文件大小减少?WebP支持有损和无损压缩,因此确切的减少取决于您使用的是有损还是无损压缩。 通过有损的WebP压缩,WebP使用一种称为“预测编码”的方法来减小文件大小。预测编码使用图片中相邻像素的值来预测值,然后仅对差异进行编码。它基于VP8关键帧编码。 无损WebP使用WebP团队开发的一套更为复杂的方法。如果您想详细了解WebP压缩技术,那么可以阅读谷歌相关文档。 哪些浏览器支持WebP? 为了使WebP图片起作用,需要Web浏览器兼容才行。不幸的是,尽管越来越多的浏览器开始兼容WebP,但WebP兼容性仍然不是通用的。 当前主流浏览器一般都支持WebP图片(冥顽不灵的IE依然是不支持的,也可能因为它不是开源的),例如: Chrome(PC&移动版) Firefox(PC&移动版) Edge Opera(PC&移动版) 值得注意的是Safari,Safari的桌面版和移动版均不支持WebP图片。Apple在2016年曾尝试Safari兼容WebP的开发,但此后就渺无音讯了。 Internet Explorer也不兼容WebP(Edge支持WebP,因为它基于Chromium)。 总计,大约77%互联网用户使用支持WebP的浏览器。但23%的数字太大了,不容忽视(在下面的WebP教程中,将会详细说明如何处理此问题,以便所有访问者都拥有良好的体验): WebP支持 WebP vs JPG vs PNG 体积大小比较 根据Google的测试,WebP图片为: 比JPEG图片小25-34% 比PNG图片小26% 如果您想进一步了解Google的方法,可以阅读谷歌关于WebP的一些说明资料:Lossless and Transparency Encoding in WebP,WebP Compression Study。 两项测试均基于超过11,000张图片,包括: […]

WordPress 响应式网站,移动端网站优化,网站加速 文字详细教程

十四年前,iPhone改变了我们的浏览,购物和行为方式。这就是为什么小企业主必须使用适合移动设备的网站的原因,或者说为什么现在大部分网站都支持响应式。 2007年1月,史蒂夫·乔布斯(Steve Jobs)迈入Macworld Expo的舞台。苹果公司的联合创始人,首席执行官以他的标志性风格向世界承诺了三件事:更新的iPod,一部电话和一部微型计算机。 他列出了每个项目的属性:“带触​​摸控制的宽屏iPod,革命性的手机,以及突破性的互联网通讯设备。” 但是,当该大曝光的时候了,他没有推出三款独立的产品。他胜利地推出了一个小工具:iPhone。原乔布斯指的不是三个独立的设备,而是一台设备!我们称之为iPhone。” 凭借全触摸界面和时尚美观,iPhone在市场上的其他智能手机中脱颖而出。十一年后,已售出超过10亿只。专家称赞它是本世纪最重要的设备之一。 iPhone引领了智能手机的革命,并改变了网站的构建和使用方式,引入了移动和响应式设计。今天,我们几乎可以做的所有事情-从订购外卖食品到招募Lyft到在社交媒体上分享照片再到在博客上发布-都可以通过智能手机来完成。iPhone是这一转变的关键。 距iPhone发布14年后的移动设计 如今,许多人将智能手机用作唯一的计算机。拥有智能手机的人口为30亿,拥有计算机的人口为13亿。 总部位于新泽西州Little Falls的数字设计和营销机构Clikz Digital的首席营销官Pete Polgar说,移动通信量逐年增加,并有望超越台式机通信量。 他说:“与计算机相比,电话具有更多的用途,并为最终用户提供了更多的价值。” “随着该技术的价格越来越便宜,您将在未来几年看到电话使用量的大幅增加。” Polgar说,如果您的网站不是针对移动设备优化的,那么您会错失良机。他指出, 如果您的网站不适合移动设备浏览,则Google不会给到您的网站很好的排名。他补充说:“如果用户的移动体验很差,他们很可能直接不收录你的网站页面。” 移动Web设计意味着什么? 响应式网站设计意味着,无论屏幕有多大(从手机到手表,再到平板电脑再到台式机),该网站都将填充屏幕并以清晰的方式显示信息。 洛杉矶的产品设计师Matt Felten解释说:“这并不意味着您要制作传单或印刷时事通讯并具有恒定的画布大小。” “ iPhone的激增意味着设计师必须适应可变的屏幕尺寸,并为多种不同的设备提出新的方法。” 从头开始创建网站?以移动为先 GreenPal的首席执行官Bryan Clayton花了九个月的时间从头开始建立公司的网站。他说:“就在大门口,这里存在重大问题。” “我们假设大多数用户会从台式机或笔记本电脑上购买草坪护理服务。但是很快就变得非常清楚,与台式或笔记本电脑(4比1)相比,有更多的人通过手机和平板电脑访问网站。” 原始的全功能桌面体验包括各种铃声,例如动画。他回忆说:“我们拥有各种其他功能,使桌面体验令人愉悦。” “这种方法的问题在于,桌面体验不会转换为移动Web浏览器。” 结果,该网站was肿,无法在移动设备上正常运行。用户发现他们必须捏和缩放才能完成注册过程。 他说:“在重建我们的网站以提供移动优先体验之前,在移动浏览器上的转化率不到4%。” “这意味着尝试注册的人在此过程中有96%的时间被抛弃了。” 在将网站重建为移动优先之后,Clayton发现发起注册过程以获取免费价格估算的人中有82%的人通过移动设备和平板电脑完成了整个过程。 他说:“我们的移动设备至上产品是我们今天参与游戏的唯一原因。” 摸清网站受众 Polgar发现许多客户仍然要求基于桌面的站点。但他说:“这些企业中很多都没有分析其客户是如何在移动设备上找到他们的。” 对于任何网站的启动或重新设计,他建议企业主首先弄清楚客户如何使用他们的网站。一旦确定了他们将如何使用该网站,就可以制定适当的策略。 此外,请确保所有读者都可以访问您的网站-从调整对比度以使色盲人员可以阅读内容,到使视障人士可以通过屏幕阅读器进行理解。 寻求客户反馈 洛杉矶Blu Skincare的所有者Zondra Wilson仅在开始征询客户反馈时才发现自己的网站不适合移动设备使用。 她回忆说:“我要我的客户写一篇评论,他们会说找不到在哪里写评论。” “我会问他们有关我发布的博客或文章的信息,他们很难找到它们。他们无法在手机上查看我的网站。 在我出现第一张照片或有关我公司的任何信息之前,他们必须向下滚动很多。他们不知道如何浏览我的网站。许多人感到沮丧,没有走过首页。” 威尔逊(Wilson)最近将其网站升级到了更便于移动的版本,并且已经注意到用户在该网站上浏览的页面比平时更多。 考虑小屏幕 在移动领域,少即是多。由于手机功能不如台式机浏览器强大,因此您应该确保将站点优化为可以快速加载,并且您的虚拟主机可以处理流量,Polgar解释说。 最终,最佳设计策略很简单:消除所有多余的杂物。 “您需要为小型产品设计,” Felten说。“您必须更加专注。您必须减少信息和内容。” 放置好移动网站之后,您可能会发现根本不需要为桌面版本添加更多内容。 波尔加尔说:“小型企业将不得不改变其当前的营销策略,因为其屏幕房地产已大幅缩水。” Modern Place Lighting首席执行官Vitaliy Vinogradov发现,与台式机相比,切换到移动优先设计带来了30%的转换。他说:“要做的一件重要的事情是删除网站移动版上多余的插件,弹出窗口或任何其他屏幕抑制剂。” 他的团队对网站进行了梳理,并删除了一些社交共享插件,这些插件占用了屏幕上的宝贵资源。 完善您的设计美学 移动电话的兴起刺激了苹果和谷歌等以设计为中心的公司的兴起。Felten说,当今的消费者期望更复杂的设计。 他说:“看到一个漂亮而性能良好的网站的商业案例大有推动力。” “如果我是一家小企业主,并且所有竞争都拥有一个非常不错的,响应迅速的网站,而我却在不到一秒钟的时间内没有对我的产品做出负面评价。” 另一方面,如果您拥有一个设计精美的网站,则人们会认为您重视并在产品中给予同样多的关注。 一致的用户体验 […]

WordPress css,CSS优化,css样式 文字详细教程

删除WordPress中未使用的CSS可以在一定的程度上让网站加载速度更快。 未使用的CSS是由您的WordPress主题或插件添加的但并不真正需要的CSS代码。删除这些CSS代码可提高WordPress性能和用户体验。 在本教程中,我们将学习如何在不破坏网站的情况下删除WordPress中未使用的 CSS。 什么是WordPress中未使用的CSS? WordPress中未使用的CSS是加载到网站上但实际上并不需要用于显示页面的CSS代码。 额外的代码会使访问者的浏览器需要更长的时间来呈现页面,造成糟糕的用户体验。较慢的加载时间甚至会影响网站搜索引擎排名,有可能会导致网站的自然流量减少。 您可以使用Google Pagespeed Insights了解未使用的CSS代码如何影响您的网站。标题为“Remove unused CSS”的部分,将详细说明了哪些CSS文件影响网站加载时间。 为什么在WordPress中添加了未使用的CSS? CSS用于设计WordPress网站的外观。WordPress主题包含CSS,其中大部分包含在主题的style.css文件中。 除了主题的CSS之外,部分WordPress插件还将加载自己的CSS。例如,WooCommerce插件将加载CSS以显示产品,页面构建器插件将添加自己的CSS以显示您的自定义页面,而表单插件将包含CSS以设置表单样式。 然后,Web fonts、图标字体和其他元素也需要添加自己的CSS文件。 通常,这些文件非常小并且加载速度很快。但是,如果WordPress网站有很多这样的资源,累积起来,还是会对网站速度产生负面影响。 如何删除WordPress中未使用的CSS? 我们可以有几种不同的方法可以减少WordPress网站上未使用的 CSS。 但是,要完全删除WordPress中所有未使用的CSS将是一项艰巨的任务。由于WordPress在幕后工作的方式,一些未使用的CSS可能很难找到和删除。 下面我们将向展示两种删除未使用CSS的方法,您可以选择最适合的一种。 方法 1. 使用WP Rocket插件删除WordPress中未使用的CSS 这种方法比较简单,推荐给初学者。它极大地改善了WordPress网站上CSS文件的整体交付,包括删除大部分未使用的CSS。 我们认为它是初学者的最佳解决方案,因为它更容易并且实现了为您的用户提供更好体验的主要目标。这意味着您的网站在速度测试工具上加载速度很快,并且访客也感觉很快。 首先,您需要安装并启用WP Rocket插件。 启用后,您需要访问Settings »WP Rocket页面并切换到“File Optimization”选项卡。 接下来,您需要向下滚动到CSS文件部分,选中“Optimize CSS delivery”选项旁边的框。 此选项会生成一个CSS文件,该文件仅包含显示网站可见部分所需的CSS代码。它首先加载该文件,向访问者显示该页面,然后使用延迟加载的技术加载其他CSS文件。 通过删除这个阻止渲染的CSS,网站可以比在页面显示之前加载所有CSS文件更快地被用户查看。 启用“Optimize CSS delivery”选项后,单击“Save Changes”按钮并等待WP Rocket为您的所有文章和页面生成必要的CSS文件。它还会自动清除您网站的缓存。 完成后,您可以继续使用Google Pagespeed Insights再次测试您的网站性能。 额外的文件传输调整以提高性能 WP Rocket还支持从静态文件中删除查询字符串、合并Google字体文件并缩小HTML。所有这些调整都为您的整体速度带来了微小的改进,从而为您的访问者带来了更快的加载体验。 您还将看到用于缩小和合并CSS文件的选项。这些选项将减少HTTP请求并为您提供额外的速度提升。 但是,您需要仔细检查您的网站,以确保启用这些设置后没有任何问题。 此外,您可以对网站上的JavaScript文件应用相同的优化。您可以缩小和组合它们以作为单个文件并延迟JavaScript文件的加载以提高性能。 方法 […]

WordPress WordPress缓存,浏览器缓存,缓存插件,缓存服务器 文字详细教程

如果您有使用网站测速性能测试深入浅出教程一文中提及的15个网站测速工具对网站进行测速,相信对浏览器缓存这个概念不会陌生。个人尤其推荐其中Google PageSpeed Insights网站性能测试工具。 通过修复浏览器缓存警告,能够在一定的程度上加速您的WordPress网站并为网站访问者提供更好的体验。在本教程中,我们将再一次介绍如何处理WordPress网站在网站性能测试中的浏览器缓存警告。 什么是WordPress浏览器缓存? 浏览器缓存是一种提高网站加载速度的方法。当一个网页加载时,所有的文件将被单独加载。 这会在浏览器和WordPress托管服务器之间创建多个请求,从而增加网页加载时间。 启用浏览器缓存后,Web浏览器会在本地存储您的网页副本。这允许浏览器在用户访问您网站上的第二页时更快地加载常见文件,如样式表、Logo、图像等。 这减少了整体服务器负载,因为对实际服务器的请求会减少,因此您的网站性能将得到改善。 在哪里查看WordPress浏览器缓存警告? 利用浏览器缓存警告意味着您没有启用浏览器缓存,或者您的缓存设置可能错误。 当您运行网站速度测试时,您会收到一份报告,其中显示了您可以修复哪些方法来加速WordPress。 如果您的网站当前未使用浏览器缓存,那么您将收到启用浏览器缓存的警告。 这就是从页面速度洞察工具查看结果时的样子。 有时您会收到一条警告,指出您的高效缓存策略不起作用。 这两个警告都是指您的浏览器缓存设置错误。 利用浏览器缓存意味着激活和自定义缓存规则以加速您的网站。 下面我们将介绍使用两种不同的方法轻松修复WordPress浏览器缓存警告。 使用插件修复网浏览器缓存警告 使用代码修复网站浏览器缓存警告 方法 1. 使用WordPress插件WP Rocket修复浏览器缓存警告 WP Rocket是市场上最好的WordPress缓存插件之一。它非常适合初学者,即使不了解复杂的缓存和速度术语,也可以帮助您优化站点以提高速度。 开箱即用,所有推荐的缓存设置都将真正加速您的WordPress网站。 要使用WP Rocket修复浏览器缓存警告,您所要做的就是安装并启用插件。 就是这样。 WP Rocket将自动启用浏览器缓存并使用正确的规则修改您的文件.htaccess。 方法 2. 通过添加代码来修复浏览器缓存警告 第二种方法涉及向WordPress文件添加代码。 这种方法对初学者不太友好,所以请仅在您确切知道自己在做什么时才遵循此方法。对于大多数站长,我们建议使用方法 1。 话虽如此,让我们来一起看看如何通过向WordPress添加代码来修复浏览器缓存警告。 注意:在您自定义您的WordPress代码之前,我们建议您备份您的 WordPress 网站。有关更多详细信息,请参阅有关如何备份和恢复WordPress网站。 确定您的网站是运行Apache还是 Nginx? 首先,您需要确定您的网站是使用Apache还是Nginx服务器。 为此,请在新选项卡或窗口中打开您的网站。然后,右键单击并选择“Inspect(检查)”选项。 接下来,单击页面顶部的“Network(网络)”选项卡。 您可能需要刷新页面才能加载结果。 之后,在“Name(名称)”列中单击您的域名。 它应该在页面的顶部。 然后,在“Response Headers(响应标头)”部分,您将看到一个名为“server(服务器)”的项目,其中显示了服务器的类型。在这种情况下,该站点在 Apache 服务器上运行。 在Apache中添加缓存控制和过期标头 […]

WordPress WP Rocket,WP ROCKET配置,缓存插件 文字详细教程

Forrester Consulting的一项研究表明“ 47%的消费者希望网页在两秒钟或更短的时间内加载”。可悲的是,许多站长没有意识到加载缓慢的网站不仅使人们感到沮丧,而且还可能对网站搜索排名产生负面影响,并影响网站收入! 好消息是有一些方法可以加快网站的加载时间,本教程将详细介绍如何配置目前较为主流的WordPress缓存插件WP ROCKET,以提升网站速度和性能。 本教程主要分为以下三大部分: 下载和安装WP Rocket 如何使用推荐参数设置WP Rocket 哪里可以获得帮助并找到官方文档 什么是WP ROCKET?WP ROCKET是一款主流的WordPress缓存插件,对提升网站的加载时间非常有效。 WP Rocket计划和定价: $49/年–一年的支持和更新(单网站). $99/年–一年的支持和更新(三网站). $249/年–一年的支持和更新(无限网站). WP Rocket是作为众多站长首选的WordPress高级缓存插件。WP Rocket入门非常容易,只需安装一些建议的设置即可完成即插即用。 优点:最小配置/页面缓存/缓存预加载/静态文件压缩 缺点:对于国内站长来说,价格并不低。 不像大多数其他WordPress高速缓存那样,各种令人困惑的选项和设置。后续我们将会抽空介绍一下WP Rocket的最佳免费替代品. 一.下载和安装WP ROCKET 首先,前往WP Rocket网站并购买WordPress插件。 根据自身的需求选择最适合付费套餐并完成下订单所需的步骤。 接下来,wp-rocket.me将会向您的帐户发送一封包含登录信息的电子邮件。点击附带的链接登录网站,然后进入“My Account”即可找到下载链接,点击下载并将zip文件保存到您的计算机。 接下来,登录到您的WordPress网站并前往插件–>安装插件–>上传插件。只需上传插件压缩包即可安装WP Rocket。 最后,去激活WP Rocket,即完成插件的最终安装。 二. WP ROCKET最佳配置 下面我们一起来看看WP Rocket最佳配置,当然实际上,还需要站长根据自身情况而定。所谓最佳配置,更多是一个参考作用。 在WordPress网站管理后台的设置–> WP Rocket,进入插件设置页面。您需要配置和调整以下10个标签或部分的设置,及其他一些配置选项及说明: 我的帐户(默认标签页) 缓存设置 CSS和JS文件优化设置 媒体设置 预加载设置 高级规则设置 数据库设置 CDN设置 附加组件(Cloudflare) 工具 […]

WordPress css压缩,html压缩,js压缩,代码压缩 文字详细教程

在本教程中,我们将向您介绍WordPress压缩(minification),并且引荐其中两个最好的插件以帮助您实现WordPress文件瘦身压缩。 随着您的网站随着工具和内容的增多而变得越来越大,文件的数量可能会扩大到降低网站速度的程度。 速度在互联网上很重要,因此加载缓慢的网站是一个大问题。 解决这个问题的一种方法是通过压缩。Minification,即不影响其功能下通过压缩某些文件(例如 CSS、JavaScript和HTML文件)以缩小其大小的过程。最好的部分是缩小您的文件,您甚至不需要任何编码知识。 什么是Minification(以及为什么它很重要) 互联网上的每一秒都很重要。随着网站变得更加优化,人们已经准备好期待快速的加载时间。事实上,几乎一半的互联网用户希望网站在两秒或更短的时间内加载。 当一秒钟的延迟会导致转化率减少7%时,停留在缓慢的网站上可能会被判死刑。幸运的是,有一些补救措施可以帮助您加快网站速度,特别是压缩。 这是指压缩层叠样式表 (CSS)、JavaScript和HTML 代码以缩小文件大小而不影响其功能的过程。您可能没有意识到这一点,但许多让您的网站保持运行的文件也可能是您加载时间更长的原因。 从表面上看,这个过程可能听起来过于技术性,但它非常简单。它只涉及从代码中删除不必要的字符。 让我们看一个例子。以下是一个未经压缩的CSS片段: #bluetext { font-size: 2em; color: blue; } #redtext { font-size: 1em; color: red; } 经过压缩后代码如下: #bluetext{font-size:2em;color:blue;}#redtext{font-size:1em;color:red;} 如果您检查压缩后的代码,您会看到所有必需的信息仍然存在,但换行符、空格和一些字符已被删除。这些元素不是计算机理解代码所必需的,它们的存在只是为了使代码对人类更具可读性。 这种微小的更改似乎不会产生很大的影响,但请考虑一下您在站点的引擎盖下运行了多少行代码。缩小可以显着减小每个文件的大小,从而使您的网站加载速度更快。如果您的站点包含大量文件、脚本和插件,则尤其如此。 我们现在将研究两种可用于压缩代码的方法,手动和使用专用插件。 如何手动压缩CSS和JavaScript 手动压缩可让您使用专用应用程序快速压缩CSS和JavaScript代码。这使您能够首先编写易于阅读和解释的代码,然后在几秒钟内使用工具将其压缩。 我们建议使用工具,例如CSS Minifier或Clean CSS。与JavaScript 类似,虽然Minify是一个很好的起点,但还有其他选择,例如JSCompress和JavaScript Minifier。 这些工具都将以相同的方式工作。例如,使用Clean CSS,您将原始代码粘贴到相关字段中,然后单击CSS Minify。您将在另一个字段中看到结果,可以进行复制和粘贴。 但是,我们建议分别保存两个版本的代码;否则,您可能会丢失原始代码。当然,原始版本比缩小版本更容易进行故障排除和编辑。 如果您对自己的编码能力有信心,您也应该只使用手动缩小。如果您没有很多经验,我们建议您改用WordPress压缩插件,,下面我们将推荐其中的两个。 WordPress文件压缩插件 我们还可以使用WordPress插件来压缩保持网站运行的CSS和JavaScript文件。由于这些文件属于网站前端加载极其重要的部分,您应该确保只使用受信任且安全的插件。 1.Fast Velocity Minify Fast Velocity Minify是新手和有经验的用户的绝佳选择。默认情况下,它会自动压缩您网站上的所有CSS、JavaScript和HTML代码,并且不需要额外的配置。但是,如果您想修改细节,它还提供了大量其他选项。 需要最少的配置并实时自动运行。 为高级用户提供广泛的选项。 出色的结果和可靠的支持。 最为重要的一点是,Fast […]

WordPress WordPress图像优化插件,图片优化,图片压缩,无损压缩,无损压缩图片 文字详细教程

相信我们,独立站尤其是新建的站点,应该知道如何去讨好搜索引擎,也只有这样才可以获得更好的展现位置。 而,如何让搜索引擎觉得你的站点更友好,其中一个办法就是让你的网站图片更加小以提升网站性能。 如果是单纯的简单粗暴地不考虑质量地压缩图像,只会适得其反,因为这样可能会使访问者讨厌您的网站。 我们要做的是,在不损害或者极小程度地图像质量下压缩图像。 有一些技巧可以让你减少图像的文件大小,并保证质量,让用户无感知你对图片压缩过。 因此,让我们来看看如何格式化图像而不会让它们变得难看,以及如何针对网页和性能优化图像。 大图像会降低您的网页速度,从而导致用户体验不佳。 优化图像,可以使用插件或脚本减小文件大小以加快页面的加载时间。 有损和无损压缩是常用的两种方法。 格式化图像的好处 如何针对Web和性能优化图像 使用WordPress图像优化插件 优化图像案例研究 将SVG与其他图像一起使用 使用图像时的最佳做法 格式化图像的好处 首先,为什么需要格式化图像? 有什么好处? 优化图像以提高性能有很多好处。 根据HTTP Archive,截至2018年11月,图像平均占网页总体积的21%。 因此,在优化您的WordPress网站时,图像是您应该首先开始的第一个地方! 它比优化脚本和字体更重要。 图像优化工作流程是最容易实现的工作之一,但许多网站所有者忽略了这一点。 每页平均字节数(KB) 以下是主要优点。 它将提高您的页面加载速度(请参阅下面的案例研究,了解它对您的速度有多大影响)。如果您的页面需要很长时间来加载,访客可能不愿意等待并跳出。有关优化页面加载时间的详细信息,请参阅《如何做到Google PageSpeed Insights测试满分/100分》。 使用WordPress搜索引擎优化插件,帮助你提高了网站的SEO。您的网站在搜索引擎结果中的排名会更高。大文件会降低您的网站速度,搜索引擎讨厌网站速度慢(爬虫在爬取页面内容过程中,如果服务器响应过慢,爬虫可能就会离开或者降低网站的爬取频率)。搜索引擎也可能更快地抓取您的图片并将其编入索引,以便进行图片搜索。想知道您的流量中有多少来自图片搜索?您可以使用Google Analytics或者百度统计细分来检查图片搜索流量。 创建备份会更快。 较小的图像文件大小使用较少的带宽。 服务器上需要的存储空间更少(这取决于您优化的缩略图数量) 如何针对Web和性能优化图像 格式化图像的主要目标是在最小文件体积和可接受质量之间找到平衡点。 优化图像的方法不止一种。 最流行的方法之一是在上传到WordPress之前简单地压缩它们。 通常,这可以在Adobe Photoshop或Affinity Photo等工具中完成。 其中一些任务也可以使用插件执行,我们将在下面详细介绍。 要考虑的两个主要问题是您使用的文件格式和压缩类型。 通过选择正确的文件格式和压缩类型组合,您可以将图像大小减少多达5倍。 您将不得不尝试使用每种图像或文件格式来查看最佳效果。 选择正确的图像格式 在开始修改图像之前,请确保选择了最佳文件类型。 您可以使用几种类型的文件: PNG – 生成更高质量的图像,但文件也会比较大。无损图像格式,虽然它也可能是有损的。 JPEG – 使用有损和无损优化。 您可以调整质量级别,以实现质量和文件大小的良好平衡。 […]

WordPress CDN,WordPress加速,网站加速 文字详细教程

在本教程中,我们将向您介绍使用CDN的基础知识,并讨论为什么需要使用它。然后,我们将推荐一些适合WordPress网站上使用的CDN解决方案。 世界比以往任何时候都发展得更快,这意味着您的网站需要跟上。无论您身在何处,您的用户都可能分散在全球各地。因此,无论地理位置如何,您都需要确保您的网站能够快速运行。 保持站点速度和性能一致的一种方法是使用内容分发网络 (CDN)。CDN是分布在世界各地的远程服务器网络,每个服务器都包含访问者可以访问的站点副本。这不仅会使您的网站更快,而且还有助于保护它并减少您的带宽使用。 CDN简介 CDN(内容交付网络) 是一个由多个服务器组成的系统,这些服务器位于世界各地的不同位置。当您在站点上使用CDN时,所有这些服务器都将加载站点文件的静态版本。这通常包括CSS和JavaScript等代码、图像、文档、视频和其他数据。 虽然两者看起来很相似,但重要的是要认识到CDN与网络主机不同。您的主机是您的站点“所在”的服务器,有时也称为“源服务器”。CDN服务器只是从您的源服务器复制静态文件,以便更快地将它们交付给您的访问者。 使用CDN的好处 通常,当用户访问您的站点时,他们会通过浏览器直接连接到源服务器并从那里下载所有必要的文件。但是,对于远离源服务器的用户来说,这可能会导致问题。这个距离会导致加载时间显着延长。 您网站的速度会对它的跳出率产生负面影响,这反过来又会对您的转化造成灾难性的影响。因此,这不是一个小问题。由于所有访问者都从一台服务器请求相同的文件,您甚至可能会遇到更多的停机时间。 这就是CDN派上用场的地方。当您使用CDN时,访问者将改为通过离他们最近的服务器连接到您的站点。这样,您的页面加载速度会更快,并且会对源服务器造成更少的压力。 还使用CDN: 使您的网站降低网络故障率。如果一个CDN服务器出现故障,该站点将简单地从另一个服务器加载。这使您能够处理更多流量。 改善用户体验。您的网站有效地遍布全球这一事实为所有访问者创造了更加一致的体验。 提高您的SEO排名。网站的速度会影响到其搜索引擎排名,因此加快速度使其更有可能出现在搜索结果中的较高位置。 减少带宽使用。由于您的源服务器不需要向每个访问者发送尽可能多的数据,因此您可以最大限度地减少所需的带宽量。 帮助防御基本攻击。CDN 旨在处理大量流量,这有助于抵御最常见的恶意活动类型,例如分布式拒绝服务 (DDoS) 攻击。 如您所见,使用CDN不仅可以帮助提高站点的速度和可靠性,还可以帮助提高很多。剩下的唯一问题是如何开始。现在让我们来看看您可以在WordPress网站上实施的一些最佳CDN解决方案。 适用于WordPress网站的CDN解决方案 一旦您决定实施CDN,您只需要找到最适合您需求的解决方案。这里是一些主流的CDN解决方案,您可以与WordPress网站一起使用。 1. Cloudflare Cloudflare是一种非常流行的WordPress网站CDN解决方案。它不仅拥有120多个数据中心,而且还是少数提供免费计划的CDN提供商之一。对于想要可靠且易于实施的解决方案的网站所有者来说,这使其成为一个明智的选择。 在WordPress站点上安装 Cloudflare 插件就像安装插件和创建免费帐户一样简单。然后您可以激活默认设置,一切顺利。 主要特征 易于与 WordPress 网站一起使用,只需最少的配置。 更新站点时自动清空缓存。 在所有高级计划中都包含 Web 应用程序防火墙 (WAF)。 定价: Cloudflare可免费使用,但也提供多种收费计划,起价为20美元/月。其中包括额外的站点服务,例如图像优化、增强的安全性和优先支持。 2. Image CDN by Jetpack Jetpack是最全面和最受欢迎的WordPress插件之一。但是,您可能不知道它还包含一个整洁的小型CDN解决方案,称为Image CDN(以前称为 Photon)。这是一个仅限图像的CDN,它为您来自云网络的所有图像提供服务,以优化您网站的速度。 主要特征 无需配置。 自动应用于页面和文章上的所有图像。 提高性能,尤其是在具有许多图像的站点上。 定价:由于Jetpack包含 Image […]

WordPress CSS优化,FCP,First Contentful Paint,网站优化 文字详细教程

首次内容绘制 (FCP) 是Google Core Web Vitals中最有意义的指标之一。与其他绘制和加载指标相比,FCP不是关于响应时间的纯技术指标。FCP以用户体验和他们在网站上首先感知的内容为中心,而不是后台加载的内容。通过优化您网站的First Contentful Paint,您不仅可以加快整体加载时间并提高页面速度评级,还可以从字面上向访问者展示他们的请求正在处理中并且加载没有停止。 在本教程中,我们将深入探讨什么是First Contentful Paint,如何衡量和优化它,并回答一些关于FCP的常见问题,以便您可以确保您的网站尽可能高效和可用。 什么是首次内容绘制 (FCP)? 网站的首次内容绘制是浏览器在您的页面上呈现第一个DOM元素的时间。这包括图像、画布元素(非白色)或文本。通俗地说,FCP是指用户可以看到页面的某些部分发生变化。通常,这是作为标题栏或背景图像出现的。此元素可能不是从服务器呈现或加载的第一个元素,但它是用户可以看到的第一个元素,因此它对您网站的UX至关重要。 网站在iframe 中包含的任何内容都不会被FCP考虑在内。也不是非内容绘画,例如背景颜色的变化。那是First Paint,而不是 First  Contentful Paint。 FCP是一个有趣的指标。虽然您可以定量衡量它,但它也相对主观。拥有快速的首次内容绘制很重要,因为它会使用户感觉到您的网站正在快速加载。不管是不是真的。您的站点的首次交互延迟(用户可以与站点互动的时间)可能比竞争对手长得多,但由于您的FCP更快,因此在用户看来它可能更快。 也就是说,FCP并不是要欺骗您的用户。较低的FCP时间通常是页面速度的良好指标,优化它的方法也会影响其他页面速度指标(例如最大内容绘制)。 如何测量FCP 尽管FCP由于用户感知而很重要,但它是一个可以衡量和评分的可量化指标。尽管如此,您可以使用这些工具来指示FCP在现场(对真实用户)与实验室(用于测试目的的模拟页面加载)的影响。 什么是好的FCP评分? 在您深入研究用于检查FCP的各种工具之前,您需要了解什么才是好的FCP分数。从Google关于确定指标分数的文档中,我们可以看到他们将FCP时间分为三类——好、需要改进和差——并讨论了他们如何实现Lighthouse工具使用的百分位评分。 好– 在 0 秒到 1.8 秒之间 需要改进– 在 1.8 秒到 3 秒之间 差– 超过 3 秒 下面,我们列出了各种工具,您可以使用这些工具查看您的网站属于这些类别中的哪些类别。 现场工具 现场工具是您可以用来跟踪页面对用户的显示方式的工具。真实用户。这些工具不依赖于API和关于您网站的假设。它们直接在您的服务器上实时运行,以便您尽可能获得最准确和最新的信息。 Google在https://web.dev上的FCP文档显示这些是确定FCP的最佳现场工具: PageSpeed Insights Chrome用户体验报告 Search Console(速度报告) Web Vitals JavaScript 库 此外,也许最好的工具是真实用户监控 (RUM)。这是您跟踪和观看真实用户与您的网站互动的地方。您可以使用上面列出的工具定量跟踪他们的加载时间,然后您可以直接从他们那里获得他们对FCP和您的页面加载速度的主观看法。就FCP的最完整视图及其对访问者的影响而言,RUM绝对是榜首。然而,它也是最复杂和最难进行的。 实验室工具 […]

WordPress FID,First Input Delay,PageSpeed Insights,代码优化,首次输入延迟 文字详细教程

为访问者提供快速加载体验对您网站的成功至关重要。但是,有多种方法可以衡量它的表现如何。其中之一是首次输入延迟 (FID),它测量用户首次与您的网站交互到他们的浏览器响应该操作之间的时间量(以毫秒 (ms) 为单位)。 在这篇文章中,我们将解释FID是什么以及如何测量它。我们还将讨论怎样才算好的FID分数,并与您进一步了解如何优化FID分数。最后,我们将总结一些常见问题。 什么是首次输入延迟 (FID)? 正如我们提到的,首次输入延迟FID,英文全称为First Input Delay(有时也称为“Input Latency”)是对访问者与您的网站交互和浏览器响应之间发生的时间的度量,以毫秒为单位。这是Chrome用户体验报告中包含的重要指标。此外,它还是Core Web Vitals之一。这些是Google用来确定您网站的UX质量(进而确定其页面排名)的指标。 在这种情况下,输入或交互可以指范围广泛的动作。例如,它可能包括单击链接、按下按钮或选择复选框。但是,当用户滚动或放大页面时,FID不适用,因为这些不需要在他们的浏览器和您的网站之间进行新的响应。 一些不同的因素会影响这个指标。用户设备的速度和处理能力可能会产生影响。你无法控制。但是,您可以控制网页的大小和复杂性。更具体地说,您可以控制您的网站使用了多少JavaScript。例如,如果您有许多以随机顺序加载的图像或脚本,则可能会减慢整个过程并延迟用户的响应。 即使您的站点具有可靠的FCP和LCP,首次输入延迟也可能足够长以导致跳出率提高。他们可能会觉得您的网站反应迟钝且速度缓慢。 简而言之,FID用于确定页面加载时的响应程度。也许很明显,这个过程越快越好。因此,了解如何衡量您网站的FID以及如何提高分数非常重要。 如何测量FID 在开始优化FID分数之前,了解它目前的情况至关重要。理想情况下,为了提供可靠的用户体验 (UX),您需要FID分数低于100ms。 100毫秒或更少的分数被认为是好的,而100到300毫秒之间的分数有改进的空间。超过300ms 的FID分数很差。 要衡量您的FID,您可以使用Google PageSpeed Insights: 这是Google提供的免费工具,可通过多种方式测试您网站的性能。有了它,您可以观察各种关键指标,包括FID。 请注意,FID有时可能难以衡量。那是因为它需要用户输入。但是,只要您最近在您的网站上有用户互动,您就应该能够通过PageSpeed Insights找到此指标。 首先,在文本字段中输入您站点的URL,然后单击“Analyze(分析)”按钮。该工具完成对您的页面的分析后,它将为您提供结果并为您的网站提供总体评分: 您可以在Field Data(实测数据)部分下找到First Input Delay (FID)指标。在稍低的“Opportunities(优化建议)”部分下,您可以找到优化页面和分数的建议。 我们还想指出,Google将这些分数表示为实测数据。这意味着信息基于实际用户交互,而不是模拟测试(称为实验室数据或通过实验室工具找到)。FID是非常主观的,并且与用户的真实交互密切相关,因此确保您使用的是实测数据很重要。模拟只能说明这么多。 如何优化您的FID分数 现在您已了解FID分数是什么以及如何衡量它,是时候看看如何实际改进它了。以下是一些可用于降低首次输入延迟时间的提示和策略。 优化、极简化CSS和JavaScript代码 优化FID分数的最佳方法之一是压缩和优化CSS和JavaScript代码。这样做可以减小文件大小,进而提高响应能力。通过去除不必要的字符、空格和换行符,您可以减小文件大小,从而提高页面速度并减少浏览器必须处理的进程数量。因此,您的FID较低。 你可以借助工具帮助你极简化您的代码。一种快速而简单的方法是使用在线工具,例如Minify Code(类似的在线工具有非常多)。复制完整大小的代码,将其粘贴到站点,站点将其缩小,然后将结果复制/粘贴回站点。 您还可以使用代码编辑器手动缩小代码,尽管这可能会更复杂一些。但是,如果您有使用代码的经验,则此方法可以为您提供更多控制权。 另一种策略是使用插件,例如Autooptimize或W3 Total Cache。 如果您没有代码经验并希望在您的网站上自动实施此修改,这对于WordPress用户来说可能是一个可行的解决方案。此外,这些插件都提供了各种以优化为重点的功能,例如图像和内容缓存。 将较长的JavaScript任务分解为较小的任务 长任务往往会阻塞主线程,并可能导致JavaScript体积膨胀,从而损害站点的响应能力。为了防止这种情况发生并在此过程中提高FID分数,您可以尝试将这些任务分解为更小的异步任务。 解决此问题的最有效方法之一是代码拆分。简而言之,这是一种用于仅分解和加载较小且必要的代码片段的技术,而不是一次加载一个大文件。您可以使用诸如Webpack之类的工具来执行此操作。 WordPress主题往往带有自己的JS库,用户可能没有专业知识或权限来拆分代码并自行优化。 减少第三方代码和非关键脚本的影响 如果您有太多的第三方脚本,可能会延迟您网站自身数据的执行。因此,为了优化您的FID分数,减少第三方代码的影响并删除任何非关键的第三方脚本也是一个明智的想法。并推迟那些您无法删除的内容。 在决定哪些脚本最重要时,问问自己哪些脚本在网站的UX中扮演着重要角色。例如,也许您可​​以删除或延迟一些不是很必要的广告或弹出窗口。您的用户 是否需要首先看到电子邮件选择,或者您可以将其推迟到他们以某种方式与网站交互之后? 您还可以查看PageSpeed […]

WordPress Time to First Byte,TTFB,网站优化,首字节时间 文字详细教程

如果您想优化网站的速度和性能,了解需要关注的关键指标非常重要。例如,首字节时间 (TTFB,英文全称Time to First Byte) 测量用户浏览器从您网站的服务器接收首个“字节”数据所需的时间。不要渲染它或在屏幕上显示它。但是要简单地向浏览器返回一个字节。 在这篇文章中,我们将解释首字节时间TTFB是什么以及它为什么重要。然后我们将讨论如何衡量它,以及如何在WordPress网站上减少它。最后,我们将总结一些常见问题。 首字节时间(TTFB)是什么 TTFB衡量您的服务器对访问者浏览器请求的响应能力。换句话说,它是用户到达网页和服务器识别它之间所花费的时间。 这很重要,因为浏览器从服务器接收首字节数据所需的时间越长,加载页面所需的时间就越长。并且因为TTFB是最初的交互,很长的首字节时间意味着页面的其余部分甚至无法开始加载。因为服务器还没有响应。 因此,TTFB 在您网站的用户体验 (UX)及其搜索引擎优化 (SEO) 中起着举足轻重的作用。它也是Google考虑确定您网站的页面加载体验并进而确定其排名的Web Vitals之一(与FCP、LCP和CLS一起)。 TTFB类似于First Contentful Paint (FCP),它也用于衡量加载体验和用户的等待时间。但是,FCB会测量访问者看到页面上出现的首个元素所需的时间。TTFB是任何信息,无论可见与否。 网站的TTFB由三个主要流程组成: HTTP请求从访问者的浏览器发送到服务器。 服务器处理请求并准备其响应。 服务器将响应发送回浏览器。 此过程越快,您的加载时间就越快,响应也就越快。但是,一些因素和问题会在每个步骤中延迟和减慢它。因此,为了优化您网站的速度和性能,您可能希望专注于减少TTFB。 如何测量TTFB 您可以通过多种不同的方式来测量TTFB,包括使用实验室和现场工具。这意味着模拟结果(实验室)和使用真实用户数据(现场)的测试。但是,在此之前,先了解什么是好分数是有帮助的。 通常,有利的TTFB介于200毫秒 (ms) 和500毫秒(0.2到0.5秒)之间。当然,数字越小越好。任何超过600毫秒的值都被认为是低分。由于谷歌引入了页面速度作为排名考虑因素,许多网站的拍摄时间都在 100 毫秒以下。然而,在大多数情况下,低于 200 毫秒的任何东西仍然被认为是“好”的。 您可以使用多种工具来测量TTFB。让我们来看看一些最佳选择。 WebPageTest WebPageTest是一种在线工具,可让您快速轻松地测试页面速度。但是,您也可以使用它来访问包含关键指标(包括TTFB)的详细报告。 要使用它,您只需在文本字段中输入您的URL,然后单击“Start Test”按钮: 在结果页面上,您可以查看有关您网站的大量信息。在顶部,您可以找到TTFB的一般分数。在以下部分中,您可以在First Byte列下找到以毫秒为单位的时间: 根据WebPageTest,目标是域名服务器 (DNS)、套接字和安全套接字层 (SSL)协商所需的时间加上100毫秒。TTFB每增加100毫秒,在线工具就会将您网站的分数降低一个字母等级。 GTmetrix GTmetrix是另一个免费的在线工具,可用于测量TTFB。您可以在文本字段中输入您的网站URL,然后单击测试您的站点按钮: 该工具完成对您的URL的分析后,将显示性能报告,其中包括总体成绩以及您的Web Vitals: 在页面的更下方,您可以单击“Performance”选项卡: 在浏览器计时部分下,您可以找到TTFB。 这些只是您可以使用的在线测试工具的两个示例。其他流行的选项包括Bytecheck、Pingdom和KeyCDN等网站速度在线测试工具。它们都以与这两个选项类似的方式工作。粘贴URL,实时运行测试,然后解析结果报告。 谷歌浏览器开发者工具 另一种测量TTFB的方法是Chrome DevTools。如果您是Chrome用户,则可以使用此方法直接在浏览器中测量TTFB,而无需使用第三方工具。我们上面提到的许多速度测试都使用您可以选择的各种服务器位置,这样,它就直接来自您。 因此,请记住您的特定网络条件和网络延迟会影响 […]

WordPress PageSpeed Insights,Speed Index,网站优化,首屏展现平均值 文字详细教程

在考虑页面速度时,首屏展现平均值 (SI,全称Speed Index) 是一个有趣的指标。它绝对是您页面性能的指标,但它与其他以用户为中心的指标(例如First Contentful Paint和Largest Contentful Paint)完全不同。SI表示您的网站加载首屏的速度。或者换句话说,当用户视口中的所有内容都完全可见时。查看页面的加载时间时,您不太可能因首屏展现平均值而受到惩罚或奖励。这不是忽视它的理由。作为一个单一的指标,它是为数不多的包含多个其他指标的指标之一,可以让您对网站的整体速度、效率和性能有一个全面的了解。 什么是首屏展现平均值? Lighthouse是Google PageSpeed Insights的支柱,它会查看多个性能指标来为您的网站评分。首屏展现平均值 (SI) 就是其中之一,报告将以秒为单位显示时间,而不是像其他一些指标一样以毫秒为单位。Google将SI定义为“页面内容可见填充的速度”。 很直接,对吧? 首屏展现平均值不考虑后端脚本或其他非绘制负载。不过,它们确实会影响它。SI只是衡量用户完整查看您的内容所需的时间。虽然其他指标(例如LCP)是在显示内容的最大部分时衡量的,但首屏展现平均值考虑了实际应该显示的任何和所有内容。 这不是整体页面速度的衡量标准。这考虑了浏览器何时呈现所有元素。包括不可见的脚本和影响性能的元素。但是,如果您想很好地衡量用户何时认为页面已完全加载,则SI是要观察的指标。由于它是如何以用户为中心的,SI可以很好地表明整体站点的健康状况,也可以作为站点用户体验 (UX)的基准。 如何测量首屏展现平均值 与大多数网站性能指标一样,最常用的工具之一是Google自己的PageSpeed Insights。这个工具也是它返回的结果中最特别的工具之一。即使是最完善的站点,它也相对挑剔。PageSpeed Insights最常根据过去28天收集的汇总数据为您的网站提供实验室数据。但是,如果您有足够多的访问者通过Chrome将信息转发回Google,您也可以从报告中获取真实的实测数据。不过,并不是每个网站都能得到这个。 如您所见,其中许多指标的速度都是绿色的。这表明它们是“好”的。这显然是您想要您的网站的地方。但是,首屏展现平均值为4.0秒和橙色。用户需要等待很长时间才能看到首屏的所有内容。 什么首屏展现平均值分数才算优秀? PageSpeed Insights使用以下分数对您网站的首屏展现平均值进行排名并相应地对其进行颜色编码: 绿色(良好)——0 到 3.4 秒 橙色(中等)——3.4 到 5.8 秒 红色(慢) – 超过 5.8 秒 正如我们之前所说,PageSpeed Insights在其测量中非常重要。如果您处于橙色或红色状态,则可能需要使用诸如GTmetrix或Pingdom的速度测试类的工具来查看其实时数据显示的内容。我们认为最好在不同时间使用多种工具测试您的网站,以获得最佳整体性能图。 如何优化首屏展现平均值得分 您可以采取多个步骤来优化您的首屏展现平均值分数。如果您已经尝试优化您的网站以提高(或从技术上讲,降低)页面速度,那么您可能也以某种方式影响了您的 SI 分数。我们将向您展示一些专门针对您的 SI 时间的方法,以便您的页面尽快加载,从而为您的访问者提供最佳体验。 减少渲染阻塞资源 更具体地说,减少JavaScript执行时间是提高首屏展现平均值得分的最佳方法之一。渲染阻塞资源是脚本和代码,它们优先阻止您网站的其他部分加载。与站点同时加载不同的元素不同,一些元素会暂停所有其他元素,直到它们完成。 这会降低您网站的首屏展现平均值。为了解决这个问题,您可以推迟加载任意数量的脚本和代码位,直到可见元素绘制到DOM之后。识别罪魁祸首实际上相对容易,因为您可以使用Chrome开发工具在您的网站加载时查看您的网站,该工具将指出是什么阻止了元素的渲染。 此外,WordPress用户可以使用W3 Total Cache或WP Rocket等缓存插件(或站点优化插件)来处理此问题。通常这些插件有一个简单的切换来延迟渲染阻塞资源。 减少网站主线程工作 […]

WordPress Autooptimize,css交付,CSS优化,WP Rocket 文字详细教程

CSS文件控制WordPress网站的视觉格式和样式。但是,如果您的CSS代码没有以最佳方式交付,那么它可能会降低您的网站速度。在本教程中,我们将向您展示两种优化WordPress网站CSS交付的简单方法。 WordPress网站CSS交付如何影响WordPress性能 CSS文件用于定义WordPress站点的视觉外观。您的WordPress主题包含一个CSS样式表文件,您的一些插件也可能使用CSS样式表。CSS是现代网站所必需的,但CSS文件可能会降低您网站的速度和性能,具体取决于它们的设置方式。 即使网站速度稍有延迟,也会造成糟糕的用户体验,并可能影响您的搜索排名和转化,从而导致流量和销售额减少。 CSS文件可能会减慢网站速度的一种方式是,是否需要在显示页面之前加载它们。这意味着您的访问者将看到一个空白页面,直到CSS文件加载完毕。这被称为渲染阻塞CSS。CSS文件可能会降低网站速度的另一个常见原因是,它们包含的代码比显示当前页面可见部分所需的代码多。额外的代码意味着它们需要更长的时间来加载。 好消息是,您可以通过优化CSS代码的交付方式来提高WordPress网站的性能。这是通过确定显示当前网页的第一部分所需的最少CSS代码来完成的。这被称为关键 CSS。然后将此关键代码内联添加到页面的HTML中,而不是添加到单独的样式表中,以便无需先加载CSS文件即可呈现代码。 在您的访问者可以看到页面的内容后,可以加载其余的CSS。这称为“延迟加载”。在本教程中,我们将向您展示两种优化WordPress网站CSS交付的方法,您可以选择最适合您的一种。 方法 1:使用WP Rocket优化WordPress CSS交付 方法 2:使用Autooptimize优化WordPress CSS交付 方法 1:使用WP Rocket优化WordPress CSS交付 WP Rocket是市场上最好的WordPress缓存插件。它提供了优化WordPress CSS交付的最简单方法。事实上,这就像选中一个框一样简单。WP Rocket是一个付费插件,但最好的部分是所有功能都包含在基础版本中。 您需要做的第一件事是安装并激活WP Rocket插件。激活后,您需要导航到“设置”»“WP Rocket”页面并切换到“File Optimization”选项卡。 接下来,您需要向下滚动到CSS files部分。在那里,您需要选中“Optimize CSS delivery”选项旁边的框。 此功能将智能地识别对访问者首先看到的网页部分进行格式化所需的关键CSS。您的页面将加载得更快,而其余的CSS将在您的访问者看到其内容后加载。 您现在需要做的就是单击“Save Changes”按钮并等待WP Rocket为您的所有文章和页面生成必要的CSS文件。它还会自动清除您网站的缓存,以便您的访问者看到您网站的新优化版本,而不是缓存中存储的任何未优化版本。 WP Rocket 还有很多其他方法可以帮助您提高网站的性能。要了解更多信息,请参阅我们关于如何在WordPress中正确安装和设置WP Rocket的教程。 方法 2:使用Autooptimize优化WordPress CSS交付 Autooptimize是一个免费插件,旨在改进您网站的CSS和JS文件的交付。虽然Autoptimize是一个免费插件,但它没有WP Rocket那么多的功能,及需要更多的时间来设置。 例如,它无法像WP Rocket那样自动识别关键 CSS。相反,Autoptimize需要高级第三方服务的帮助,这需要额外的费用并需要额外的时间进行配置。但是,如果您预算紧张并且不需要WP Rocket的所有其他功能来加速您的网站,那么它可能是一个不错的选择。 您需要做的第一件事是安装并激活Autooptimize插件。激活后,您需要访问设置»Autoptimize页面以配置插件设置。在那里,您需要向下滚动到CSS选项部分并选中顶部的Optimize CSS Code框。 完成此操作后,您需要确保未选中“Aggregate CSS-files”选项,然后选中“Eliminate render-blocking CSS”。您现在可以单击“Save […]

WordPress Query Monitor,WordPress调试,网站性能 文字详细教程

想象一下这种情况:您正在处理WordPress开发项目并安装了十几个或更多插件。但是,您的网站并没有像您希望的那样嗡嗡作响。您已经排除了所有常见的疑点:托管已经足够,没有明显的JavaScript或PHP错误,也没有其他明显的错误。您怀疑您安装的一个或多个插件是罪魁祸首,但您如何确定是哪个插件导致了问题? 识别麻烦插件的常用方法是逐个停用插件,直到您尝试解决的行为停止。但是,安装正确的插件后,您可以更快、更准确地查明和调试WordPress问题。这是Query Monitor旨在解决的那种场景。 什么是Query Monitor? Query Monitor有什么作用? 如何使用Query Monitor 什么是Query Monitor? Query Monitor是一个免费的WordPress调试和开发插件。您可以使用它来识别和调试缓慢的数据库查询、AJAX调用、REST API请求等等。此外,该插件还会报告网站详细信息,例如脚本依赖项和依赖项、在页面生成期间触发的WordPress钩子、托管环境详细信息、当前页面满足的条件查询标签等等。 WordPress插件-Query Monitor 该插件由John Blackbourn开发,他是WordPress的核心提交者,目前是Human Made的一名开发人员,之前受雇于WordPress.com VIP — 换句话说,他是真正了解WordPress的人。Query Monitor于2013年被添加到WordPress插件目录中,目前拥有超过10,000次活动安装——对于开发插件来说,这是一个令人印象深刻的总数。该插件的用户评分为五颗星,这有助于解释它在开发人员中的受欢迎程度。 Query Monitor有什么作用? 很多。 我们不会花时间列出Query Monitor提供的每个功能,但如果您想深入了解细节,请查看GitHub上的Query Monitor。在高层次上,Query Monitor所做的是在生成WordPress网页的同时监视服务器上或服务器与访问者浏览器之间发生的每个WordPress事务。然后,它将报告附加到网页的页脚,详细说明它收集的所有信息。它适用于每个页面,包括 /wp-admin/ 页面,因此您可以使用它调试任何前端或后端页面。 该插件以核心功能命名:数据库查询监控。每个查询都受到监控、计时,并绑定到生成它的函数。因此,您可以根据查询的处理时间对查询进行排序,并查明有问题、加载缓慢的查询。 Query Monitor还跟踪并列出生成页面的WordPress钩子和条件标签应用程序。作为开发人员,您可以使用此信息来确定添加新插件或主题功能时要使用的正确挂钩或条件标签。 Query Monitor提供了很多附加信息。处理Query Monitor生成的所有内容的最佳方法是将其安装在测试站点上并查看报告。 如何使用Query Monitor 使用您喜欢的方法安装Query Monitor:它位于GitHub上,也可从WordPress插件目录获得。安装插件后,您会注意到的第一件事是管理栏中添加了一个新菜单项: Query Monitor管理栏 新项目上的标签显示了一些指标: 页面生成时间, PHP内存使用高峰, 数据库查询时间,以及 进行的数据库查询总数。 将鼠标悬停在管理栏上,将出现一个下拉菜单。Query Monitor生成的所有数据都包含在添加到页面底部并分为多个部分的单个报告中。单击下拉菜单中的任何项目以转到查询监视器报告的相应部分。例如,下面是页面上运行的整体“queries”的屏幕截图。 Query Monitor查询 如果发生任何PHP错误,或者任何查询花费的时间过长,其他项目将添加到下拉菜单中,突出显示这些问题。单击它们以查看更多详细信息。 您可能会注意到列表中的最后几项从一页更改为下一页。这些以绿色显示的项目是当前页面满足的条件查询标签。 […]

WordPress CSS优化,CSS属性,web开发,字体渲染,页面布局,页面渲染 文字详细教程

即使在2021年,网络性能仍然是一个问题。根据HTTP Archive,平均每个页面需要2MB的下载,发出60多个HTTP请求,在移动设备上完全加载可能需要18秒。样式表占60 kB,分为七个请求,因此在试图解决性能问题时,它很少是最优先考虑的。 然而,CSS确实有影响,不管它看起来多么轻微。一旦解决了JavaScript问题,学习正确优化CSS应该是下一个重点。 CSS如何影响页面性能 CSS性能分析工具 间接CSS性能优化 优化CSS加载性能 优化CSS性能 CSS如何影响页面性能 CSS看起来是无辜的,但可能需要一些繁重的处理。 CSS渲染阻塞 当浏览器遇到<link>标记时,它会在获取和解析CSS文件时停止其他浏览器下载和处理。 JavaScript也可以阻止浏览器渲染,但异步处理可以通过以下方式实现: async属性用于并行下载脚本,脚本准备就绪后立即运行。 defer属性以并行方式下载,然后在DOM就绪时按顺序运行。 type=”module” 属性加载ES模块(其行为类似于 defer)。 诸如图像之类的资源通常需要更多带宽,但可以使用有效的格式,并且可以延迟加载(loading=”lazy”属性),而不阻止浏览器渲染。 所有这些都不可能用CSS实现。文件被缓存,因此后续页面加载应该更快,但渲染阻塞过程仍然存在。 大型CSS文件处理耗时 样式表越大,下载和处理CSS对象模型(CSSOM)所需的时间就越长,浏览器和JavaScript API可以使用该模型显示页面。尽管CSS样式表比大多数其他网站文件都小,但它们也不能免于“越小越好”的经验法则。 CSS文件增长 识别不再使用的样式可能很困难,删除错误的样式可能会对站点造成严重破坏。开发人员通常选择最安全的“保留一切”方法。不再使用的页面样式、组件和小部件仍然存在于CSS中。结果如何?文件大小、复杂性和维护工作量呈指数级增长,使得开发人员删除冗余代码的可能性越来越小。 样式表可以引入其他资源 CSS可以使用@import规则引用其他样式表。这些导入阻止当前样式表的处理,并串联进一步加载 CSS 文件。 其他资产,如字体和图像,也可以参考。浏览器将尝试优化下载,但当有疑问时,它会立即获取它们。内衬基座 64 编码文件仍需进一步处理。 CSS可以使用@import规则引用其他样式表。这些导入会阻止当前样式表的处理,并以串行方式加载更多CSS文件。 也可以引用其他资源,例如字体和图像。浏览器将尝试优化下载,但如果有疑问,它将立即获取下载。内联base64编码文件需要进一步处理。 CSS效果渲染 浏览器有三个渲染阶段: 布局layout(或回流reflow)阶段计算每个元素的尺寸,以及它如何影响周围元素的大小或位置。 绘制paint阶段将每个元素的可视部分绘制到单独的层上:文本、颜色、图像、边框、阴影等。 渲染层合成(composite draws)根据堆叠上下文、位置、z-indexes等,以正确的顺序将每个层绘制到页面上。 如果不小心,CSS属性更改和动画可能会导致所有三个阶段重新渲染。某些特性(如阴影和渐变)在计算上也比块颜色和边距更昂贵。 CSS性能分析工具 承认您有CSS性能问题是恢复的第一步!找到并解决原因是另一回事。 以下工具和服务(不按任何顺序排列)可以帮助您识别代码中的样式瓶颈。 1. 开发人员工具网络面板 Web性能专家花大量时间在开发工具上,尤其是在网络面板上。DevTools是大多数现代浏览器的原生版本,不过我们将在示例中使用Google Chrome。 DevTools可以从浏览器菜单打开,通常是在“更多工具”>“开发人员工具”中,或者通过键盘快捷键Ctrl | Cmd+Shift+I或F12打开。 切换到“网络”选项卡,并确保选中“禁用缓存”,以防止缓存文件影响报告。您还可以更改限制选项以模拟较慢的移动网络。 刷新页面以查看下载和处理瀑布图: DevTools网络面板 任何耗时较长的加载进度条都值得关注,但您应该特别关注堵塞/停滞加载进度条(显示为白色)。在本例中,高亮显示的行和所有后续行都无法开始下载,直到在HTML页面顶部处理了渲染阻塞CSS和JavaScript文件。 过滤器框允许您显示或隐藏特定资源: […]

WordPress DNS缓存,服务器缓存,浏览器缓存,缓存 文字详细教程

在网络上获取信息需要处理能力和时间。数据需要从一台服务器传输到另一台服务器。使用缓存减少了这个时间和资源使用。 回答什么是缓存取决于上下文。总的来说,缓存是一种保存和快速调用常用数据的方法。管理缓存,尤其是在使用WordPress时,可能是流畅、快速运行的站点和令人沮丧的缓慢站点之间的区别。 这篇文章将回答“什么是缓存?”的问题。并提供一些有关如何管理您的见解。 什么是缓存? 缓存如何帮助您优化网站 使用缓存的网站技术 WordPress如何处理缓存 如何安装缓存插件 如何清除缓存 什么是缓存? Web缓存的工作原理 缓存获取应用程序处理的数据并将其存储以备后用。它并不一定要在本身的浏览器,但你会发现网站和其底层技术的使用缓存很多。 “缓存”是存储和调用已保存数据过程的术语。缓存通常包括两个元素: 缓存软件本身运行该过程并将其在各种其他元素之间穿梭。 随机存取存储器 (RAM) 和“内存中”引擎。它们存储通过缓存技术传递的数据。 这些元素必须是高质量和协作的。性能低下的RAM将无法足够快地调用数据以使软件有效地使用它。 考虑到页面文件的大小,大多数Web应用程序几乎都需要缓存。在某些情况下,可靠的实现可以为您提供宝贵的时间。评论网站加载速度快的用户间接称赞了网站服务器核心的缓存软件。我们将在接下来更详细地介绍这一点。 缓存如何帮助您优化网站 计算机技术在不断扩展。换句话说,内存、硬盘空间和其他此类计算机处理元件的大小正在快速增加。在我们的个人计算机中使用64KB RAM的日子已经一去不复返了。现在通常可以看到千兆字节 (GB) 的RAM。一些较新的Apple MacBook甚至可以容纳64 GB的内存。 由于现代Web开发和相关技术放置现场代码的需求,网站也变得越来越重。它不仅需要为最终用户提供更多的处理能力,还需要更强大的服务器和技术来适应。如果没有内存(和缓存),加载速度会慢到爬行。 因此,搜索引擎优化 (SEO) 早就认识到页面速度是网站排名的主要因素。虽然不知道确切的细节,但在搜索引擎结果页面 (SERP) 中放置站点的排名因素包括对站点速度的引用。 文件大小精简而平均也同样好 虽然排名指标不会像您想象的那样使用网站速度作为直接衡量指标——有太多因素在起作用,无法将其用作可靠的指标——但许多其他方面都将其考虑在内。例如,您网站的HTML代码质量和Google Chrome中的加载时间也会产生影响。 DevTools中记录的页面加载速度 关于用户体验 (UX),一个长期存在的指标表明用户将在仅等待两秒钟后放弃页面。它带来了几个问题: 您的Google RankBrain优化(包括跳出率)需要准确无误;否则,您的SEO努力将一事无成。 更快的网站加载速度将有助于控制跳出率。 您网站的用户体验是您网站最关键的元素之一。 通过减少页面加载所需的时间,缓存可以在所有这些方面提供帮助。更重要的是,您的站点使用的资源将减少,从而进一步产生影响。总的来说,快速加载最相关和最新信息的网站将比其他网站表现得更好。接下来,我们将研究您在使用缓存时可能遇到的一些问题。 缓存有时如何导致问题 当然,缓存并不总是花里胡哨。主要的问题是实现一个运行良好的缓存。对于许多小型站点(或至少非企业或网络)来说,不需要大而频繁的缓存周期。它可以看到您的服务器浪费资源缓存未更改的页面。 另一方面,缓存不足(或以正确的方式)的策略和实现可能会看到您提供过时的页面。这个问题有时会发生在 WordPress 网站上。但是,有一些技巧可以克服它。 当然,为页面的旧缓存版本提供服务可能会导致问题。考虑一个必须定期更新其信息的流行病资源站点。现在考虑浏览器缓存不足或不存在对页面的影响。 好消息是,设置缓存以减轻或减轻这些缺点的影响很简单。我们稍后会讨论这个。 使用缓存的网站技术 我们已经注意到缓存通常如何以几种不同的方式在计算中涉及。不过,在本文中,我们将研究非CPU缓存。如果您回顾一下Apple MacBook规格,您会注意到处理芯片中通常包含几兆字节 (MB) 的缓存: […]

WordPress WordPress优化,WordPress嵌入 文字详细教程

在Web性能方面,任何优化都不会太小。随着时间的推移,许多这些小技巧和优化可以开始减少相当多的整体加载时间。在此前,我们分享了如何在WordPress中禁用表情符号。今天我们想与您分享如何在WordPress中禁用嵌入。 当他们发布WordPress 4.4时,他们将oEmbed功能合并到核心中。您之前可能已经看到或使用过它。这允许用户只需粘贴URL即可在其网站上嵌入YouTube视频、推文和许多其他资源,WordPress会自动将其转换为嵌入内容,并在可视化编辑器中提供实时预览。例如,我们从Twitter粘贴了这个URL:https://twitter.com/kinsta/status/760489262127120385,它被转换成你在下面看到的。您可以查看官方支持的嵌入类型列表。 嵌入Tweet推文 WordPress长期以来一直是oEmbed消费者,但随着更新,WordPress 本身成为oEmbed提供者。此功能对很多人都很有用,您可能希望保持启用状态。但是,这意味着它现在还会在您的WordPress站点上生成一个额外的HTTP请求来加载wp-embed.min.js文件。这会加载到每个页面上。虽然这个文件只有1.7KB,但这些东西会随着时间的推移而增加。请求本身有时比内容下载大小更重要。 wp-embed.min.js 在WordPress中禁用嵌入 有几种不同的方法可以在WordPress中禁用嵌入。您可以使用免费插件、代码或内联缩小的JS来实现。 插件禁用嵌入 代码禁用嵌入 内联缩小的JS 1. 使用插件禁用WordPress嵌入 禁用嵌入的第一种方法是简单地使用一个名为Disable Embeds的免费插件,该插件由Pascal Birchler开发,  他实际上是WordPress的核心贡献者之一。 Disable embeds插件 这个插件超级轻量级​​,准确地说只有3KB。在撰写本文时,它目前有超过20,000 次活跃安装。您可以从WordPress插件库下载它 ,也可以在WordPress仪表盘中的“插件-安装插件”下搜索它。无需配置,只需安装、激活,额外的JavaScript文件就会消失。具有以下特点: 防止其他人嵌入您的网站。 防止您嵌入其他未列入白名单的网站。 禁止在您的WordPress网站上加载JavaScript文件。 您仍然可以使用YouTube和Twitter的嵌入iframe脚本嵌入内容。您还可以使用像perfmatters这样的高级插件,它允许您禁用嵌入以及对WordPress网站的其他优化。 使用perfmatters插件禁用嵌入 2. 使用代码禁用WordPress嵌入 如果您不想安装其他插件,您也可以使用代码禁用嵌入。首先创建网站备份,然后,将以下内容添加到您的主题的functions.php文件中。注意:代码来自上面的Disable Embeds插件。 重要的!如果操作不当,编辑WordPress主题的源代码可能会破坏您的网站。也就是为什么要先备份后改代码! function disable_embeds_code_init() { // Remove the REST API endpoint. remove_action( ‘rest_api_init’, ‘wp_oembed_register_route’ ); // Turn off oEmbed auto discovery. add_filter( ’embed_oembed_discover’, ‘__return_false’ ); // Don’t […]

WordPress rss,RSS Feeds 文字详细教程

WordPress主要以其强大的博客功能而闻名。人们使用RSS订阅源订阅您发布的新内容,也订阅第三方阅读器应用程序,例如Feedly。这样他们就可以随时随地阅读您的新鲜内容。然而,并不是每个人都使用WordPress的博客部分,对于一些企业,事实上,可能只是想在WordPress 中完全禁用RSS Feeds。 默认情况下,WordPress会生成各种内置的RSS Feeds,例如: http://example.com/feed/ http://example.com/feed/rss/ http://example.com/feed/rss2/ http://example.com/feed/rdf/ http://example.com/feed/atom/ 还为您的类别、标签、评论等生成Feed。 WordPress禁用RSS Feeds 有几种不同的方法可以在WordPress中禁用RSS Feeds。您可以使用插件或代码来完成。 使用插件禁用RSS Feeds 使用代码禁用RSS Feeds 1. 使用插件禁用RSS Feeds 禁用WordPress的RSS Feeds的第一种方法是使用像Disable Feeds这样的免费插件。此插件通过重定向所有请求来禁用WordPress网站上的所有RSS/Atom Feeds。它还禁用BuddyPress组Feeds和bbPress论坛Feeds。 您可以从WordPress插件库下载Disable Feeds,也可以在WordPress仪表盘中的“插件-安装插件添”下进行搜索。然后您可以在“设置-阅读”部分下更改设置。默认情况下,插件会将请求重定向到其相应的HTML内容。例如,如果访问者点击分类的RSS Feeds,他们将被定向到分类的存档页面。您还可以选择仅显示404错误,以及是否禁用全局文章Feeds和全局评论Feeds。 Disable Feeds插件 注意:该插件仅禁用源本身,您仍然需要在WordPress主题或相应的侧边栏和页脚小部件中自己删除指向RSS源的链接。 您还可以使用像perfmatters这样的高级插件,它允许您禁用RSS Feeds和禁用RSS Feeds链接,以及对WordPress网站的其他优化。 使用perfmatters禁用RSS Feeds 2. 使用代码禁用RSS Feeds 禁用WordPress RSS Feeds的第二种方法是简单地使用代码。 警告!如果操作不当,编辑WordPress主题的源代码可能会破坏您的网站。建议操作前,备份好原文件。 将以下代码复制到您的子主题的 functions.php文件中。 function itsme_disable_feed() { wp_die( __( ‘No feed available, please […]

100% Secure Checkout

PayPal / MasterCard / Visa