任何问题请联系WX:uu16853

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

购买更多有优惠!

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 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 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 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压缩,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 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 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 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 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 […]

WordPress Cache-Control,浏览器缓存,缓存服务器,缓存验证器 文字详细教程

您是否在WordPress网站上的Pingdom、GTmetrix或Google PageSpeed Insights中看到“指定缓存验证器(Specify a Cache Validator)”警告?这是因为缺少HTTP缓存标头,这些标头应该包含在每个源服务器响应中,因为它们都验证并设置了缓存的长度。如果没有找到标头,它每次都会为资源生成一个新的请求,这会增加服务器的负载。 使用缓存标头可确保 不必从服务器加载后续请求,从而为用户节省带宽并提高性能。 指定缓存验证器警告 Pingdom的警告指出: 以下资源缺少缓存验证器。未指定缓存验证器的资源无法有效刷新。指定Last-Modified或ETag标头以启用以下资源的缓存验证。 按照有关如何解决“指定缓存验证”的警告下面的步骤。 修复“指定缓存验证器”警告 关于此警告需要注意的第一件事是,您只能针对服务器上的请求修复此问题。如果您有3rd方请求,您会看到此内容,则您无能为力,因为您无法控制他们的Web服务器。尽管随时与他们分享这篇文章。请记住,使用Pingdom,您可能需要多次运行测试。可能是第一次出现警告,第二次消失。当您第一次运行该工具时,它会从服务器启动资产的缓存。 有四种不同类型的标题可以以不同的方式用于修复此警告。这可能会让人有点困惑,但我们将尝试尽可能简单地解释它。 验证缓存的标头 前两个标头是last-modified和ETag。这些标头可帮助浏览器确定自上次请求以来该文件是否已更改。或者更确切地说,他们验证缓存。 1. 上次修改 最后修改标头通常自动从服务器发送。这是一个您通常不需要手动添加的标题。发送它是为了查看自上次请求以来浏览器缓存中的文件是否已被修改。您可以在Pingdom中查看header请求或使用Chrome DevTools查看最后修改的header的值。 最后修改的标题 2. ETag ETag的头也很类似Last-Modified头。它还用于验证文件的缓存。如果您运行的是Apache 2.4或更高版本,则ETag标头已使用FileETag指令自动添加。就NGINX而言,自2016年以来,ETag标头默认启用。 ETag标头 您可以使用以下代码在NGINX中手动启用ETag标头。 etag on 决定缓存长度的标头 接下来的两个标头是Cache-Control和Expires。这些标头有助于确定文件在从服务器获取新副本之前应在缓存中保留多长时间。请记住,要修复您在Pingdom或GTmetrix中看到的警告,您需要确保您有一个既可以验证缓存又可以确定缓存长度的标头。 3. 缓存控制 Cache-Control是由不同指令组成的标头,允许您定义缓存的长度。一些最常见的指令包括: max-age:定义文件应该被缓存的时间。 public: 允许任何缓存公开存储响应。 private:只能通过浏览器访问文件缓存。 缓存控制头 在上面的示例中,我们可以看到资产正在使用max-age指令。604800秒等于7天的缓存。要在Apache中进行配置,只需将以下代码添加到您的 .htaccess 文件中。 <filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”> Header set Cache-Control “max-age=604800, public” </filesMatch> 要在NGINX中配置它,只需将以下代码添加到您的配置文件中。所有NGINX配置文件都位于该/etc/nginx/目录中。主要配置文件是/etc/nginx/nginx.conf. location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { add_header Cache-Control […]

WordPress CDN加速,Pingdom,浏览器缓存,网站性能,网站测试 文字详细教程

今天我们想深入探讨如何更好地使用和理解流行的网站速度测试工具Pingdom的数据。您可以使用它对您的WordPress网站进行我们所说的瀑布分析。这可以帮助您快速诊断性能问题,并且不会误诊问题。 很多时候我们看到WordPress用户在Pingdom速度测试工具中解释数据错误,这导致有时将网站配置为比以前更糟糕的状态。请记住,所有此类工具都将用作指南,它们永远不会100%准确。重要的是在所有测试中保持一致并使用相同的工具。 Pingdom Pingdom是一家总部位于瑞典的公司(现归SolarWinds所有),提供各种不同的服务,例如正常运行时间监控、页面速度监控、交易监控、服务器监控和访问者洞察 (RUM)。他们最著名的事情之一可能是他们的免费网站速度测试工具。它是WordPress 社区中最受欢迎的性能测试工具之一。 为什么如此受欢迎?嗯,首先,它可能是最容易使用的速度测试工具!并非每个人都是网络性能专家,因此对于典型的WordPress用户来说,其他一些替代工具可能会让人不知所措。有时正如他们所说,少即是多。毕竟,您只关心两件事:您的网站有多快以及如何使其更快。 Pingdom网站速度测试 Pingdom 目前允许您测试来自全球7个不同地点(5大洲)的任何网站的速度: 亚洲 – 日本 – 东京 欧洲 – 德国 – 法兰克福 欧洲 – 英国 – 伦敦 北美 – 美国 – 华盛顿特区 北美 – 美国 – 旧金山 太平洋 – 澳大利亚 – 悉尼 南美洲 – 巴西 – 圣保罗 注意:我们注意到有时并非所有测试位置都可用。这很可能是因为它因维护而停机,或者由于太多人试图对其进行测试而使其过载。如果您一直使用的测试站点位置不再存在,请在一两个小时后回来查看。很有可能它会再次出现。 您选择的测试位置实际上非常重要,因为它与您的网站实际托管的物理位置有关。这就是一个叫做网络延迟的小东西 发挥作用的地方。但我们将在下面更详细地介绍这一点。 使用Pingdom速度测试工具进行瀑布分析 网页由不同的资源组成,例如HTML、JavaScript、CSS、图像和视频。这些中的每一个都会生成请求以呈现您在网站上看到的内容。通常,您的请求越多,您的网站加载速度就越慢。情况并非总是如此,但大多数情况下确实如此。 下面我们将分解每个Pingdom部分,并更详细地解释信息的含义,因为它与您网站的整体性能以及如何进行瀑布分析有关。 Pingdom摘要 性能洞察 响应代码 按内容类型划分的内容大小和请求 按域划分的内容大小和请求 […]

WordPress MySQL优化,MySQL性能,数据库优化 文字详细教程

MySQL是最流行的Web服务器数据库管理系统之一。如果您正在运行一个WordPress网站,它很有可能使用MySQL作为其数据库。这使您必须了解如何完成MySQL性能优化。 优化您的MySQL数据库,以便软件可以更快地响应查询。最终,这可能会导致更短的加载时间和整体更快速的网站。此外,如果您正确维护您的数据库,它应该继续提供高性能,即使它的大小增长。 在本文中,我们将简要概述MySQL是什么以及它是如何工作的。然后我们将探索如何使用四个基本技巧来执行MySQL性能调整。 MySQL是什么以及它是如何工作的 完成MySQL性能调优的4个技巧 MySQL是什么以及它是如何工作的 动态网站将信息存储在数据库中,这是包含大量信息的复杂表格结构的奇特术语。数据库使您能够存储变量并“查询”它们以获得所需的信息。例如,当您加载WordPress网站时,内容管理系统 (CMS)将连接到其数据库以获取所需的信息。 如果由于某种原因WordPress无法连接到数据库,您可能会遇到诸如“ MySQL Server Has Gone Away ”或“ MySQL 1064 ”之类的错误。MySQL是一种开源软件,可让您创建和管理数据库。它远非唯一可在线使用的数据库管理系统。然而,它在市场份额方面确实占据主导地位,大约有15%的网站使用它。   MySQL市场份额 数据库管理有不同的方法,MySQL使用“关系”和“客户端-服务器”模型。这是什么意思: 关系数据库——这种类型的数据库将信息分解成表格。由于关系模型,您可以使用“键”或唯一标识符连接来自多个表的数据。 客户端-服务器模型——使用此模型,您的数据库位于服务器中,而您的网站是客户端。浏览器向您的网站发出请求,而后者又会查询数据库。 由于MySQL是开源软件,因此有许多可用的分支。例如,MariaDB,它是MySQL的一个分支。MariaDB 比其父软件提供了更高的性能。 学习如何让MySQL自己运行得更快仍然是一项宝贵的技能,但是,主要是在您的Web主机不为您进行优化的情况下。让我们谈谈优化需要什么。 完成MySQL性能调优的4个技巧 如果您使用WordPress并想学习如何让MySQL运行得更快,那么最好的办法不是专注于特定的配置。相反,您需要微调您的数据库以匹配您使用WordPress的方式。让我们谈谈这意味着什么。 1. 使您的MySQL版本保持最新 大多数网络主机会自动为您更新MySQL到最新版本。但是,如果您可以完全控制服务器,则需要手动更新数据库管理系统。由于您使用的是WordPress,您可能了解使软件保持最新状态的好处。MySQL性能调优有很多优点,比如: 较新的版本修补软件中的安全漏洞。 最新版本的MySQL得到了更好的优化,因此速度更快。 更快的数据库管理软件直接转化为更短的加载时间。但是,您可能不知道您使用的是哪个版本的MySQL。如果您对服务器具有完全访问权限,则可以启动命令行并运行以下命令: mysql -v -v参数将返回有关您的服务器使用的MySQL版本的信息。您可以将该信息与MySQL官方网站上的最新版本进行比较,以查看可用的更新版本。如果您不习惯使用命令行,可以通过WordPress仪表盘找出您正在使用的MySQL版本。 首先,访问仪表板并转到工具> 站点健康。接下来,打开信息选项卡并单击数据库:   在WordPress中检查MySQL版本 根据您的MySQL版本,软件可能会自动更新。如果没有,您可以使用命令行将MySQL更新到最新版本。 2. 检查您的数据库中是否存在孤立表 通常,您从网站上卸载的插件和网站主题会留下数据。这可能是由于糟糕的编码标准,或者因为插件/主题决定存储该数据,以防您想重新安装它们。这种方法背后的想法是将设置和配置存储在您的数据库中将节省您的时间和工作。 但是,所有这些未使用的表都可能导致数据库膨胀,这反过来可能会降低查询速度,具体取决于服务器的功能。理想情况下,您将在卸载插件后进行清理,以便防止孤立的表和数据堆积。您可以通过两种方式完成该任务:手动或使用插件。 在任何情况下对数据库进行任何更改之前,我们建议您完全备份您的WordPress站点。即使您的主机进行每日备份,这也适用,因此您将拥有站点的副本以在需要时恢复。 备份后,您可以通过phpMyAdmin访问您的数据库。如果您是宝塔面板用户,请登录宝塔面板后台并转到数据库。选择您要处理的站点点击“管理”链接。即可通过phpMyAdmin直接访问你的数据库: 通过宝塔面板访问phpMyAdmin 进入phpMyAdmin后,您可以使用该软件的搜索功能来查找与特定插件相关的孤立表。这种方法的问题是很难知道要使用哪些查询,除非您尝试清理的插件具有全面的文档。 例如,Yoast SEO建议在卸载插件后使用wpseo查询查找与插件相关的表。使用phpMyAdmin运行快速搜索将返回包含不同表中该术语的条目列表: 在您的数据库中查找与Yoast SEO相关的条目 尽管手动方法有效,但我们鼓励您使用数据库清理插件解决方案。使用其中一些插件,您甚至可以从仪表板中找到孤立的表并删除它们,而无需通过phpMyAdmin进行挖掘。 3. 确定MySQL正在自动加载哪些数据 […]

WordPress 图片盗链,防盗链 文字详细教程

没有什么比有人窃取图像或带宽更糟糕的了,但这种情况经常发生,因为互联网上的一切都是公开的,人们可以轻松链接到。如果此人链接到您必须获得使用许可的库存照片,这可能会花费服务器带宽、流量,即您的金钱。 今天我们将解释什么是盗链,它为什么不好,以及如何防止其他人在您WordPress网站上的盗链。 什么是盗链? 为什么盗链不好 防盗链会影响SEO吗? 如何防盗链 如何提交DMCA删除通知 什么是盗链? 盗链的概念非常简单。您可以在Internet上的某处找到图像,然后直接在您的站点上使用图像的 URL。此图片将显示在您的网站上,但将从原始位置提供。这对盗链者来说非常方便,但实际上是盗窃,因为它使用了盗链网站的资源。这就像我们上车开走我们从邻居车里吸走的汽油一样。 为什么盗链不好 以下是盗链时需要注意的几件事: 1. 盗链花费了原始网站所有者的钱 有人从他们的网站链接到您的图片可能看起来没什么大不了的,但这可能会给您带来很多额外的成本。燕麦片就是一个很好的例子。赫芬顿邮报热链接了他的一部由多张图片组成的卡通片。由于我们谈论的是一个流量很大的主要出版物,这给The Oatmeal带来了很多额外的成本,因为成千上万的人正在收到这些图像。在经典的Oatmeal举措中,The Oatmeal的创建者Matthew Inman将所有热链接文件替换为以下内容: 盗链示例 他还小心地用一张画着“后面”和“小便”的图片替换了最后一张图片。惊人的!但正如您所看到的,成本会迅速增加,特别是如果高流量站点是您的内容盗链的站点。您想相信所有作家和博主都知道如何正确使用图像吗?可能不是。这就是盗链保护存在的原因。 2. 盗链在大多数情况下是非法的 在很多情况下,盗链实际上是非法的。为什么?因为您在网络上看到的许多照片都附加了许可限制。以下是一些常见的图片限制,限制了流行图片网站的许可: “在任何情况下都不允许商业用途。” “在您拥有的网站或博客上发表的文章(在文章或新闻中仅用于说明目的)。” 如果有人链接到您的图片并在他们的网站上使用它,则上述两种限制都很容易被打破。他们很可能没有这样做的许可,因为他们没有为许可证付费。这也与没有在他们的网站上正确链接到它密切相关,但也与原始创建者的正确归属密切相关。 3. 服务器资源耗尽 盗链可能会大量消耗目标服务器的资源。想象一下,如果您在共享的 WordPress 主机上,而赫芬顿邮报突然链接到您的图像。您网站上的每小时查询可能会从几百次增加到几十万次。这甚至可能导致您的主机帐户被暂停。这绝对是不仅要使用高性能主机(可以处理像这样的打嗝),还要启用热链接保护以免发生这种情况的原因。 4.盗链只是懒惰 人们盗链仅仅是因为他们懒惰吗?嗯,很多时候,人们不会故意热链接到您的图像,并且不知道这甚至是一个问题。他们通常只是忙于写作,只是复制粘贴 URL 和文件。他们甚至可能不知道如何正确链接到图像。然而,这仍然不是一个好的借口。如果您在网络上撰写内容,了解链接到其他人的图像以及正确归属的最佳做法非常重要。 防盗链会影响SEO吗? 阻止他人盗链不会影响SEO,但确实需要正确设置。有来自Google、Bing、Yahoo等的爬虫需要访问您的图像才能索引并正确显示它们。例如,当您在Google图片搜索中看到图片时,缩略图会从Google的图片缓存中提供。但是原始版本(如果您单击它)实际上是从您的服务器提供的。 Google图片搜索中的盗链 并且您希望在Google图片搜索中使用您的图片。正如WordStream所说,谷歌图片搜索流量是一种“轻松取胜”,实际上可以为您的业务带来转化和潜在客户,否则您可能无法获得。 如何防盗链 有几种简单的方法可以保护您的图片免遭盗链,让我们来看看我们拥有的选项。 CDN Apache NGINX WordPress插件 禁用右键复制 重命名文件 cPanel 使用带有热链接保护的CDN 你们中的大多数人通过自己的网站在全球范围内提供内容,并反过来使用CDN提供商来加快资产的交付。CDN提供商(例如KeyCDN和Cloudflare)已经免费内置了强大的热链接保护,您可以启用它们。这是推荐的方法,因为它们对实际上不应该被阻止的机器人和其他推荐人有非常微调的规则。在CDN上执行此操作的另一个好处是,您无需对 WordPress 安装进行任何更改。 如果您使用KeyCDN,只需单击Zonereferrers并添加规则。抓取工具仍然可以访问和索引您的图像。 KeyCDN盗链保护 他们甚至有一个一键式选项,允许每个区域为空引荐来源。 […]

WordPress W3 Total Cache,W3TC,缓存插件 文字详细教程

W3 Total Cache拥有超过100万的活跃安装,是WordPress插件库中最受欢迎的缓存和优化插件之一。与其他提供相对简单和精简界面的WordPress优化插件不同,W3 Total Cache可以完全控制WordPress站点的缓存配置。 W3TC设置的精细程度使其成为希望最终控制其WordPress网站的高级用户和开发人员的理想插件。在本文中,我们将深入了解W3 Total Cache的设置,并为您提供推荐的配置以提高WordPress网站的性能。 如何安装W3 Total Cache 如何清除W3 Total Cache缓存数据 W3 Total Cache常规设置 W3 Total Cache设置 – 页面缓存 W3 Total Cache设置 — 最小化 W3 Total Cache设置 — 对象缓存 W3 Total Cache设置 — 浏览器缓存 W3 Total Cache设置 – 用户代理组 W3 Total Cache设置 – 引用组 W3 Total Cache设置 — Cookie组 W3 Total Cache设置 […]

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

加快WordPress网站速度的最简单方法是消除所有不需要的资源。加速它的第二种最简单的方法是压缩所有需要的资源。在您的 Web 服务器上启用 GZIP 压缩是实现这一目标的最简单、最有效的方法之一。 默认情况下,所有现代浏览器都支持GZIP压缩。但是,要为您的用户提供无故障的压缩资源,您必须正确配置您的服务器。 在这篇文章中,您将了解网络数据压缩的基础知识、GZIP压缩是什么、它的各种好处,以及如何使用它来加速不同服务器设置上的WordPress网站。 Web上数据压缩的基础知识 什么是GZIP压缩? 如何检查GZIP压缩是否已启用 如何启用GZIP压缩 GZIP压缩的替代方案 Web上数据压缩的基础知识 网络上的数据压缩是减少网站传输的数据大小的过程。根据数据类型——文本、图像、样式表、脚本、字体——有多种压缩数据的方法。 网页的主要组成部分 例如,缩小HTML、CSS和JavaScript是一种减少浏览器发送数据量的简单方法。在这里,压缩器通过从源代码中删除不必要的字符(例如注释和空格)来压缩文本。 在下面的简单HTML文档示例中,共有三种内容类型:HTML标记、CSS样式和JavaScript代码。 每种内容类型都有独特的语法和语义。总的来说,这个HTML文档总共有357个字符。 <html> <head> <style> /* wbolt-banner is used on the homepage only */ .wbolt-banner { font-size: 150% } .wbolt-banner { width: 75% } </style> </head> <body> <!– wbolt banner START –> <div>…</div> <!– wbolt banner END –> <script> […]

WordPress WordPress优化,代码优化,网站性能,网站速度优化 文字详细教程

网站性能优化,技术卓越的网站设计的焦点是决定现代在线业务成功的主要因素。毕竟,当等待缓慢的网页加载的折磨使访问者无法寻求替代方案时,不起眼的网站性能会扼杀企业的底线 – 不耐烦是数字美德! 我们创建了以下六章深入的速度优化指南,向您展示拥有一个快速加载、活泼的网站是多么重要!无数研究论文和基准测试证明,优化网站速度是最实惠和最高投资回报率的投资之一! 在以下指南中,我们将尝试解释技术细节,同时为您提供易于遵循的说明,您可以立即开始实施!我们希望您会发现它很有价值,也许值得分享! 教学般的页面加载速度可提高访问者的参与度、保留率并促进销售。根据Aberdeen Group最近的一项研究,即时的网站响应会导致更高的转化率,页面加载每延迟1秒就会降低16%的客户满意度、11%的页面浏览量和7%的转化率 。 第 1 章 – 网站速度优化介绍 第 2 章 – 网站性能影响业务成功 第 3 章 – 速度优化的移动网站使桌面黯然失色 第 4 章 – 影响网站性能的常见商业错误 第 5 章 – 网站速度测试 – 识别性能瓶颈! 第 6 章 – 如何提高网站速度? 第 1 章:网站速度优化介绍 什么是页面速度? 页面速度的定义基本上是指在网页或媒体内容从网站托管服务器下载并显示到请求的Web浏览器的时间长度。页面加载时间是单击链接到在请求浏览器上显示网页中的整个内容之间的持续时间。 页面加载时间 在用户体验和网站性能的背景下,了解页面速度需要三个核心方面: 将请求的材料连同随附的HTML内容交付给浏览器所用时间的视图。 浏览器对页面加载请求的响应。 当请求的网页在浏览器上呈现时,最终用户的视图——这是页面加载速度的最终经验衡量标准。 网站性能随后会影响根据专有和未公开算法开发的搜索引擎中的排名, 其中包括页面速度、用户体验、网站响应能力和许多其他网站性能指标等关键因素。 最大化网站性能的绝对关键原则是从头开始关注页面速度优化。性能优化插件、服务器端脚本和最终调整对页面速度和加载时间的影响很小——但很明显。然而,Web开发人员和在线业务所有者在他们的网站开发和设计策略中往往会忽略页面加载时间。 减缓?有多慢? 任何比眨眼都慢的东西——400毫秒。谷歌的工程师发现,几乎察觉不到的页面加载时间0.4秒足以让用户减少搜索。该技术在改善互联网体验方面取得了长足的进步。1990年代人满为患的网络世界通常被称为“全球等待”,但通信和网络技术的创新已经彻底改变了数字信息在互联网上的传输方式。下一代在线企业拥有即时交付内容所需的所有资源,但为了利用和补充这些资源,企业需要提供最佳用户体验的速度优化网站。 微软速度专家和计算机科学家Harry […]

WordPress 图片压缩,无损压缩,有损压缩 文字详细教程

根据HTTP Archive,截至2018年12月,图像占桌面和移动设备平均网站页面权重的40%以上。那是巨大的!当谈到新的移动优先索引和性能时,图像优化对于WordPress网站的加载速度起着至关重要的作用。图像压缩是您可以实施的最简单的优化之一,反过来也会产生最大的影响。从本质上讲,这需要通过使用两种流行的压缩形式来减小图像的文件大小:有损和无损。WEBP支持两种压缩方式! 今天我们将深入研究有损和无损这两种类型的图像压缩,并讨论我们建议您使用哪一种。这可能因您经营的业务类型而异。 有损压缩 无损压缩 哪种压缩方法更好? 如何在 WordPress 中使用有损压缩 有损压缩 第一种压缩形式是有损的。有损压缩涉及消除图像中的一些数据。因此,这意味着您可能会看到性能下降(质量下降或某些人称之为像素化)。所以你必须小心你减少了多少图像。不仅是因为质量,还因为你无法逆转这个过程。当然,有损压缩的一大好处以及为什么它是最流行的压缩方法之一是您可以将文件大小减少很多。 JPEG和GIF都是有损图像格式。 JPEG非常适合需要快速加载时间的站点,因为您可以调整质量级别以获得质量和文件大小的良好平衡。 WordPress自动压缩图像 您知道WordPress在您将JPEG上传到媒体库时会自动压缩它们吗?默认情况下,WordPress会自动将图像压缩至原始大小的90%。但是,从WordPress 4.5开始,他们将这一比例提高到82%,以进一步全面提高性能。如果您想知道为什么您的图像在新安装的WordPress上看起来有点像素化,这就是原因。 虽然自动压缩很棒,但我们通常看到82%远不足以真正影响您网站的性能。因此,如果需要,您可以通过将以下过滤器添加到主题functions.php文件来禁用此选项。请记住,在编辑您的网站之前,请务必先进行备份。 add_filter( ‘jpeg_quality’, create_function( ”, ‘return 100;’ ) ); 如果你想提高WordPress的自动压缩率,你可以添加过滤器并降低原始文件的百分比,例如下例中的70%。 add_filter( ‘jpeg_quality’, create_function( ”, ‘return 70;’ ) ); 请记住,这些不会影响已上传的图像。您需要使用像Regenerate Thumbnails这样的插件才能将其应用到您现有的媒体库中。或者更好的是,我们只是建议您不要理会您的主题,只需使用图像优化 WordPress 插件(我们将在下面进一步介绍)或在上传图像之前进一步压缩图像。 使用Save for Web(软件)压缩图像 您可以使用Adob​​e Photoshop、Affinity Photo、Affinity Designer或其他图像编辑器等工具来调整图像的质量设置(如下所示)。在大多数工具中,它位于“保存到网络”或“导出设置”下。 更改照片质量 如果我们对有损压缩率进行一些比较,我们可以看到 50% 看起来不错。33% 的一些背景细节开始变得有点模糊(但会很不明显),而5%显然是不可接受的。这只是为什么WordPress中的自动82%还不够的一个例子。您可以而且应该以更高的速率压缩以进一步减小文件大小。 original.JPG 2.82 MB(2,000 像素 x […]

WordPress WordPress优化,WordPress性能,WordPress速度 文字详细教程

多年来,我们发布了许多WordPress速度优化教程,其中包含优化和加速WordPress的方法。但有时试图在一个地方找到您需要的一切可能会令人困惑。因此,今天我们将与您分享我们所知道的关于WordPress涡轮增压的所有知识,超过15年的经验和吸取的惨痛教训,所有这些都在一本终极指南中。无论您是刚开始使用WordPress还是经验丰富的开发人员,我们保证您会在本指南中找到有用的东西! 超过43.0%的网络现在由WordPress提供支持。虽然这很棒,但这也意味着有成千上万种不同的主题、插件和技术必须共存。对于日常的WordPress用户来说,当他们的网站开始出现瓶颈并且他们不知道为什么甚至不知道从哪里开始故障排除时,这很快就会变成一场噩梦。 在我们之前的页面速度指南中,我们讨论了许多性能的基础知识以及它如何对您的业务成功产生巨大影响。但今天我们将深入探讨您现在可以采取的适用步骤,以查看您自己的WordPress网站的改进。我们还将分享一些对我们来说非常宝贵的资源。 WordPress网站类型:静态或动态 选择高性能WordPress主机 选择离访问者最近的服务器 高级DNS优于免费DNS 您的WordPress主题很重要 WordPress插件的秘密 最佳WordPress设置 为什么缓存如此重要 图像优化是必须的 微调您的数据库 使用内容交付网络 (CDN) 需要时卸载媒体和电子邮件 如何找到瓶颈和缓慢的插件 后端优化建议 前端优化和外部服务的技巧 始终以移动为先进行优化 WordPress网站类型:静态或动态 在我们深入研究WordPress速度优化之前,首先要了解并非所有WordPress站点都相同,这一点很重要。这就是许多用户遇到问题的原因,因为您无法以相同的方式解决所有问题。我们总是给WordPress网站一个分类:静态或动态。因此,让我们首先探讨这两种类型的网站之间的差异。 主要是静态站点 静态通常包括博客、小型企业网站、低容量新闻网站、个人、摄影网站等网站。静态是指这些WordPress网站上的数据不经常更改 (可能每天更改几次)。甚至我们教学博网站的大部分内容也会被视为静态网站。 这变得非常重要,因为可以以教学般的速度直接从服务器上的缓存中处理许多请求!别担心;我们将在下面深入探讨缓存的主题。这意味着他们将有更少的数据库调用,并且不需要那么多资源来实现谷歌性能。 高度动态的站点 另一方面,我们拥有高度动态的网站。其中包括电子商务(WooCommerce或Easy Digital Downloads)、社区、会员、论坛(bbPress或BuddyPress)和学习管理系统 (LMS) 等网站。动态,我们的意思是这些WordPress站点上的数据经常变化 (服务器事务每隔几分钟甚至每秒发生一次)。这意味着并非所有对服务器的请求都可以直接从缓存中得到服务,并且需要额外的服务器资源和数据库查询。 这些站点通常也有大量的并发访问者和会话。在大部分是静态的信息或企业WordPress网站上,访问者可能会停留5或10分钟,直到找到他们需要的东西(这是一个很大的数字,通常跳出率要高得多)。在动态网站上,情况正好相反。访问者通常来到该网站是为了与某事或某人互动。如果他们正在学习在线课程,那么他们待上几个小时并不罕见。 你可以看到这是怎么回事。连接到您的WordPress主机的并发访问者增加得很快。更糟糕的是,除了“无法缓存的内容”问题之外,还有大量并发访问者。 选择高性能WordPress主机 WordPress主机是一家存储您网站所有数据的公司。您注册了一个计划,您的所有图像、内容、视频等都位于位于主机数据中心的服务器上。WordPress主机为您提供了一种访问数据、管理数据并将其路由给访问者的简单方法。很简单吧?嗯,不完全是。 您会在网络上遇到三种非常不同类型的 WordPress 主机。让我们深入探讨每种方法的优缺点。从一开始就选择正确的方法很重要,否则,您只会让自己头疼并浪费时间。 1. 共享WordPress主机 第一种也是最受欢迎的WordPress托管类型是我们所说的“共享托管”。其中包括业内最大的主机,例如Bluehost和HostGator等EIG公司,以及Siteground、GoDaddy、Media Temple、OVH、GreenGeeks和InMotion Hosting等提供商。他们通常使用cPanel,普通客户通常每月支付3至25美元。 任何使用此类托管的人都会在某个时候体验缓慢,这只是时间问题。为什么?因为共享主机往往会服务器人满为患,这反过来又会影响您站点的性能。站点暂停或频繁出现 500 错误是您经常遇到的事情,因为它们必须限制一切并整合资源才能生存。或者更糟糕的是,网站停机时间。即使您不知道,您的WordPress站点很可能与200多个其他人位于同一台服务器上。其他网站出现的任何问题都可能渗透到您的网站。 WordPress托管共享主机 无论您如何计算,扣除费用后,每月3美元都不会为托管公司带来任何收入。尤其是当您将支持归因于此时。只是一个小的共享主机订单,他们必然处于亏损状态。他们赚大钱的方式是追加销售和隐藏费用。这些追加销售包括迁移、域注册、SSL证书等。另一种常见的策略是提供巨大的注册折扣。但是,一旦续订到来,您就会得到真正的账单。 这些主机中的大多数都提供他们所谓的“无限资源”计划。你可能都看到了这一点。好吧,现实世界中没有无限资源这样的东西。主机在幕后所做的是限制客户端消耗大量资源。反过来,这最终会导致那些愤怒的客户离开,为更多不使用大量资源的客户腾出空间。最后,您将陷入一个恶性循环,即托管公司推出廉价计划并注册他们希望不会使用大量资源并会购买追加销售的客户。 由于站点数量与支持代表相比,共享主机的客户服务和支持几乎总是低于标准。共享主机必须将自己分散得很细才能盈利,这通常会给客户带来不愉快的体验。 2. VPS主机 第二种类型是VPS主机,或“在虚拟专用服务器上自己动手”。这群人通常由引导初创公司和具有更多开发、服务器管理和WordPress经验的用户组成。他们是DIY人群。这些人通常仍在努力省钱,但他们通常也关心绩效并意识到绩效对他们业务成功的重要性。Commons设置可能包括使用第三方VPS提供商,例如Digital Ocean、Linode或Vultr;以及像ServerPilot这样的工具来更轻松地管理它。 DigitalOcean的小型VPS起价为每月5美元,ServerPilot的流行计划起价为每月10美元。因此,根据您的设置,您可能会看到每月5到15美元或更多的费用。DIY方法可以降低成本,但这也意味着如果出现问题,您需要负责并优化服务器的性能。 […]

WordPress traceroute,服务器测试,网络延迟 文字详细教程

网络上的许多文章往往主要关注前端WordPress优化和加快网站速度的快速方法。服务器优化(例如网络延迟)有时会被忽视或忽视。因此,我们认为深入了解网络延迟的重要性及其在加载不同区域时对WordPress网站的影响会很有趣。 虽然CDN绝对可以帮助减少网络延迟,但您的主机服务器位置仍然非常重要,特别是如果您在非常特定的地理位置为访问者提供服务。延迟很重要,我们将向您展示几个原因。 什么是网络延迟? 网络延迟是指通过网络传输数据所涉及的时间和/或延迟。换句话说,一个数据包从一个点到另一个点需要多长时间。如今,这通常以毫秒为单位进行测量,但是,根据网络的不同,它也可能是秒。越接近零越好。 延迟是信号在地理距离以及通过各种通信设备时引入的等待时间。 – Whatis.com 换句话说,距离越远,延迟越大,这等同于更长的延迟。当涉及到通过光纤电缆传输的数据时,您无法超越光速。例如,下面是Google Cloud Platform网络的地图。他们有数千英里的电缆在海底覆盖整个地球。这就是为什么它是世界上最快的网络之一的原因之一。即使拥有这种广泛的最先进网络,仍然总是会有延迟延迟。 光纤电缆的延迟 有几个不同的因素会导致网络延迟,其中包括: 传输延迟: 不同类型的介质,例如无线或光纤连接,都会引入某种类型的延迟,因为它们只能推出这么多位。例如,光纤连接的传输延迟将低于 T1 线路。您还必须考虑数据包的大小。 传播延迟: 这是数据包传播所需的时间。这可能包括距离、网络延迟等。 排队延迟: 如果超出带宽,可能会出现排队延迟,数据必须在主机或路由器处等待。这可能会受到网络拥塞的影响。 为什么网络延迟很重要 有些人可能会争辩说,网络延迟并不是很重要,但是,这可能与您选择托管WordPress网站的位置有关。对于媒体和您的资产(例如图像、JavaScript、CSS、视频),CDN可以通过从更近的服务器提供副本来解决很多额外的延迟问题。但是,在大多数配置中,您仍然需要查询您的托管服务器以获取初始DOC加载。这就是延迟很重要的原因! Trainline将整个渠道的延迟减少了0.3秒,客户每年额外花费800万英镑(约合1150万美元)。– WPO 统计 对于为特定地理位置的访客提供服务的企业,延迟尤其重要。例如,假设您在悉尼有一家电子商务商店,您90%的客户来自澳大利亚。将您的网站放置在澳大利亚的服务器上,而不是将其托管在欧洲或美国,您的企业肯定会受益。我们将在下面讨论它对您的网站的影响有多大。 比较Google Cloud网络延迟 距离是延迟延迟的主要原因之一。然而,重要的是要记住,延迟不仅受距离的影响,还受它所产生的跳数、中间路由器等的影响。测量网络延迟的几种方法包括Ping、Traceroute和MTR。在这个例子中,我们将简单地使用ping时间并运行一些traceroute测试。如果您真的想深入研究数据,可以运行traceroute命令。 因此,我们在位于不同地理区域的Google Cloud Platform上启动了几台测试机器。许多其他托管服务提供商使用Google Cloud的标准层网络,这会导致速度变慢。 perf1主机(位于美国爱荷华州) perf2主机(位于澳大利亚悉尼) perf3主机(位于德国法兰克福) 然后我们使用KeyCDN的免费Ping测试工具 ,它允许我们同时从14个位置进行测试。请记住,ping时间越短越好, 因为这与数据通过Internet传输到其目标地址然后返回给您所需的延迟时间(以毫秒为单位)直接相关。我们还使用了他们的traceroute工具。 Perf1(爱荷华州,美国) 对于位于美国爱荷华州的测试服务器,位于美国的位置的ping时间要低得多(到达拉斯的平均ping时间为16毫秒)。当您开始深入欧洲或新加坡时,您开始体验更高的平均ping时间(到新加坡的平均ping时间为244毫秒)。 Ping时间 perf1(美国) 如果我们比较Traceroute,您可以看到一个示例,从美国爱荷华州到德国法兰克福需要7个额外的网络跃点(与从达拉斯的10个跃点相比)。这就是为什么重要的是要记住,网络跃点也会影响网络延迟。 Traceroute perf1(美国) Perf2(澳大利亚悉尼) 对于位于澳大利亚悉尼的测试服务器,澳大利亚和亚太地区的ping时间要低得多(到悉尼的平均ping时间为1毫秒)。当您开始深入欧洲或南美洲时,您开始体验更高的平均ping时间(到圣保罗的平均ping时间为319毫秒)。 Ping时间perf2(澳大利亚) 如果我们比较Traceroute,您可以看到一个示例  ,从澳大利亚悉尼到德国法兰克福需要14个额外的网络跃点。 Traceroute perf2(澳大利亚) Perf3(法兰克福,德国) 对于位于德国法兰克福的测试服务器,欧洲甚至美国的ping时间要低得多,这可能是由于两者之间的快速骨干连接(到阿姆斯特丹的平均ping时间为7毫秒)。当您开始深入到亚太地区或南美洲时,您开始体验更高的平均ping时间(到新加坡的平均ping时间为308毫秒)。 Ping时间 perf3(德国) 如果我们比较Traceroute,您可以看到一个示例  ,从德国法兰克福到巴西圣保罗需要11个额外的网络跃点。 Traceroute […]

WordPress HTTP请求,减少HTTP请求,网站优化 文字详细教程

您网站的HTTP请求越多,加载速度就越慢。因此,如果您可以减少HTTP请求的数量并优化它们的加载方式,您就可以提高网站的性能。 在这篇文章中,我们将带您了解有关如何减少WordPress上的HTTP请求的所有信息。 我们将从HTTP请求的基本介绍、它们的重要性以及如何分析WordPress站点的请求开始。 然后,我们将分享一些技巧和策略,您可以实施这些技巧和策略来减少站点的请求。除了帮助您处理GTmetrix中的“减少HTTP请求”消息外,这些策略还有助于处理Google PageSpeed Insights中的“避免链接关键请求”消息。 什么是HTTP请求? 为什么减少HTTP请求很重要? 如何查看和分析您网站的HTTP请求 如何在WordPress中优化和减少HTTP请求 减少HTTP请求的最佳WordPress插件 什么是HTTP请求? 当你建立一个网站时,它有很多不同的部分。您有在页面上使用的不同图像文件、控制内容外观的CSS样式表、添加所有酷功能的JavaScript文件,等等。 当有人访问您的网站时,他们的浏览器需要一种方法来从您的服务器下载该页面所需的所有资源。为此,它为每个单独的资源向服务器发出HTTP请求。 例如,它可能会说,“嘿服务器,我需要那个coolimage.png文件”和“嘿服务器,我还需要该联系表单插件的CSS样式表”。然后服务器用相关文件响应这些请求。 一旦网络浏览器获得这些文件,它就可以为您的访问者组装网页。当然,它比那要复杂一些,但这是基本思想。 HTTP是超文本传输​​协议的缩写,是这些计算机(访问者的浏览器和您的网络服务器)进行通信的方式。 需要理解的一件重要事情是每个单独的元素都是一个单独的HTTP请求。例如,如果网页上有五个图像文件,浏览器需要发出五个单独的HTTP请求,每个图像一个。 同样,如果您使用四个WordPress插件并且每个插件都添加了自己的CSS样式表,那么访问者的浏览器将需要发出四个单独的HTTP请求,每个插件的样式表一个。 为什么减少HTTP请求很重要? 一般来说,您网站的HTTP请求越多,加载速度就越慢。因此,如果您想让您的网站加载速度更快,您需要优化并减少您的网站所需的HTTP请求数量。 虽然这有点过于简单化,但基本思想是,Web浏览器只会在完成所有HTTP请求下载后才向您的访问者显示该网站(尽管有一些策略告诉浏览器可以等待某些文件)。 因此,如果一个网站在显示页面之前必须发出70个HTTP请求,这将比它必须发出40个HTTP请求需要更长的时间。 此外,某些HTTP请求会“阻塞”其他HTTP请求,这意味着浏览器在下载完之前的HTTP请求之前无法开始下载某些HTTP请求。 底线是:当您发出更少的HTTP请求时,您的网站加载速度会更快。 如何查看和分析您网站的HTTP请求 上面,您了解到在所有条件相同的情况下,减少HTTP请求的数量将加快您的网站速度。然而,所有HTTP请求并不总是“相等”的。一些HTTP请求比其他请求大。有些比其他的慢。 例如,请求一个巨大的3MB图像文件将比请求一个微小的20KB图像花费更长的时间。 如果您想对您的网站进行最大的改进,首先关注大的、加载缓慢的HTTP请求将获得最大的投资回报。 要分析您站点的HTTP请求,您可以使用称为Waterfall analysis的东西。 大多数速度测试工具都提供了这一点,但GTMetrix和Pingdom的接口非常方便。您还可以使用浏览器的开发人员工具。但是,我们将使用GTmetrix作为本次测试的示范。 插入URL后,您将在顶部看到一个基本摘要框。这会显示您的站点有多少HTTP请求,但它不会分解单个请求: 要分析您的个人请求,请转到下面的Waterfall选项卡。 在这里,您将看到站点上每个单独的HTTP请求的列表以及有关该HTTP请求下载所需时间的信息: 您可以看到并非所有HTTP请求都是相同的。例如,839.3 KB的图像需要1.12秒,而57.6 KB的图像仅需要87.5毫秒: 您还可以通过在服务器上搜索该插件文件夹的名称来查找来自您正在使用的不同WordPress插件的HTTP请求。例如,您可以看到WooCommerce添加了七个自己的HTTP请求: 通过这种方式,您可以查看您使用的任何插件是否添加了大量HTTP请求(尤其是加载缓慢的请求)。 如何在WordPress中优化和减少HTTP请求 概括地说,有两种广泛的策略可以减少HTTP请求: 删除HTTP请求。如果可能,您应该完全删除所有不必要的HTTP请求。例如,如果您有一个插件没有为您的网站增加任何价值,并且正在加载自己的CSS和JavaScript,只需完全删除该插件即可摆脱其所有HTTP请求。 合并HTTP请求。如果您有绝对必须加载的HTTP请求,您可以将它们合并到一个文件中。例如,代替六个小的CSS文件,您可以将它们组合成一个更大的CSS文件,它仍然会加载得更快,因为浏览器需要发出更少的请求(HTTP/2并不总是如此,我们将下面讨论)。 我们将从专注于删除HTTP请求的策略开始,然后我们将讨论如何组合剩余的HTTP请求。基本思想是去除你能去除的东西,然后组合剩下的东西。 1. 删除不必要的WordPress插件 首先,您需要使用瀑布分析从插件中提取所有请求。您可以通过搜索“插件”来实现这一点,这将提取来自wp-content/plugins文件夹的每个HTTP请求。 如果您将鼠标悬停在文件名上,您可以看到它来自哪个插件。例如,在这里您可以看到来自您可能正在使用的滑块插件的请求。 进一步挖掘会发现Slider Revolution添加了三个自己的HTTP请求,即使这个测试页面不包含任何滑块: 如何查看HTTP请求来自哪里 如果您将 Slider Revolution […]

WordPress Google字体,Web字体,本地字体 文字详细教程

在您的WordPress网站上托管和使用字体时,有很多不同的选择。您可以在本地托管它们,也可以使用Google字体(现在大多数主题都集成了Google字体),或使用其他3rd方服务,如Adob​​e Fonts。 今天,我们想深入探讨在WordPress中托管本地字体具有优势的几个原因。您不仅可以有更多的HTML字体选择,而且有时也有性能优势。查看我们下面的深入教程,了解如何在本地托管您的高级字体以及来自Google字体的任何字体系列。 什么是Web字体? 本地托管字体与第3方字体 如何在WordPress服务器托管Web字体 什么是Web字体? 当您浏览某人的WordPress网站时,您会看到两种基本字体,Web安全字体或Web字体。或者他们也可以混合使用两者。 建议阅读:如何在WordPress中更改字体。 Web安全字体是预装在设备或操作系统上的字体。Web安全字体的一些示例包括Arial、Times New Roman和Courier New以及通用字体系列,如serif、sans-serif(请参阅现代字体)和等宽字体。这些是您已经看到多年的字体。查看Web安全字体的完整列表。 Web 字体是未预装在设备上的字体,必须由用户的浏览器下载才能显示。Web 字体的一些示例包括 Google 的 Open Sans 和 Roboto 字体,以及来自 Adob​​e Fonts 的流行的 Proxima Nova 字体。 Google Fonts是一个开源字体目录,在过去几年中得到了广泛使用。根据BuiltWith的数据,在排名前10,000的网站中,超过45%的网站在其网站上使用Google字体。如果我们查看Google Fonts分析,我们可以看到它们的浏览量超过17千万次。这是很多!Open Sans和Roboto是他们使用最广泛的两个字体系列,Roboto 在过去一年中增长了77%。我们有一篇关于最佳Google字体的文章,请务必查看:  15 种最佳Google 字体(按数字排序)。 谷歌字体统计 本地托管字体与第3方 在我们深入学习本教程之前,重要的是要了解托管本地字体和简单地使用3rd方服务之间的一些优缺点。在本地托管字体意味着您实际上在自己的服务器上拥有字体文件(和/或复制到您的CDN,您也将其用于所有其他资产)。而如果您使用第三方(例如Google Fonts或Adob​​e Fonts),则只需通过链接到外部资产来包含字体。 本地字体的优势 1. 更广泛的字体选择 使用本地字体的一个巨大优势是您可以选择更广泛的字体!虽然Google Fonts和Adob​​e Fonts等3rd方服务拥有庞大的库,但它们无法与高级字体商店相比,您可以在其中购买所需的任何高级网络字体并将其托管在您的网站上。我们实际上将在下面的教程中使用高级字体,您无法从任何3rd方服务中获得。 2. 可以更好地整合 由于字体选择范围更广,在本地托管它们可能会让您选择一种与您的品牌更好地集成的字体,以保持整个网站的一致性。这一切都取决于您的设计需求和偏好。 3. 不必依赖第三方服务 当您在本地托管字体时,您不必依赖3rd方服务或其服务器。众所周知,诸如Adob​​e Fonts(以前称为Typekit)之类的服务会出现故障,这反过来又会让您看起来很糟糕。对WordPress网站的依赖越少越好。 […]

WordPress 测试脚本,第三方服务,网站分析,网站性能 文字详细教程

许多优化文章都关注如何加快WordPress网站的速度,例如优化图像或迁移到更快的主机。虽然这些都很重要,但今天我们想与您讨论第三方性能的影响以及它如何影响您的WordPress网站。基本上,您从站点外部调用的任何内容都会产生加载时间后果。使这个问题更加严重的是,其中一些只是间歇性地缓慢,使得问题的识别更加困难。今天我们将探索识别和分析第三方服务和性能问题的方法。 什么是第三方外部服务? 识别外部服务 分析持续的第三方性能问题 分析间歇性第三方性能问题 什么是第三方外部服务? 第三方外部服务可以被认为是从您自己的服务器外部与您的WordPress站点通信的任何东西。以下是我们经常遇到的一些常见示例: 社交媒体平台,如Twitter、Facebook和Instagram(小工具或转换像素) 第三方广告网络,如Google Adsense、Media.net、BuySellAds、Amazon Associates 网站分析,例如Google Analytics、Crazy Egg、Hotjar A/B测试工具,例如Optimizely、VWO、Unbounce WordPress评论系统,例如Disqus、Jetpack、Facebook评论 备份和安全工具,例如 VaultPress、Sucuri、CodeGuard SumoMe、HelloBar等社交分享工具 CDN网络,例如KeyCDN、Amazon CloudFront、CDN77和StackPath 外部托管的Javascript 外部服务如何导致问题 外部服务通常会带来两个问题。一个是由纯粹的体积带来的,另一个是等到它们加载。 如果您有很多外部服务,则需要加载所有这些服务,并在每次页面加载时等待来自它们的信息。您的呼叫越多,等待的时间越长,您自己的服务器上的负载就越高,您遇到第二个问题的机会就越大。 在某些情况下,页面加载将等到您的站点和外部服务之间的数据传输完成。如果在标头中调用服务并且服务中断,您的页面将简单地拒绝加载。 当然,可以做一些事情来加快速度,例如异步加载脚本,但我们稍后会介绍他。在大多数情况下,庞大的体积是调试3rd方性能问题时必须处理的最大问题之一。 识别外部服务 识别这些服务并不难。最简单的方法之一是打开网站速度测试工具,无论是Pingdom、GTmetrix、WebPageTest还是Chrome Devtools,并通过它运行您的网站。您应该会看到已加载的资源列表。将鼠标悬停在资源上,如果它在开头不包含您的域名,则它是您正在调用的外部服务或外部资产。 您可以在下面看到缩小版的jQuery是从外部源 (https://ajax.googleapis.com) 加载的。 外部服务——JavaScript 如果您不知道外部服务的用途,您可以随时尝试浏览主域或在Google中搜索其名称,因为应该会出现相关的开发人员或公司。这是确定服务是否合法的好方法。正如您在下面看到的,搜索jQuery文件会导致一些知名公司(如jQuery和Google)描述托管此文件。所以你可能是安全的。 jQuery外部脚本 分析持续的第三方性能问题 如果您的网站总是很慢,那么您需要弄清楚是什么让它变慢了。如果您的网站有间歇性问题,那就有点困难了。让我们从持续缓慢开始。我们在这里假设您的网站由于外部服务而运行缓慢。虽然许多速度问题可能是由外部服务引起的,但还有大量其他问题,因此这可能无法解决您的问题。 首先,您需要确定是否有任何服务需要很长时间才能加载,以及它如何影响您网站的性能。所以我们建立了一个测试站点,其中包含以下内容: 2个AdSense广告 脸书点赞框 Instagram小工具 Disqus评论 Facebook转化跟踪像素 谷歌分析 WordPress测试站点 这将使我们能够一项一项地删除每项服务,并向您展示它们对您的整体网站负载的影响程度。我们还将分享一些加载它们的替代方法的策略。然后,您可以将相同的策略应用于您自己的WordPress网站。我们通过Pingdom运行测试站点,您可以看到的第一件事是“按域的内容大小”和“按域的请求”。如果您看到请求,而不是来自您的域名,则这些请求很可能是外部服务或外部资产。这是一个很好的起点。正如您在下面看到的,static.xx.fbcdn.net有37个请求,这不好! Pingdom外部服务——(速度测试) 站点加载时间也是1.94秒,这真的很糟糕,因为正如您在上面看到的,测试站点上没有任何内容。这是一个较小规模的测试,可帮助您更好地分析第三方性能。WordPress网站越大,问题就越大。但从根本上说,大多数问题都可以通过类似的方式解决。 处理Google AdSense 我们首先要解决的是Google Adsense。通常,当您运行速度测试时,您可以将鼠标悬停在每个条上,以查看加载过程的每个部分花费了多长时间。您应该寻找超长的条(与其他条相比)以及仅在特定条完成后才开始加载条的地方——这些是您的瓶颈。一旦您发现某个特定元素的加载时间过长或阻止其他资源加载,您就需要弄清楚它为何存在以及它来自何处。 这可能有点困难,对服务的调用可以在您的主题中编码,也可以来自插件。但是,正如我们之前提到的,还有绝对数量的问题。如果我们查看下面来自pagead2.googlesyndication.com和tpc.googlesyndication.com的请求,我们可以看到这些条相当短,这意味着它们不会造成那么大的延迟。不过,其中一些确实有更长的接收时间(绿色条),这是Web浏览器从服务器接收数据所需的时间。最大的问题是一旦将所有请求加在一起。 我们喜欢将Google […]

WordPress Cloudflare,Cloudflare插件,Cloudflare设置 文字详细教程

Cloudflare是一家提供内容交付网络 (CDN)、DNS、  DDoS保护和安全服务的公司。他们在网络性能行业因快速的DNS查找时间而闻名,并拥有由全球100多个不同数据中心组成的强大网络。他们得到了谷歌、微软和高通等业内知名人士的支持。他们的一些客户包括纳斯达克、Digital Ocean、Zendesk和思科。 如果您正在寻找一种简单的方法来加快和增强WordPress网站的安全性,Cloudflare是一个很好的解决方案。大多数客户甚至可以使用他们的免费计划,该计划提供无限的CDN带宽。请按照以下步骤在您的WordPress网站上安装Cloudflare。 注意:如果您使用Cloudflare,则无法使用来自Amazon Route 53的高级DNS。Cloudflare作为完整的代理服务运行,这意味着您必须选择其中一个。如果您想使用我们的高级DNS,您可以使用替代CDN来加速您的网站,例如KeyCDN,它不是一个完整的代理。 安装Cloudflare 常见的Cloudflare问题 如何清除Cloudflare缓存 安装Cloudflare 本教程假设您已经有一个Cloudflare帐户。如果您不这样做,您可以访问Cloudflare网站并注册一个免费帐户。 第 1 步 登录Cloudflare仪表盘,然后单击“+ 添加站点”。输入您的WordPress站点的域名,然后单击“Begin Scan”。(不需要加www或者HTTP/HTTPS,根域就可以了) 将WordPress站点添加到Cloudflare 可能需要一两分钟,然后单击“Continue Setup”。 第 2 步 Cloudflare为您提供了两种选择。您可以使用他们的CDN和protection(加速和保护您的网站),或者您可以简单地使用他们的DNS。大多数客户会想要前者,因为这是您将从Cloudflare提供的一切中受益的地方。为确保您的域已启用,请确保云以橙色点亮。如果您有其他记录,例如电子邮件(MX记录),这些记录应该关闭Cloudflare(灰色)。验证完所有内容后单击继续。您以后可以随时修改这些记录。 验证DNS记录 第 3 步 在下一页上,您需要选择 Cloudflare 计划。我们建议从适用于大多数用户的免费计划开始。然后点击“继续”。您可以阅读有关Cloudflare 计划差异的更多信息。 免费Cloudflare计划 第 4 步 然后,您需要将域上的名称服务器更改为指向Cloudflare(使用它们提供的名称)。因为Cloudflare是一个完整的代理服务,所以基本上它的工作原理是将您的域指向Cloudflare,然后Cloudflare将您的域指向服务器地址。切换名称服务器时没有停机时间。这里有几个指向不同域名注册商的文档链接,说明如何更改它们。 如何使用Namecheap更改名称服务器 如何使用GoDaddy更改域名服务器 如何使用Google Domains更改域名服务器 如何使用Bluehost更改名称服务器 然后点击“Continue”。 更改为Cloudflare的名称服务器 这应该不会花费很长时间,但最多需要24小时才能处理此更改。 第 5 步 如果您的站点尚未指向服务器,则需要更新A记录以指向Cloudflare仪表盘中的服务器IP。单击“DNS”并在A名称记录旁边,将其更改为您的服务器的IPv4地址。 更新Cloudflare A名称记录 就是这样!您的WordPress网站现在已安装Cloudflare。 第 […]

WordPress Cloudflare教程,Cloudflare设置,https,SSL证书 文字详细教程

通过在您的站点前充当反向代理,Cloudflare是一种一体化的安全和性能产品,被全球超过12%的网站使用。作为WordPress 用户,将Cloudflare添加到您的网站有助于提高网站性能并减少恶意机器人和黑客的影响。 正确配置后,对您站点的所有请求将首先到达Cloudflare服务器,然后该服务器将确定是否应将请求转发到源服务器、从缓存中提供服务、阻止或使用自定义规则进行处理。 在本指南中,我们将深入探讨WordPress的最佳Cloudflare设置,讨论缓存和安全设置,并向您展示如何为WordPress多站点安装配置Cloudflare 。 如何为WordPress配置Cloudflare Cloudflare WordPress插件 WordPress的Cloudflare自动平台优化 Cloudflare Argo和Railgun 如何为WordPress多站点配置Cloudflare 如何为WordPress配置Cloudflare Cloudflare提供了多种安全和性能优势,但并非所有这些优势都与WordPress完全兼容。让我们深入了解Cloudflare的设置,以确定适合您的WordPress网站的最佳功能。 SSL 速度 缓存 防火墙 SSL Cloudflare支持四种SSL/TLS加密模式——Off, Flexible, Full和Full (Strict)。 Off –不加密。 Flexible –仅加密浏览器和Cloudflare之间的连接。 Full –端到端加密,但允许在源服务器上使用自签名证书。 Ful (Strict) –端到端加密,需要来自Cloudflare的免费原始证书或来自受信任CA(证书颁发机构)的证书。我们建议使用Full (Strict)  SSL模式以获得最大的安全性。 对于希望在其WordPress网站上使用Cloudflare的用户,我们建议在宝塔面板中生成免费的Let’s Encrypt SSL证书,并在Cloudflare中使用Full或Full (Strict) 选项。 或者,您还可以生成Cloudflare原始证书以安装在您的原始服务器上。如果您的主机不提供免费的SSL证书,则在您的服务器上安装Cloudflare原始证书将允许您使用Full (Strict) SSL模式。 如果您使用在子域上托管站点,而根域使用Cloudflare的Flexible SSL,则可以使用Cloudflare页面规则强制子域使用Full或Full (Strict)  SSL。 为具有Cloudflare页面规则的子域启用Full (Strict)  SSL 此选项允许您使用Cloudflare的Flexible SSL,同时确保子域的Cloudflare Full (Strict) SSL。 始终使用HTTPS […]

WordPress Amazon S3,CDN,WP Offload S3 文字详细教程

在本教程中,我们将向您介绍如何完成WordPress Amazon S3集成以及可选地使用内容交付网络 (CDN)。这可以大大节省您的带宽成本,充当备份,并帮助加快您的站点。 Amazon S3是一种存储解决方案,是Amazon Web Services众多产品的一部分。通常,这用于需要使用我们的外部备份插件等解决方案进行额外备份的站点,或者正在提供大文件(下载、软件、视频、游戏、音频文件、PDF等)的站点。 亚马逊拥有非常可靠的可靠记录,并且由于其庞大的基础设施,它们能够提供非常低的存储成本。S3的一些客户包括Netflix、Airbnb、SmugMug、Nasdaq等。 由于Amazon S3完全处理大容量存储,您几乎可以保证定价会比您的WordPress主机便宜。将媒体迁移到AWS是一种省钱的好方法,并且在您的第一年免费(最多5GB存储空间)。此外,由于您的媒体请求是直接从亚马逊提供的,因此您的WordPress网站的负载更少,这意味着加载时间更快。 不要将Amazon S3与Amazon CloudFront混淆。CloudFront是一种CDN解决方案,而S3是一种存储解决方案。但是,它们都可以互换使用,因为我们将在下面进行更多介绍。 WordPress网站Amazon S3设置 WordPress Amazon S3和CDN WordPress网站Amazon S3设置 对于这种集成,我们建议使用WP Offload S3 Lite插件,由Delicious Brains的优秀团队开发。基本版是免费的。当文件上传到媒体库时,插件会自动将文件从您的WordPress站点复制到Amazon S3。然后有一个用于添加CDN的可选配置,例如Amazon CloudFront、KeyCDN或MaxCDN。 WP Offload S3 Lite 这个插件非常轻量级,确切地说只有 204 KB。在撰写本文时,它目前拥有超过 30,000 次活跃安装,并获得 4 星评分(满分为 5 星)。请按照以下步骤操作。 第 1 步 接下来,安装免费的WP Offload S3 Lite插件。您可以从WordPress插件库下载它,也可以在WordPress仪表盘中的“安装插件”下搜索“wp offload s3”。单击“立即安装”并启用它。 安装WP Offload S3 Lite 第 […]

WordPress WordPress代码优化,WordPress清理 文字详细教程

很长一段时间以来,我一直在使用几个插件来清理WordPress Headers中的一些字段。在大多数情况下,我会说您通常不需要很多信息。 为什么WordPress将这些功能和链接添加到您的网站? 嗯,原因很明显。WordPress是一个非常大的CMS平台,被超过27%的在线博客网站使用。每个出版商都有自己的要求。有些喜欢wp-admin浏览器页面发布文章,有些使用第三方工具,有些使用 iOS或Android应用。 如果您使用网络版本在您的WordPress网站上发布文章,那么您应该从您的WordPress网站中删除所有不必要的链接。 有什么优势? 页面加载速度肯定更快 内容代码比增加 您的重要网站内容现在略高于搜索引擎的读取方式 让我们看一下WordPress Headers中的一些链接。以下步骤将帮助您清理和优化WordPress网站的header部分。 1. 禁用XML-RPC RSD链接 WordPress添加EditURI到您的网站Header,如果您通过第三方工具发布文章,这是必需的。 <link type=”application/rsd+xml” title=”RSD” href=”https://crunchify.com/xmlrpc.php?rsd”> 怎么禁用?将下方代码添加到您的主题functions.php文件中: remove_action (‘wp_head’, ‘rsd_link’); 2.删除WordPress版本号 版本号可能会暴露您的WordPress版本信息,让某些有预谋的人有机可乘。 <meta name=”generator” content=”WordPress 4.9.2″> 下面的代码将从站点中删除WordPress版本号。 function crunchify_remove_version() { return ”; } add_filter(‘the_generator’, ‘crunchify_remove_version’); 3. 删除wlwmanifest链接 如果您不使用Windows Live Writer写作,完全可以移除WordPress网站Header的以下内容。 <link type=”application/wlwmanifest+xml” href=”https://www.wbolt.com/wp-includes/wlwmanifest.xml”> 在你的主题function添加以下代码: remove_action( ‘wp_head’, ‘wlwmanifest_link’); 4.删除短链接 如果您使用其他的固定链接形式,WordPress默认的短连接是完全没有意义的,可以考虑移除。 <link href=”https://www.wbolt.com/?p=8112″> […]

WordPress 垃圾评论,留言评论,评论表单字段,评论链接 文字详细教程

评论垃圾邮件是接受博客评论的WordPress博主面临的最大挑战之一。许多用户发表评论只是为了留下他们的网站链接URL。这是从权威网站获取反向链接的简单方法。如果您只想接受感兴趣用户的评论,那么您可以在WordPress评论表单中删除网站URL或评论作者链接。 管理WordPress评论中的垃圾邮件 在我们之前的文章中,我们已经解释了如何有效地拦截WordPress中的垃圾评论。基本上,您可以使用以下选项: 使用Akismet等插件自动过滤垃圾评论。 阻止IP地址列表中的评论。 通过阻止敏感词来防止激进的评论。 限制注册用户的评论。 保留所有评论以供审核和手动批准。 适度发表评论,其中包含一定数量的超链接。 尽管所有这些方法都会减少垃圾邮件,但由于一个原因,您无法完全摆脱垃圾邮件。那是WordPress评论表单中可用的网站URL文本框。 WordPress评论表单行为 默认情况下,WordPress评论表单具有以下字段: 默认WordPress评论表单 评论留言框 姓名 电子邮件 网站 在浏览器中保存名称/电子邮件/网站以供进一步评论 提交按钮 您可以在“设置 > 讨论”部分下的浏览器选项中启用或禁用保存名称/电子邮件/网站。 禁用保存名称和电子邮件选项 除此选项外,WordPress管理面板中没有可用的设置来更改评论表单字段。 评论表单中的网站URL 几乎75%的用户留下评论只是为了提供他们的网站URL并获得反向链接。默认情况下,WordPress将rel=”external nofollow ugc” 参数分配给注释链接,将它们指示为用户生成的内容。但是,这些链接仍然会损害您的网站,尤其是当它们与您的网站无关时,例如色情链接。用户在您的网站上发表评论后,WordPress将通过链接名称和URL字段来显示已批准的评论。 与评论作者姓名链接的网站 在WordPress评论中删除网站URL的6种方法 如果您收到数十万条垃圾评论,最好的选择是禁用评论表单中的网站URL字段。如果表单中没有URL选项,则以获取反向链接为目标的垃圾邮件发送者将停止。此外,您可以节省处理评论提交所需的服务器带宽。您可以使用多种方式删除WordPress中的评论作者链接。 1. 使用CSS禁用WordPress评论表单中的网站URL 当你查看评论表单的源代码时,你可以很容易地发现WordPress使用comment-form-url类在表单中显示网站URL。您需要做的只是简单地转到“外观 > 附加CSS”部分,粘贴以下CSS代码并发布您的网站。 .comment-form-url{ display:none; } 这将从WordPress评论表单中删除评论作者链接框。下面是它在2021主题浏览器的开发者控制台上的外观。 使用CSS在评论中禁用网站URL 2. 使用功能禁用网站URL和评论作者链接 上述选项很容易做到,尽管它可能不适用于所有 WordPress 主题。由于主题可以使用自定义CSS来修改默认的WordPress评论表单,因此在使用上述方法之前,您必须检查主题的CSS。此外,您所有的旧评论仍将具有与作者姓名链接的网站URL。因此,从评论中删除作者链接的下一个选项是在主题的functions.php文件中使用一个函数。 您可以转到“外观 > 主题编辑器”部分并为您的活动主题找到“functions.php”文件。将以下代码粘贴到文件末尾,然后单击“更新文件”按钮。 /* Remove Comment Author Link […]

100% Secure Checkout

PayPal / MasterCard / Visa