任何问题请联系WX:uu16853

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

购买更多有优惠!

WordPress 文章修改日期,文章更新日期 文字详细教程

在线发布内容时,您必须向用户展示博客文章、页面或媒体是新鲜的、准确的和最新的。 揭示 内容及时性的一种方法是在WordPress博客文章或页面的某处显示“最近更新”日期 ,例如特色图片、标题或整篇文章的上方或下方。 这样,用户可以看到最近更新的日期以及“发布”日期,或者您可以完全替换发布日期。 简而言之,显示的日期最终会更新,向读者(和搜索引擎)表明您的内容是新鲜的,并且您没有让太多时间过去(这可能导致链接断开、信息不准确或过时的图像)。 在哪里查看发布日期和最近更新日期 在您的网站上显示“最近更新”日期的好处 如何在WordPress中显示最近更新日期 如何判断WordPress文章或页面上次更新的时间 在哪里查看发布日期和最近更新日期 根据您的主题样式,发布日期可能出现在文章、页面或两者上;展示位置最常见于标题之后、内容之前,并且通常以署名作为补充。 旧文章上发布日期的示例 话虽如此,发布日期的样式和位置完全取决于您的主题。您可能会在特色图片上方看到它并带有图标,如下面的主题所示。 二〇二〇主题提供独特的发布日期格式 一些主题甚至将发布日期和最近更新日期放在内容的末尾,就在评论框之前。 此主题的日期显示在内容下方 您还可以通过转到文章列表中的日期列在后端找到发布日期。 日期列显示WordPress仪表盘中的发布日期 WordPress还会在文章编辑器中显示发布日期。 发布日期是在WordPress中编辑文章时显示的唯一日期 在本文中,我们解释了显示“上次更新”日期而不是发布日期的好处。我们还将向您介绍显示上次更新日期的各种方法,同时还演示如何判断网站上次更新的时间。 继续阅读以了解所有相关信息! 在您的网站上显示“最近更新”日期的好处 定期更新您的内容并显示最近更新日期,可为网站所有者、搜索引擎用户以及您网站上的用户带来各种好处。考虑到搜索引擎在确定排名时会考虑新颖性和相关性,这对SEO也很有帮助。 以下是在您的页面和文章上显示“上次更新”日期的主要好处。 最近日期比发布日期更准确,它表明与不久前发布的内容相比,您的内容可能更加新鲜。 用户看到这是一篇更新的文章,而不是认为它是一篇旧文章,这可能会增加您的点击率和用户阅读的总时间。 您的“最近更新”日期使您更有可能脱颖而出,因为搜索引擎会在结果中显示这些日期,并且您的结果会被其他网站的列表正确放置。 它为搜索引擎提供了另一种将文章识别为新鲜的方式。 搜索引擎当然会抓取内容;但这并不总是发生,“最近更新”日期会加强您网站上所做的任何更改。 最近的日期提供了一种信任感,您已经消除了链接损坏、图像损坏以及任何不再真实的内容等内容问题。 当内容(和日期)更新时,搜索引擎往往会更频繁地索引您的网站。这不是硬性规定,但众所周知,搜索引擎会记录内容不断更新的网站,并更频繁地抓取它们。 您增加了获得更高整体搜索排名的潜力,因为您的整个网站都从您更新的文章中受益。 它为您提供了更新内容的视觉借口/提醒,因为您可能会注意到较旧的日期并意识到刷新是有序的。 搜索引擎更喜欢您更新旧内容,而不是每次您获得有关同一主题的新信息时都创建新文章。这消除了重复内容的可能性,并与为什么显示最近的日期最适合改进SEO相关联。 一些出版物(如在线报纸)需要有“最近更新”日期,以便更正和新信息的内容显示在站点提要的顶部。这样用户就不会错过这些更新。 如何在WordPress中显示最近更新日期 默认情况下,WordPress 不显示新内容或刷新内容的最后更新日期,而是显示发布日期。即使在几年后对文章进行了多次更新,该发布日期仍然存在。 一些现代主题提供内置功能,只需单击几下鼠标即可显示上次更新日期。首先检查WordPress Customizer以获取主题中的任何日期自定义设置是一个很好的做法。但不能保证任何东西都可用。 如果您无法在 WordPress 定制器中添加最后更新日期,请使用以下方法添加它: 通过编辑functions.php文件和CSS 通过修改和添加代码到您的主题模板 使用插件 前两种方法要求您访问站点的主题文件,因此如果您还没有经验,请阅读WordPress文件层次结构(以及如何理解它们)。 查看以下三种方法,以了解适合您情况的最佳行动方案。 方法 1:在您的主题中编辑functions.php和CSS 在 WordPress 中添加“上次更新”日期的第一种方法是访问主题的functions.php文件并将代码添加到文件中。作为替代方案,您可以将该代码添加到子主题或特定于站点的插件中,以避免在切换或更新主题时代码消失的任何问题。 所有这些选项都使用相同类型的CSS代码,因此我们将为您提供一些要添加的代码,并向您展示如何将其放置在functions.php文件中。如果使用子主题或特定于站点的插件,只需使用相同的代码并修改这些文件。 首先,转到主题的functions.php文件。访问functions.php的最简单方法是使用FTP客户端连接SFTP。您通常可以通过FTP客户端转到 /www (或者您的网站域名) > /public […]

WordPress React,钩子函数 文字详细教程

React.js近年来广受欢迎,这已经不是什么秘密了。它现在是许多互联网上最杰出的参与者(包括Facebook和WhatsApp)的首选JavaScript库。 它兴起的主要原因之一是在16.8版本中引入了钩子。React钩子允许您在不编写类组件的情况下利用React函数。现在,带有钩子的功能组件已成为开发人员使用React的首选结构。 在这篇博文中,我们将深入研究一个特定的钩子useCallback——因为它涉及函数式编程的一个基本部分,即记忆化。您将确切地知道如何以及何时使用useCallback钩子并充分利用其性能增强功能。 什么是Memoization? 渲染和反应 React useCallback的性能优势 React useCallback的缺点 React使用回调示例 什么是Memoization? Memoization是当一个复杂的函数存储它的输出以便下次使用相同的输入调用它时。它类似于缓存,但在本地级别上。它可以跳过任何复杂的计算并更快地返回输出,因为它已经计算过了。 这会对内存分配和性能产生重大影响,而这种压力正是useCallback钩子的目的所在。 React的useCallback与useMemo 在这一点上,值得一提的是,useCallback与另一个名为useMemo的钩子很好地配对。我们将讨论它们,但在这篇文章中,我们将把重点放在useCallback主要话题上。 关键区别在于useMemo返回一个记忆值,而useCallback返回一个记忆函数。这意味着useMemo用于存储计算值,同时useCallback返回一个您可以稍后调用的函数。 这些钩子会给你一个缓存的版本,除非它们的依赖项之一(例如状态或道具)发生变化。 让我们看一下这两个函数的作用: import { useMemo, useCallback } from ‘react’ const values = [3, 9, 6, 4, 2, 1] // This will always return the same value, a sorted array. Once the values array changes then this will recompute. const […]

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

速度对于任何网站都很重要。在网络追求快速加载时间的过程中,我们有许多不同的技术可以帮助我们。一种方法是在不影响其功能的情况下最小化您的站点将使用的底层代码。GZIP压缩是执行此操作的一种方法,但Brotli压缩是另一种引起注意的新兴方法。 这是一个由Google开发的解决方案,看起来比GZIP压缩(以及替代)提供了许多好处。本文中的详细信息将准确介绍该技术所提供的功能,但Brotli压缩快速且高效——它满足了您研究它所需的所有条件。 在本教程中,我们将研究Brotli压缩并向您展示如何检查您的站点是否使用它,以及如何在需要时启用它。首先,我们将把Brotli放在压缩算法空间中,并讨论为什么要使用它而不是其他解决方案。 网络数据压缩 Brotli压缩 Brotli压缩与GZIP压缩 如何检查您的网站是否使用Brotli压缩 如何为您的站点启用Brotli压缩 网络数据压缩 在最基本的形式中,数据压缩采用网站或应用程序的代码,并最小化文件大小。这使您可以在网络上移动更轻的文件,并减少加载和呈现网站所需的时间。您会发现有很多方法可以根据您使用的文件类型来压缩数据。 一种常见的方法是“缩小”。这是一种算法去除您网站代码中一些多余元素的地方。这个想法是缩进、注释、空格等方面会增加文件大小,从而增加加载时间。 在大多数情况下,删除这些元素不会影响用户体验 (UX)。但是,对于必须编译和渲染代码的计算机来说,它确实使事情变得更加简单。例如,以这组代码为例: define( ‘WP_INSTALLING’, true ); /** Sets up the WordPress Environment. */ require __DIR__ . ‘/wp-load.php’; require __DIR__ . ‘/wp-blog-header.php’; if ( ! is_multisite() ) { wp_redirect( wp_registration_url() ); die(); } $valid_error_codes = array( ‘already_active’, ‘blog_taken’ ); 上面的代码使用空格和回车等元素使其易于阅读,但计算机不需要这些元素来理解核心代码。更重要的是,这些批次的空格和换行符将占用宝贵的空间,删除这些空间可以提高性能。 如果你最小化这段代码,它看起来完全不同: define( ‘WP_INSTALLING’, true ); […]

WordPress 403错误,XAMPP错误 文字详细教程

如果您使用XAMPP本地开发环境来运行WordPress网站,您可能会不时遇到问题。尝试访问数据库时可能遇到的最常见问题之一是“错误403”,也称为“XAMPP访问禁止错误”。 简而言之,XAMPP产生403错误意味着您没有必要的权限来访问或编辑数据库。在本文中,我们将讨论XAMPP是什么,为什么会出现此错误,以及如何在Windows和macOS设备上修复它。 XAMPP简介 XAMPP环境403错误概述 如何解决XAMPP产生的403错误(在Windows和macOS中) XAMPP简介 XAMPP是一个本地开发环境。通过安装XAMPP,您还可以设置托管和运行本地WordPress网站所需的所有软件。 XAMPP主页 您可能知道,WordPress有几个系统要求,而XAMPP满足所有这些要求。您可以使用XAMPP在您的计算机上安装的软件堆栈包括: Apache:这是一种服务器软件,可让您在计算机上托管和服务网站。 MariaDB: 这是一个数据库软件,它为WordPress提供了一个保存信息的地方,因此可以根据需要再次访问它。 PHP:  WordPress建立在PHP编程语言之上,因此必须在您的服务器上设置软件。 Perl:虽然WordPress不使用Perl编程语言,但它是XAMPP为您配置的软件堆栈的一部分。 您可能在浏览网页时遇到过403错误。错误代码表示您没有访问特定文件或页面的必要权限: 来自Google Chrome的常规错误403消息 但是,在使用XAMPP运行本地WordPress网站的上下文中,403错误具有不同的含义。如果您看到一条消息“Access forbidden!“,它通常与XAMPP数据库有关。 XAMPP环境403错误概述 通常,当您尝试通过浏览器访问本地数据库时,XAMPP会出现错误403。在正常情况下,您可以使用任何Web浏览器访问http://localhost/phpmyadmin地址: phpMyAdmin控制面板 如果您没有访问数据库的必要权限,您将遇到错误403,内容如下: “新的XAMPP安全概念:只能从本地网络访问请求的目录。可以在文件httpd-xampp.conf中配置此设置。” 就错误消息而言,这条信息相当丰富,因为它准确地告诉您解决问题需要做什么。但是,在我们开始故障排除之前,请务必注意,当XAMPP中存在冲突的端口配置时,通常会发生错误403。 通常,绕过该问题的最简单方法是按照错误消息中的说明进行操作。在这种情况下,就是修改httpd-xampp.conf文件。 如何解决XAMPP环境403错误 (在Windows和macOS中) XAMPP适用于Windows、macOS和Linux。在下面的部分中,我们将向您展示如何解决Windows和macOS中的XAMPP开发环境的错误 403。如果您使用的是Linux发行版,则可以按照macOS说明进行操作。 如何对Windows中的XAMPP环境403错误进行故障排除 要开始使用,请继续启动XAMPP,然后启动您网站使用的所有服务。如果您正在运行WordPress网站,那将是Apache和MySQL。 XAMPP控制面板 两个服务都运行后,您可以单击Apache行中的Config按钮,然后选择Apache (httpd-xampp.conf)选项: 打开httpd-xampp.conf文件 现在httpd-xampp.conf文件将通过您的默认文本编辑器打开。打开文件后,使用搜索功能查找“phpMyAdmin” 。 您应该会看到如下所示的片段: httpd-xampp.conf文件 找到它后,您可以继续删除“Require local”的文本,并将其替换为“Require all granted”:   修改httpd-xampp.conf使其不会阻止对数据库的访问 保存对httpd-xampp.conf的更改并关闭文件。然后您可以从XAMPP控制面板重新启动Apache和MySQL服务。一旦服务再次运行,您可以通过在浏览器中导航到localhost/phpmyadmin来尝试再次访问您的数据库。 如何对macOS中的XAMPP环境403错误进行故障排除 在macOS上修复XAMPP环境的403错误涉及与Windows设备几乎相同的步骤。但是,访问httpd-xampp.conf文件并不完全相同,因为XAMPP控制面板看起来有点不同: XAMPP的macOS控制面板 尽管风格不同,但访问您需要的文件仍然很简单。以下是要遵循的五个步骤: 转到XAMPP控制面板中的Volumes选项卡。 选择屏幕顶部的安装选项。  一旦变为可选状态,请单击Mount旁边的Explore按钮。 在弹出的资源管理器窗口中,导航到etc/extra 。 打开http-xampp.conf文件。 […]

WordPress MySQL密码更改,root密码修改,XAMPP 文字详细教程

保持在线安全从未如此重要,尤其是对于企业而言。密码选择和维护在安全方面都起着至关重要的作用。不幸的是,它们经常被忽视,尤其是在XAMPP等本地安装中。 但是,本地软件同样容易受到恶意活动的攻击,默认情况下,XAMPP通常没有MySQL数据库的root密码。添加一个并定期更改它可以帮助保护您的数据安全并防止浪费数小时的辛勤工作。 在本文中,我们将解释为什么您可能想要更改您的XAMPP数据库MySQL密码。然后,我们将引导您了解可以使用的三种不同方法。 为什么您可能想要更改MySQL密码 如何在XAMPP中更改MySQL密码 为什么您可能想要更改MySQL密码 您可能想要(或需要)更改MySQL密码的原因有很多。首先也是最重要的:当您在计算机上安装XAMPP时,“root”用户的密码为空。这意味着默认情况下此帐户没有安全性。 root用户本质上是管理员帐户——它可以不受限制地访问系统中的所有命令和文件。因此,对这个用户没有密码保护是一个主要的安全漏洞。任何人都可以登录该用户帐户并在您的本地安装上编辑文件。 除此之外,定期更改密码也是一种明智的安全做法。这样做有助于防止恶意活动,尤其是当您在多个地方使用相同的密码时。定期更改密码可以帮助抵消没有这种做法可能出现的问题。 最后,您可能只是忘记了密码,因此无法访问XAMPP本地环境WordPress安装所需的文件或功能。不管是什么原因,能够更改MySQL密码是一项可以派上用场的宝贵技能。 如何在XAMPP中更改MySQL密码 与大多数WordPress任务一样,有多种方法可以更改MySQL密码。您应该使用的方法将取决于您需要做什么以及您最熟悉的界面:命令行、图形用户界面 (GUI) 或文本文件。考虑到这一点,让我们看一下在XAMPP中更改MySQL密码的三种方法。 1. 使用XAMPP环境的Shell更改您的MySQL密码 使用XAMPP的shell命令通常是更改MySQL密码的最简单、最快捷的方法。它确实涉及使用命令行,起初这似乎令人生畏。 然而,它实际上相当简单。如果您忘记了现有的MySQL密码并需要重置它,这也是您想要使用的方法。 请注意,无论您使用的是Windows还是macOS,这些命令都是相同的。由于这是一个特定于XAMPP的独特shell,平台之间的任何典型差异都将不适用。 首先,启动您的XAMPP控制面板并单击右侧的Shell按钮。 使用XAMPP shell更改您的root密码 这将打开一个带有命令提示符的新窗口。输入以下命令并按Enter/Return键: mysqladmin -u root password shell将提示您输入新密码。再次按Enter/Return  ,系统会要求您确认新密码。 一旦你完成了这些,你就完成了并且可以关闭shell窗口。 2. 通过phpMyAdmin更改XAMPP环境的MySQL密码 第二种方法涉及使用phpMyAdmin GUI更改您的XAMPP MySQL密码。这种技术相对简单,但一般不如命令行方法快。 首先,您需要访问phpMyAdmin界面。拉起XAMPP控制面板并单击MySQL行中的Admin: 在XAMPP中打开phpMyAdmin PhpMyAdmin将在浏览器窗口中打开: phpMyAdmin界面 如果系统要求您登录,请使用用户名“root”并输入您的root密码。如果您还没有设置,可以将其留空。 接下来,导航到主菜单栏中的User accounts部分,并在列表中找到localhost的root用户: phpMyAdmin中的root用户 接下来,您可以单击root用户旁边的Edit privileges,然后选择页面顶部的Change password。 在phpMyAdmin中启动密码更改 在下一个屏幕上,只需输入您要使用的密码: 在phpMyAdmin中更改root密码 完成后,您可以单击右下角的“Go”按钮以保存更改。 3. 通过编辑config.inc.php文件更改XAMPP环境MySQL密码 如果您发现自己处于知道密码正确的情况,但无论出于何种原因它都不起作用,那么这就是适合您的方法。它涉及打开一个文本文件并直接在其中编辑密码。 首先,打开XAMPP控制面板并单击窗口右侧的Explorer按钮: XAMPP控制面板中的Explorer按钮 这将在XAMPP文件夹中启动文件浏览器。接下来,您可以打开phpMyAdmin文件夹并找到config.inc.php 文件: […]

WordPress GTmetrix,Pingdom,Plugin Performance Profiler,WordPress性能,性能测试,网站性能 文字详细教程

为什么测试WordPress博客网站性能? 网站速度等问题十分重要,很简单,这是经过多次验证的,网站越快,你的网站的访客体验就越好。 更快的网站即更好的用户体验 – 只有更少的滞后, 更快的网站更适合移动端阅读查看, 更快的网站在Google等搜索引擎中排名更高, 最后,更快的网站转换才会做得更好(人们通常不喜欢等待超过两秒钟来加载网页)。 那么,我们应该如何测试WordPress网站性能? 或者,换言之,你怎么知道你的网站是否很慢? 下面将是你所需要的答案: 推荐4个网站性能测试工具 1. 测试你的网站加载时间 首先,测试WordPress网站性能的最重要方法 – 测试网站的速度。 对于初学者,您只需在浏览器的地址栏中输入网站的网址,然后自我感知。但这种测试是局面的,这不代表你的网站所有访客都是获得同样的加载体验。 你需要更全面更客观更好的测试,这时候你需要借助知名网站加载速度测试工具Pingdom: 在开始测试之前,选择您要测量站点性能的服务器位置。 最好选择离目标受众最近的位置,比如说你的网站访客大部分在美国,那么你需要选择美国地区的测试服务器: 点击“START TEST”后几秒钟,Pingdom会让您了解网站各个方面的加载情况及评分。您甚至可以展开查看加载的每一项内容了解详情: 你会最终获得诸如性能评分,加载时长,加载速度在众多测试网站中的占位,页面体积,页面请求数量等等。 2.测试站点承受的并发流量值 如果你的网站流量不小,你必须做一下Load Impact工具测试: 只需在框中输入您网站的网址,然后点击“Run free test”即可。 Load Impact的作用是它实际创建了25个并发(bot)用户,并将它们发送到您的站点以查看站点在负载下的执行情况。 测试持续五分钟。 测试完成后,您会得到非常详情的摘要+图表: 乍一看,这似乎很复杂,但阅读该图表并不是很困难。 基本上,你只需要重点看: (!) 绿线代表逐步增加并发访问时你的网站加载时间走势,如果越平缓,代表你的网站可承受的并发访问能力比较好;如果线条呈上升状态,则说明你的网站性能需要改善。 3. 全面测试你的WordPress性能 与所有软件产品非常相似,您的WordPress网站由多个小元素,脚本等组成。但是,并非所有这些元素都始终100%优化… 这时候你需要使用到GTmetrix,提供了一种测试WordPress网站性能的方法。 同样,您只需输入网站的网址并点击“Analyze”按钮即可。 过了一会儿,您将获得非常详细的测试报告: 图像优化, 浏览器缓存, JavaScript优化, CSS优化, 重定向, HTTP请求优化,以及更多。 GTmetrix还使用两套不同的评分系统为您网站打分,如果分数低于90%,你可考虑进一步优化上面提到的各个项: 4.测试插件的优化程度 Finally, we have the […]

WordPress PunyPNG,Short Pixel,WPSSO,图片SEO,图片优化,图片压缩 文字详细教程

适当地在WordPress博客文章中贴入合适的图片,对网站有很大的好处。 这并非我本人信口开河,网上有多项研究证实了这一点。 带有图片的博客文章比无图的博客文章更能吸引访客流量及参与分享。 但这里也会同时产生另外一个站长头疼的问题……更多图像意味着这些图像消耗的Web服务器带宽更多,消耗更多带宽意味着网站速度变慢及服务器成本更高。 所以我们今天要做的就是在博客使用图片及图片尽可能占用更少的带宽之间找到一个平衡点! 以下教程将会详细介绍如何优化WordPress博客图片大小: 1. 使用WordPress图像自动优化插件 如果您的网站上有大量图片,那么逐个优化它们的可能性不大,工作量太大了。 对于博客来说尤其如此,大部分站长还是业务搞网站。 为此,您最好使用专业的WordPress图像优化插件。 这个插件名为Short Pixel。 ShortPixel插件直接安装到您的WordPress仪表板中。 在那里,您可以轻松管理图像压缩进程。 图像会自动优化并保存。 您可以配置ShortPixel插件来压缩过去上传的图像并优化您的网站历史记录。 注:Short Pixel免费用户可以每个月免费压缩100个图片,这对于一般的站长来说是足够用的。 2.优化您的网站设计图片/主题图片 如果你当前的网站设计本身在每个页面使用了大量需要加载的图片。 比如你的网站标志,背景,页脚和侧边栏图形等等。 这些图片一般不会特别的多,你可以使用专门的图像压缩工具优化。即使从每个图片压缩后也就是减少几千字节,但当你的网站访问量足够多时,日积月累下来数目也是非常吓人的。 我们建议你使用类似PunyPNG等工具来优化这些图像。 PunyPNG的神奇之处在于压缩图片体积但不降低图片质量。 PunyPNG完成图像压缩后,你只需将图像上传回您的网站覆盖原图像即可。 3.请勿使用分辨率过高的图像 例如,如果页面版块宽度是660px,那么没有理由上传大于此宽度的图像。 尽管WordPress已准备好处理任何大小的图像,但巨大的图像会占用大量带宽。 例如,一张2500px图片甚至可占用1 MB的磁盘空间。 相同的图像,但像素只有660px的图片则可能只有100 KB大小。 解决方案是始终调整您要在博客文章中使用的每个图像的大小。 这在WordPress中很容易做到。 以下是如何优化WordPress中的任何图像: 上传图片后,点击“编辑图像”链接: Then, set the new dimensions, and click “Scale”: 然后将其正常插入文章即可。当然更高效的做法是,你在本地就完成了所有准备好的图片的尺寸裁剪工作。 4. 必要的图像SEO优化 对于WordPress图像SEO优化,任何图像都有三个重要参数: 文件名, “alt”标签, “标题”标签。 您使用的每个文件都应具有描述性文件名。 这样,它可以协助Google爬虫阅读图像内容。 例如,如果我想使用这样的图片: […]

WordPress WordPress优化,WordPress修订版本,WordPress瘦身,WP-Optimize 文字详细教程

WordPress为了保证WordPress文章编辑者的输入能够及时保持,以防因网络或者手误导致文章数据丢失,使用了定时保存草稿的机制。这个机制当然是一个非常好的机制,但当历史文章很多的时候,也些历史数据就变得臃肿,使整个网站的文章数据显得异常臃肿。 如果你的WordPress博客文章并不多,完全可以忽略这样的影响,但如果你的WordPress博客的文章月更新量好几百甚至更多,我觉得有必要及时清理文章的历史版本数据。下面就由小编来说说,如何快速安全地删除WordPress文章的历史版本数据。 关于WordPress文章修订版 如开头所说,WordPress自带文章历史版本保存功能,可以帮助文章编辑者定时备份编辑数据,以便于意外事件发生,恢复历史版本。 好处:自动备份-WordPress文章修订版是一个自动保存文章草稿的功能。它可以在不手动保存草稿的情况下定时帮你保存在编辑的文章内容,这在您不小心忘记保存时非常有用。 缺点:积累垃圾数据-但是,不定时的“保存草稿”,在某些情况下,有可能一篇文章就保留数十至数百个草稿。不及时清理,无形中就增加了网站的垃圾数据。 你需要WordPress修订版功能吗? WordPress文章历史修订版这个功能已经保留了很长时间,大部分人对这功能还是需要的。就以我本人的切身体验来说: (1)有时候你会因为错误的操作,在编辑文章的时候不小心点击了其他页面或者关闭WordPress文章编辑页面,如果没有这个功能,有时候是灾难性的,因为如果没有习惯性的点击保存草稿功能,前面所作的事情就都没有了; (2)又或者突然间没有了网络,或者与服务器断开了连接,但恰恰有在那个时候你做了保存或者发布操作…… 因此,WordPress文章修订版这个功能还是有必要的。 如何删除WordPress文章修订版数据 删除WordPress文章修订版有两种方法:一种手动删除,另一种使用插件删除。 手动删除数据的风险 如果不使用插件,则可以使用SQL语句将其从数据库中删除。 但是,使用SQL语句删除数据,稍有不慎,灾难是不可逆转的。因此使用插件更安全。 使用插件更容易,更安全 使用插件,您只需单击即可删除文章历史修订数据。它比手动删除数据库数据容易得多,而且更加安全。 下面,我们将讨论如何使用插件删除WordPress文章修订版数据。 使用插件“WP-Optimize”删除修订版本 “WP-Optimize”插件是一款WordPress优化插件,即使是初学者也可以放心地使用其提供的修订版删除功能。 在这里小编将会跳过关于插件安装说明,你可以通过“安装插件> 搜索’WP-Optimize’>现在安装>启用。 启用WP-Optimize后,从仪表板菜单中单击“WP-Optimize”-“Database”-勾选“删除所有文章修订记录”,点击“Run optimization”,稍等片刻即可删除你的WordPress所有的文章修订版本。 删除所有文章修订记录只是WP-Optimize的其中一个功能,WP-Optimize实质上一个功能非常强大的WordPress瘦身优化插件,还有优化数据库表、清理自动草稿文章、清理所有回收站文章、删除垃圾评论等功能。 不使用WP-Optimize时请禁用 WP-Optimize不是影响网站布局或内容的插件,因此可以在删除WordPress文章历史修订版本数据又或者执行其他优化后暂时禁用。 当你再次需要使用它来对WordPress优化瘦身时,再次启用即可。

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 […]

100% Secure Checkout

PayPal / MasterCard / Visa