作者: tianbao

  • 如何清理WordPress网站Header部分不必要代码?

    如何清理WordPress网站Header部分不必要代码?

    很长一段时间以来,我一直在使用几个插件来清理WordPress Headers中的一些字段。在大多数情况下,我会说您通常不需要很多信息。

    为什么WordPress将这些功能和链接添加到您的网站?

    嗯,原因很明显。WordPress是一个非常大的CMS平台,被超过27%的在线博客网站使用。每个出版商都有自己的要求。有些喜欢wp-admin浏览器页面发布文章,有些使用第三方工具,有些使用 iOS或Android应用。

    如果您使用网络版本在您的WordPress网站上发布文章,那么您应该从您的WordPress网站中删除所有不必要的链接。

    有什么优势?

    1. 页面加载速度肯定更快
    2. 内容代码比增加
    3. 您的重要网站内容现在略高于搜索引擎的读取方式

    让我们看一下WordPress Headers中的一些链接。以下步骤将帮助您清理和优化WordPress网站的header部分。

    WordPress添加EditURI到您的网站Header,如果您通过第三方工具发布文章,这是必需的。

    <link type=“application/rsd+xml” title=“RSD” href=“https://crunchify.com/xmlrpc.php?rsd”>
    <link type=”application/rsd+xml” title=”RSD” href=”https://crunchify.com/xmlrpc.php?rsd”>
    <link type="application/rsd+xml" title="RSD" href="https://crunchify.com/xmlrpc.php?rsd">

    怎么禁用?将下方代码添加到您的主题functions.php文件中:

    remove_action (‘wp_head’, ‘rsd_link’);
    remove_action (‘wp_head’, ‘rsd_link’);
    remove_action ('wp_head', 'rsd_link');

    2.删除WordPress版本号

    版本号可能会暴露您的WordPress版本信息,让某些有预谋的人有机可乘。

    <meta name=“generator” content=“WordPress 4.9.2”>
    <meta name=”generator” content=”WordPress 4.9.2″>
    <meta name="generator" content="WordPress 4.9.2">

    下面的代码将从站点中删除WordPress版本号。

    function crunchify_remove_version() {
    return ;
    }
    add_filter(‘the_generator’, ‘crunchify_remove_version’);
    function crunchify_remove_version() {
    return ”;
    }
    add_filter(‘the_generator’, ‘crunchify_remove_version’);
    function crunchify_remove_version() {
        return '';
    }
    add_filter('the_generator', 'crunchify_remove_version');

    如果您不使用Windows Live Writer写作,完全可以移除WordPress网站Header的以下内容。

    <link type=“application/wlwmanifest+xml” href=“https://www.wbolt.com/wp-includes/wlwmanifest.xml”>
    <link type=”application/wlwmanifest+xml” href=”https://www.wbolt.com/wp-includes/wlwmanifest.xml”>
    <link type="application/wlwmanifest+xml" href="https://www.wbolt.com/wp-includes/wlwmanifest.xml">

    在你的主题function添加以下代码:

    remove_action( ‘wp_head’, ‘wlwmanifest_link’);
    remove_action( ‘wp_head’, ‘wlwmanifest_link’);
    remove_action( 'wp_head', 'wlwmanifest_link');

    如果您使用其他的固定链接形式,WordPress默认的短连接是完全没有意义的,可以考虑移除。

    <link href=“https://www.wbolt.com/?p=8112”>
    <link href=”https://www.wbolt.com/?p=8112″>
    <link href="https://www.wbolt.com/?p=8112">

    在你的主题function添加以下代码:

    remove_action( ‘wp_head’, ‘wp_shortlink_wp_head’);
    remove_action( ‘wp_head’, ‘wp_shortlink_wp_head’);
    remove_action( 'wp_head', 'wp_shortlink_wp_head');

    5.从所有静态资源中删除查询字符串

    静态资源查询字符串

    静态资源查询字符串

    添加下面的代码,所有查询字符串都将被删除。

    function wbolt_cleanup_query_string( $src ){
    $parts = explode( ‘?’, $src );
    return $parts[0];}
    add_filter( ‘script_loader_src’, ‘wbolt_cleanup_query_string’, 15, 1 );
    add_filter( ‘style_loader_src’, ‘wbolt_cleanup_query_string’, 15, 1 );
    function wbolt_cleanup_query_string( $src ){
    $parts = explode( ‘?’, $src );
    return $parts[0];}
    add_filter( ‘script_loader_src’, ‘wbolt_cleanup_query_string’, 15, 1 );
    add_filter( ‘style_loader_src’, ‘wbolt_cleanup_query_string’, 15, 1 );
    function wbolt_cleanup_query_string( $src ){
        $parts = explode( '?', $src );
        return $parts[0];}
    add_filter( 'script_loader_src', 'wbolt_cleanup_query_string', 15, 1 );
    add_filter( 'style_loader_src', 'wbolt_cleanup_query_string', 15, 1 );

    注: explore ('?', $src)将删除?符号后的所有内容。如果您只想删除with ver的查询字符串,请替换??ver.

    WordPress REST API使CMS能够与其他Web属性进行通信,无论它们是用什么编程语言编写的。

    但是,很多网站不使用它,因此在大多数情况下,它只是不必要的代码。默认情况下,每个站点的标题中都包含一个链接:

    <link href=“https://www.wbolt.com/wp-json/”>
    <link href=”https://www.wbolt.com/wp-json/”>
    <link href="https://www.wbolt.com/wp-json/">

    在你的主题function添加以下代码:

    remove_action(‘wp_head’, ‘rest_output_link_wp_head’, 10);
    remove_action(‘template_redirect’, ‘rest_output_link_header’, 11, 0);
    remove_action(‘wp_head’, ‘rest_output_link_wp_head’, 10);
    remove_action(‘template_redirect’, ‘rest_output_link_header’, 11, 0);
    remove_action('wp_head', 'rest_output_link_wp_head', 10);
    remove_action('template_redirect', 'rest_output_link_header', 11, 0);

    禁用WordPress网站上的嵌入将执行以下操作:

    • 它可以防止其他人嵌入您的网站,也可以防止您嵌入网站。
    • 删除oEmbed特定的JavaScript。
    • 禁用对oEmbed结果的过滤。
    • 删除oEmbed发现链接。
    • 关闭oEmbed自动发现。
    • 删除所有嵌入重写规则。
    remove_action(‘wp_head’, ‘wp_oembed_add_discovery_links’, 10);
    remove_action(‘wp_head’, ‘wp_oembed_add_discovery_links’, 10);
    remove_action('wp_head', 'wp_oembed_add_discovery_links', 10);

    这是一个完整的代码:

    将以下代码添加到主题的functions.php文件中,一切就绪。

    // ******************** Clean up WordPress Header START ********************** //
    function wbolt_remove_version() {
    return ;
    }
    add_filter(‘the_generator’, ‘wbolt_remove_version’);
    remove_action(‘wp_head’, ‘rest_output_link_wp_head’, 10);
    remove_action(‘wp_head’, ‘wp_oembed_add_discovery_links’, 10);
    remove_action(‘template_redirect’, ‘rest_output_link_header’, 11, 0);
    remove_action (‘wp_head’, ‘rsd_link’);
    remove_action( ‘wp_head’, ‘wlwmanifest_link’);
    remove_action( ‘wp_head’, ‘wp_shortlink_wp_head’);
    function wbolt_cleanup_query_string( $src ){
    $parts = explode( ‘?’, $src );
    return $parts[0];
    }
    add_filter( ‘script_loader_src’, ‘wbolt_cleanup_query_string’, 15, 1 );
    add_filter( ‘style_loader_src’, ‘wbolt_cleanup_query_string’, 15, 1 );
    // ******************** Clean up WordPress Header END ********************** //
    // ******************** Clean up WordPress Header START ********************** //
    function wbolt_remove_version() {
    return ”;
    }
    add_filter(‘the_generator’, ‘wbolt_remove_version’);

    remove_action(‘wp_head’, ‘rest_output_link_wp_head’, 10);
    remove_action(‘wp_head’, ‘wp_oembed_add_discovery_links’, 10);
    remove_action(‘template_redirect’, ‘rest_output_link_header’, 11, 0);

    remove_action (‘wp_head’, ‘rsd_link’);
    remove_action( ‘wp_head’, ‘wlwmanifest_link’);
    remove_action( ‘wp_head’, ‘wp_shortlink_wp_head’);

    function wbolt_cleanup_query_string( $src ){
    $parts = explode( ‘?’, $src );
    return $parts[0];
    }
    add_filter( ‘script_loader_src’, ‘wbolt_cleanup_query_string’, 15, 1 );
    add_filter( ‘style_loader_src’, ‘wbolt_cleanup_query_string’, 15, 1 );
    // ******************** Clean up WordPress Header END ********************** //

    // ******************** Clean up WordPress Header START ********************** //
    function wbolt_remove_version() {
        return '';
    }
    add_filter('the_generator', 'wbolt_remove_version');
    
    remove_action('wp_head', 'rest_output_link_wp_head', 10);
    remove_action('wp_head', 'wp_oembed_add_discovery_links', 10);
    remove_action('template_redirect', 'rest_output_link_header', 11, 0);
    
    remove_action ('wp_head', 'rsd_link');
    remove_action( 'wp_head', 'wlwmanifest_link');
    remove_action( 'wp_head', 'wp_shortlink_wp_head');
    
    function wbolt_cleanup_query_string( $src ){
        $parts = explode( '?', $src );
        return $parts[0];
    }
    add_filter( 'script_loader_src', 'wbolt_cleanup_query_string', 15, 1 );
    add_filter( 'style_loader_src', 'wbolt_cleanup_query_string', 15, 1 );
    // ******************** Clean up WordPress Header END ********************** //
  • 从WordPress评论表单中删除网站URL的6种方法

    从WordPress评论表单中删除网站URL的6种方法插图

    评论垃圾邮件是接受博客评论的WordPress博主面临的最大挑战之一。许多用户发表评论只是为了留下他们的网站链接URL。这是从权威网站获取反向链接的简单方法。如果您只想接受感兴趣用户的评论,那么您可以在WordPress评论表单中删除网站URL或评论作者链接。

    管理WordPress评论中的垃圾邮件

    在我们之前的文章中,我们已经解释了如何有效地拦截WordPress中的垃圾评论。基本上,您可以使用以下选项:

    • 使用Akismet等插件自动过滤垃圾评论。
    • 阻止IP地址列表中的评论。
    • 通过阻止敏感词来防止激进的评论。
    • 限制注册用户的评论。
    • 保留所有评论以供审核和手动批准。
    • 适度发表评论,其中包含一定数量的超链接。

    尽管所有这些方法都会减少垃圾邮件,但由于一个原因,您无法完全摆脱垃圾邮件。那是WordPress评论表单中可用的网站URL文本框。

    WordPress评论表单行为

    默认情况下,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;
    }
    .comment-form-url{
    display:none;
    }
    .comment-form-url{
    display:none;
    }

    这将从WordPress评论表单中删除评论作者链接框。下面是它在2021主题浏览器的开发者控制台上的外观。

    使用CSS在评论中禁用网站URL

    使用CSS在评论中禁用网站URL

    上述选项很容易做到,尽管它可能不适用于所有 WordPress 主题。由于主题可以使用自定义CSS来修改默认的WordPress评论表单,因此在使用上述方法之前,您必须检查主题的CSS。此外,您所有的旧评论仍将具有与作者姓名链接的网站URL。因此,从评论中删除作者链接的下一个选项是在主题的functions.php文件中使用一个函数。

    您可以转到“外观 > 主题编辑器”部分并为您的活动主题找到“functions.php”文件。将以下代码粘贴到文件末尾,然后单击“更新文件”按钮。

    /* Remove Comment Author Link */
    add_filter( ‘get_comment_author_link’, ‘remove_comment_author_link’, 10, 3 );
    function remove_comment_author_link( $return, $author, $comment_ID ) {
    return $author;
    }
    /* Remove Comment Author Link */
    add_filter( ‘get_comment_author_link’, ‘remove_comment_author_link’, 10, 3 );
    function remove_comment_author_link( $return, $author, $comment_ID ) {
    return $author;
    }
    /* Remove Comment Author Link */
    add_filter( 'get_comment_author_link', 'remove_comment_author_link', 10, 3 );
    function remove_comment_author_link( $return, $author, $comment_ID ) {
                return $author;
    }

    它在您的文件中应如下所示:

    添加删除评论作者链接的函数

    添加删除评论作者链接的函数

    如果您使用缓存插件,请确保清除缓存并检查您的评论表单。不要对评论表单上仍然存在网站URL字段感到惊讶。该代码的作用是删除已发布评论上评论作者姓名和网站URL之间的超链接。因此,您无需再担心评论表单中的网站URL字段。当您批准评论时,它将根本不使用。此函数还将从您网站上已发布的所有现有评论中删除评论作者链接。

    评论作者链接已删除

    评论作者链接已删除

    请记住,不建议编辑主题的functions.php,因为当您更新主题时更改将被清除。您可以为此目的使用子主题或使用代码片段插件将上述代码添加为独立片段。

    3. 使用功能删除WordPress评论表单中的网站URL

    您可以在主题的functions.php中插入以下代码,而不是上述函数。此功能将完全删除WordPress评论表单中提交的网站URL。但是,所有现有链接都将保留而不会产生任何影响。

    /* Remove Website URL in Comments */
    add_filter(‘comment_form’, ‘remove_url_field’);
    function remove_url_field($fields){
    if(isset($fields[‘url’]))
    unset($fields[‘url’]);
    return $fields;
    }
    /* Remove Website URL in Comments */
    add_filter(‘comment_form’, ‘remove_url_field’);
    function remove_url_field($fields){
    if(isset($fields[‘url’]))
    unset($fields[‘url’]);
    return $fields;
    }
    /* Remove Website URL in Comments */
    add_filter('comment_form', 'remove_url_field');
    function remove_url_field($fields){
    if(isset($fields['url']))
    unset($fields['url']);
    return $fields;
    }

    在您的评论表单中,它将如下所示。

    评论表单中的网站URL已删除

    评论表单中的网站URL已删除

    这是一种超级简单且免费的方法。转到WordPress管理面板中的“插件 > 安装插件”部分并安装“Hide Comment Author Link”插件。

    安装Hide Comment Author Link插件

    安装Hide Comment Author Link插件

    该插件没有任何设置页面,激活后将禁用已发布评论中的评论作者链接。请记住,此插件与上述方法3中解释的添加函数的工作相同。因此,您仍然会看到网站URL链接,用户可以在评论中留下他们网站的URL。但是,已发布评论中的评论作者姓名将不提供URL。

    5. 使用高级插件禁用评论URL

    下一个选项是为此目的使用高级性能优化插件。您可以使用终极性能优化插件,而不是为此使用专用插件。此插件的单站点许可证费用为24.95美元,可帮助您从WordPress安装中禁用不必要的项目。您只需单击几下即可禁用WooCommerce样式/JS、提要、XML-RPC和许多其他项目。

    此外,上述两种方法(添加功能和免费插件)是不可取的,因为它们会将评论者与表单上可用但在已发布评论中删除的网站URL混淆。因此,我们建议为此使用Perfmatters高级插件

    • 激活插件后,转到“设置 > 性能”菜单。
    • 导航到“选项 > 常规”部分。
    • 向下滚动并启用“删除评论URL”选项。
    • 单击“保存更改”按钮以在您的站点上应用更改。

    使用Perfmatters删除评论URL

    使用Perfmatters删除评论URL

    此插件将从您的评论表单中删除网站URL字段,并从所有现有评论中删除评论作者链接。

    6. 从主题设置中禁用网站URL

    有些主题允许您禁用在WordPress评论表单中提交的评论和网站URL。例如,您可以使用流行的Kadence主题轻松完成此操作,只需单击定制器设置。在尝试上述任何选项之前,请检查您的主题是否提供此类功能。

    删除Kadence主题中的评论网站字段

    删除Kadence主题中的评论网站字段

    小结

    评论形式的网站URL是WordPress网站中最大的垃圾邮件来源。但是,您没有任何默认选项来禁用评论作者链接或删除WordPress评论表单中的网站URL。您可以使用上述任何一种在您的网站上运行良好的方法。在测试了所有这些方法之后,我们建议使用Perfmatters,因为它可以通过许多其他优化来提高您网站的性能。尽管删除ReURL可以减少人工垃圾邮件,但您仍可能收到来自自动机器人的评论。在这种情况下,请使用安全插件来阻止机器人访问或在评论表单中添加验证码保护。

  • 前端CDNJS库及Google Fonts、Ajax和Gravatar国内加速服务

    前端CDNJS库及Google Fonts、Ajax和Gravatar国内加速服务

    由于某些众所周知的原因,好多开源的JS库采用的国外CDN托管方式在国内访问速度不如人意。所以u.sb特意制作了这个公益项目,托管了CDNJS的所有开源JS库以及反代了Google Fonts、Ajax和Gravatar。

    1、CDNJS开源JS库

    我们采用的方法是每天定时同步CDNJS的Github

    所有的JS/CSS库可以在这儿找到您需要的链接

    https://cdnjs.loli.net/ajax/libs/

    如果您使用cdnjs.com只需要替换 cdnjs.cloudflare.com 为 cdnjs.loli.net 即可,如

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    

    替换成

    <script src="https://cdnjs.loli.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    

    CDNJS的API开发文档请摸这里

    2、Google Fonts

    我们采用的方法是万能的Nginx反代 + 关键词替换

    使用的时候,您只需要替换 fonts.googleapis.com 为 fonts.loli.net 即可,如

    <link href="https://fonts.googleapis.com/css?family=Open+Sans">
    

    替换成

    <link href='https://fonts.loli.net/css?family=Open+Sans' rel='stylesheet'>
    

    如果需要Material icons ,把

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons">
    

    替换成

    <link href="https://fonts.loli.net/icon?family=Material+Icons">
    

    如果需要Early Access,把

    @import url(https://fonts.googleapis.com/earlyaccess/notosanskannada.css);
    

    替换成

    @import url(https://fonts.loli.net/earlyaccess/notosanskannada.css);
    

    如果需要下载单个字体,您只需要把 fonts.gstatic.com 替换成 gstatic.loli.net 或 themes.googleusercontent.com 替换成 themes.loli.net 即可

    比如

    https://fonts.gstatic.com/s/opensans/v14/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2
    

    替换成

    https://gstatic.loli.net/s/opensans/v14/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2
    

    或者

    https://themes.googleusercontent.com/static/fonts/anonymouspro/v3/Zhfjj_gat3waL4JSju74E-V_5zh5b-_HiooIRUBwn1A.ttf
    

    替换成

    https://themes.loli.net/static/fonts/anonymouspro/v3/Zhfjj_gat3waL4JSju74E-V_5zh5b-_HiooIRUBwn1A.ttf
    

    Google Fonts的API文档请摸这里

    3、Google前端公共库

    方法同上,直接替换 ajax.googleapis.com 为 ajax.loli.net 即可,如

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    

    替换成

    <script type="text/javascript" src="https://ajax.loli.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    

    Google前端库API开发文档摸这儿

    4、Gravatar头像

    方法还是同上,直接替换 *.gravatar.com 为 gravatar.loli.net 即可,如

    https://secure.gravatar.com/avatar/8406d089bc81b664a2610b8d214c1428
    

    替换成

    https://gravatar.loli.net/avatar/8406d089bc81b664a2610b8d214c1428
    

    5、赞助商

    国内外CDN, GeoDNS、域名、SSL证书等基础服务均由Riven Cloud赞助

    6、加速域名列表

    所有国内加速服务的域名列表如下,您只需要修改程序里的原域名即可

    原域名 加速域名 制作方法
    cdnjs.cloudflare.com cdnjs.loli.net 每日同步 Github
    ajax.googleapis.com ajax.loli.net Nginx 反代
    fonts.googleapis.com fonts.loli.net Nginx 反代
    fonts.gstatic.com gstatic.loli.net Nginx 反代
    themes.googleusercontent.com themes.loli.net Nginx 反代
    secure.gravatar.com gravatar.loli.net Nginx 反代

    注意: 个别国内的网络环境可能无法使用本服务,这也暂时没有办法解决这个问题,请自行检查或更换运营商。

    via u.sb

  • 什么是WordPress自动保存及如何更改保存间隔和禁用

    什么是WordPress自动保存及如何更改保存间隔和禁用

    WordPress Autosave是我最喜欢的功能之一,它让我们在编辑我们许多网站上的文章或页面时高枕无忧。

    如果您使用过其他没有自动保存功能的CMS,您可能会经历过那个可怕的时刻,当您按下“保存”时,您的登录超时,您将失去一切。

    WordPress自动保存可以防止这样的悲惨故事,这种故事一次又一次地发生在很多人身上。

    默认情况下,WP会在您更新内容后每60秒自动保存您的文章、页面或自定义文章类型。

    这可以非常方便地保留未保存内容的副本,否则您可能由于不同的原因而丢失,例如过期的cookie、浏览器崩溃、互联网连接丢失、无意导航、WP核心或插件错误/崩溃等。

    除了自动将内容保存到数据库之外,从最近的WP版本开始,该功能现在还利用浏览器的本地存储功能来防止在您意外快速离线(例如突然断电)时丢失您的内容。

    虽然WordPress自动保存功能可以成为那些经常在WP管理员中编辑内容的人的救命稻草,但由用户决定是否需要启用该功能。好消息是您可以根据自己的喜好禁用该功能或​​自定义保存间隔。在我们设计的网络博客上,我们倾向于保持原样或缩短一点。

    在这篇文章中,让我们详细了解一下自动保存功能。

    什么是WordPress自动保存

    当您撰写或编辑内容时,您对文章所做的更改将每60秒自动保存一次。

    当文章更新或自动保存时,它将在您的文章编辑器的右下角被视为通知。

    请参阅下面的屏幕截图。

    文章自动保存时间戳

    自动保存后,如果您的文章被更新,下一次保存将覆盖旧的。这意味着您的表格每60秒不会增长超过一次。每个文章只存储一个(最新的)自动保存。

    这与您按下更新按钮时完全不同,每次都会创建一个新的WordPress文章“修订”。

    现在您可能已经注意到这一点 – 当您尝试关闭浏览器选项卡而不保存您的文章时,您会看到一个警告弹出,通知您文章未保存。

    文章自动保存弹窗提示

    使用自动保存的好处是,即使您在未保存的情况下离开选项卡,下次登录时您在文章编辑器中看到的第一件事就是文章的自动保存版本。

    最好的是,这些自动保存不会覆盖您发布的文章或保存的修订。因此,您可以在下次登录时轻松开始编辑自动保存的文章。

    在浏览器上临时保存WordPress文章

    除了将您的内容保存在数据库中之外,如果您离线,WP现在还利用浏览器的本地存储功能。当您在线返回时,它会通知您是否发现任何差异。

    本地临时保存文章

    此功能使您能够准确地从离开的位置继续书写。

    自动保存使WordPress成为更好的内容编辑工具

    虽然WP无疑是目前最好的CMS,但它仍然缺乏MS Word和Google文档的许多内容编写、内容编辑和协作功能。

    由于这个事实,仍然有许多博主更喜欢离线创建文章或使用Google文档进行协作编辑。此类用户仅在文章完成编写后才使用WP管理员。

    这为网站的编辑和作者创造了更多的工作 – 将内容从文档迁移到您的后端需要大量时间,因为大部分格式都会在此过程中丢失。

    但是,这种增强的WordPress自动保存功能使该CMS向前迈进了一步,成为更可靠的内容编辑工具。

    如果您仍在使用第三方应用程序进行内容创建和协作,除了此功能之外,以下是WordPress管理员可能是您最佳选择的几个原因。

    WordPress文章修订

    WordPress文章修订允许您比较已保存文章的不同版本。如果您需要查看文章的以前版本(也许如果您错误地进行了更改),这可以成为救命稻草。截至目前,没有其他离线文字处理器提供这一惊人的功能。

    文章其他人编辑提醒

    锁定文章编辑

    自3.6版本以来,WordPress发布了一个名为post lock的新编辑控制功能。这允许文章作者锁定文章,直到完成编辑。对于多作者博客来说,这可能是一个有用的功能,其中作者协作为每篇文章做出贡献。

    更好的语法检查器

    尽管WordPress提供了大量的文章编辑器功能,但它仍然落后于MS Word等可靠的语法检查工具。如果这就是您仍然使用离线文字处理应用程序的原因,您需要做的就是安装Grammarly浏览器插件。

    文章语法检测

    Grammarly是一款免费的在线语法检查器,在校对和语法检查方面比MS Word好得多。

    毫无疑问,所有这些功能将使WordPress成为可靠的内容创建和编辑工具。

    如何更改自动保存间隔

    现在我们已经了解了WordPress自动保存功能的各种好处,让我们看看如何根据您的喜好更改保存间隔。

    例如,如果您使用慢速互联网连接来写博客,您可能需要增加自动保存间隔,以确保您的浏览器不会在WordPress每分钟强制保存时频繁挂起。

    或者,如果您想尽量减少因操作系统崩溃或断电而丢失内容的可能性,您可能需要缩短时间间隔,以便更频繁地保存内容。

    更改WordPress自动保存设置只需进行一些调整。

    如果您想更改自动保存间隔,只需找到您网站的wp-config.php文件,在其上插入以下代码片段并保存即可。

    define(‘AUTOSAVE_INTERVAL’, 120 );
    define(‘AUTOSAVE_INTERVAL’, 120 );
    define('AUTOSAVE_INTERVAL', 120 );

    上面的代码将自动保存间隔更改为120秒。在保存之前,请根据您的喜好随意编辑上述代码中的数字(以秒为单位)。

    请务必在wp-config.php文件中的以下代码行之前添加上述代码片段,否则设置将不起作用。

    require_once(ABSPATH . ‘wp-settings.php’);
    require_once(ABSPATH . ‘wp-settings.php’);
    require_once(ABSPATH . 'wp-settings.php');

    如何禁用自动保存功能

    WP的美妙之处在于您可以轻松自定义或禁用它提供的几乎所有功能。

    在极少数情况下,如果您不想为您的网站使用自动保存功能,您可以按照以下指南轻松禁用它。

    在本节中,您会发现使用两种方法禁用自动保存——编辑wp-config.php文件和编辑functions.php文件。

    您可以使用以下任何一种方法来禁用WordPress自动保存功能。

    编辑wp-config.php文件以禁用WordPress自动保存

    编辑wp-config.php文件可能是禁用WordPress自动保存的最简单方法。

    尽管您可以通过禁用WP_POST_REVISIONS来禁用它,但这种方法的问题在于它也会禁用后期修订。

    所以正确的方法是增加wp-config.php文件中的自动保存间隔,这样它就永远不会自动保存任何东西。

    define(‘AUTOSAVE_INTERVAL’, 86400);
    define(‘AUTOSAVE_INTERVAL’, 86400);
    define('AUTOSAVE_INTERVAL', 86400);

    上面的代码片段确保你的文章会在 86400 秒后被保存;那是一天之后。

    通过编辑functions.php文件禁用WordPress自动保存

    但真的,真的,你为什么要禁用它啊?

    禁用此功能的最聪明的方法是在您的functions.php文件中添加几行代码 – 这就是您的WordPress的动作钩子。添加代码后,您可以保存文件。

    add_action( ‘admin_init’, ‘disable_autosave’ );
    function disable_autosave() {
    wp_deregister_script( ‘autosave’ );
    }
    add_action( ‘admin_init’, ‘disable_autosave’ );

    function disable_autosave() {

    wp_deregister_script( ‘autosave’ );

    }

    add_action( 'admin_init', 'disable_autosave' );
    
    function disable_autosave() {
    
        wp_deregister_script( 'autosave' );
    
    }

    它的作用是简单地取消注册自动保存脚本,您可以在wp-admin/post.php文件和wp-admin/post-new.php文件中找到该脚本。

    常见问题

    什么是WordPress自动保存?

    WordPress自动保存是WordPress编辑器的一项功能,它会定期自动保存编辑器的内容,这样您就不必手动按下更新按钮。

    如何在WordPress中关闭自动保存?

    要在WordPress中关闭自动保存,您需要对WordPress的functions.php文件进行小幅调整。添加以下代码并保存,您的自动保存将被禁用:

    add_action( ‘admin_init’, ‘disable_autosave’ );
    function disable_autosave() {
    wp_deregister_script( ‘autosave’ );
    }
    add_action( ‘admin_init’, ‘disable_autosave’ );

    function disable_autosave() {
    wp_deregister_script( ‘autosave’ );
    }

    add_action( 'admin_init', 'disable_autosave' ); 
    
    function disable_autosave() {
     wp_deregister_script( 'autosave' ); 
    }

    如何返回到以前版本的WordPress?

    如果您想返回WordPress中文章的先前版本,请找到修订链接,单击浏览并单击恢复此修订以将当前版本替换为文章的先前版本之一。

    我在哪里可以找到WordPress的修订版?

    您可以在“发布”选项卡中屏幕右侧的WordPress中找到修订。如果您没有看到 Revisions 选项,请单击右上角的Screen Options并启用Revisions复选框

    如何在WordPress上保存更改?

    要在WordPress上保存更改,请单击“发布”选项卡中的“更新”按钮。请注意,WordPress还会按照此处描述的autosave_interval设置的定义定期自动保存编辑器的内容。

  • 什么是WordPress Heartbeat API以及如何管理它

    什么是WordPress Heartbeat API以及如何管理它插图

    2013年,WordPress引入了Heartbeat API——一种允许您的浏览器自动与服务器通信的功能。但是,此功能有几个缺点。

    如果您使用共享主机计划,则需要仔细查看服务器的CPU使用率。那是因为当您超出限制时,一些托管公司可能会暂停您的帐户。

    在这里,我们将讨论为什么WordPress Heartbeat API是导致问题的常见嫌疑人,及如何禁用和修改Heartbeat API频率。

    什么是WordPress Heartbeat API?

    WordPress Heartbeat API在浏览器和服务器之间提供了一种使用AJAX调用的通信协议

    顾名思义,API将在接收到数据时发送连续脉冲并触发事件(或回调)。此功能可帮助您在服务器和WordPress仪表盘之间同步所有数据。

    Heartbeat API背后的想法非常引人注目。例如,当您从编辑器创建/编辑文章时,它提供了定期自动保存文章的功能。

    在协作WordPress网站中,它具有后锁定功能,以防止您编辑其他用户正在处理的文章。如果您使用电子商务插件,此API还将有助于显示您网站上发生的销售情况。

    为什么要限制WordPress Heartbeat API?

    虽然具有自动保存功能和实时数据通知功能是有益的,但在特定情况下可能是有害的。

    Heartbeat API使用/wp-admin/admin-ajax.php文件发送AJAX请求(POST 请求) 。每个执行PHP文件的请求都等于服务器上的CPU时间。

    这可能会导致向托管服务器发送大量请求,从而导致CPU使用率过高。

    正如我们之前提到的,对于具有共享托管计划的网站管理员来说,这可能是一个问题。当您达到配额限制时,高CPU使用率最终会导致帐户暂停。

    因此,如果您遇到的问题会导致POST-admin-ajax.php出现峰值,这里有一个教程可以帮助您解决这个问题

    停止Heartbeat API之前需要考虑的事项

    如果您打算完全停止Heartbeat API,则需要三思而后行。不是因为你做不到,而是不实用。

    如果没有WordPress Heartbeat API,如果您忘记单击“保存草稿”按钮,您在文章中所做的所有更改都将丢失。您将无法再访问WordPress中的修订功能

    如果您安装使用Heartbeat API的WordPress插件,您也无法在您的站点上显示实时通知和信息功能。

    但是,如果您是一个人工作,并且所有这些功能对您来说并不重要,那么您可以继续停止WordPress Heartbeat API。

    否则,您可能会考虑改为控制API。

    如何使用插件限制WordPress Heartbeat API?

    您可以使用Heartbeat Control插件控制Heartbeat API向您的服务器发送回调的频率。

    安装并激活插件后,转到Settings -> Heartbeat Control Settings。在这里,您可以为API设置一定的规则。

    • Heartbeat Behavior– 允许您启用心跳禁用心跳修改心跳
    • Location– 确定您要控制API的区域,它为您提供三个选项:WordPress仪表盘前端文章编辑器
    • Frequency– 您允许每个确定位置的回调次数。取值范围为15到300秒

    什么是WordPress Heartbeat API以及如何管理它-1

    在示例中,我们将Post Editor中Heartbeat API函数的频率限制为200秒。如果您有多个作者在同一个WordPress网站上工作,这是一种更实用的方法。

    您还可以在您希望控制的每个位置设置不同的值。只需单击添加另一个值按钮,并相应地进行调整。

    该插件还允许您完全禁用WordPress Heartbeat API。您可以通过为Heartbeat Behavior选择Disable Heartbeat来做到这一点。

    如何在没有插件的情况下完全停止Heartbeat API?

    您也可以在没有插件的情况下停止Heartbeat API,方法是将此代码段添加到您的活动主题functions.php文件中。

    add_action( ‘init’, ‘stop_heartbeat’, 1 );
    function stop_heartbeat() {
    wp_deregister_script(‘heartbeat’);
    }
    add_action( ‘init’, ‘stop_heartbeat’, 1 );
    function stop_heartbeat() {
    wp_deregister_script(‘heartbeat’);
    }
    add_action( 'init', 'stop_heartbeat', 1 );
    function stop_heartbeat() {
    wp_deregister_script('heartbeat');
    }

    请记住,如果您是网站的唯一工作人员并且您不需要安装使用此API的其他插件,则应该这样做。

    什么是WordPress Heartbeat API以及如何管理它-2

    从您的WordPress仪表板,转到Appearance -> Theme Editor。确保您正在编辑网站的活动主题。从右侧导航菜单中单击主题函数 (functions.php) 。将上面的代码片段粘贴在<?php标记之后,然后单击Update

    就是这样,现在您已经成功地在您的站点上禁用了WordPress Heartbeat API。

    小结

    您已经了解了WordPress Heartbeat API及其为您的站点提供的功能。尽管这无疑是有益的,但在共享托管环境中,如果您处理不当,它可能会导致相当大的问题。

    要减少服务器上的CPU使用率,您可以控制API或完全禁用它。此外,您可以使用插件或手动将代码添加到functions.php文件中。

  • 如何在WordPress网站中禁用谷歌字体?

    如何在WordPress网站中禁用谷歌字体?

    使用商业主题时,WordPress网站看起来很漂亮。这些高级主题使用缩略图和好看的字体来制作吸引人的外观。然而,酷炫的外观伴随着您作为网站所有者需要承担的一定成本。在本文中,让我们探讨字体问题以及如何在WordPress站点中禁用Google字体。

    在WordPress中使用字体

    以下是在WordPress中使用字体的流行方式,您可以随时切换使用字体的方式。

    • 使用第三方字体,如Google Fonts
    • 在您的服务器上托管自定义字体
    • 使用系统字体

    无论您使用什么方式;您需要以下三件事才能使用任何字体系列:

    • 具有不同扩展名的字体文件,如woff、eot、ttf或svg。虽然主要使用一个文件,但其余文件用于后备和兼容性目的。或者,您可以使用CSS字体文件,尤其是从Google字体网站加载时。
    • 将字体从文件导入到您的站点。CSS字体导入在早期很流行,现在在标题部分链接外部字体文件很常见。
    • 在HTML元素中使用CSS规则来提及字体系列和其他属性。

    这是一个使用外部文件链接的示例CSS,用于在标题部分使用具有常规400粗的Roboto系列。

    <link href=“https://fonts.googleapis.com”>
    <link href=“https://fonts.gstatic.com” crossorigin>
    <link href=“https://fonts.googleapis.com/css2?family=Roboto&display=swap”>
    <link href=”https://fonts.googleapis.com”>
    <link href=”https://fonts.gstatic.com” crossorigin>
    <link href=”https://fonts.googleapis.com/css2?family=Roboto&display=swap”>
    <link href="https://fonts.googleapis.com">
    <link href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">

    以下是如何在HTML中使用带有H1标题的Roboto字体系列:

    h1 {
    font-family: ‘Roboto’, sans-serif;
    }
    h1 {
    font-family: ‘Roboto’, sans-serif;
    }
    h1 {
    font-family: 'Roboto', sans-serif;
    }
    

    据说页面上的每个HTML元素都需要一个字体系列来呈现它在浏览器上的预期显示方式。

    WordPress中的谷歌字体

    通常为HTML body元素声明字体系列,以便整个页面使用相同的字体。然而,那些好看的主题需要对标题、块引用、预格式化、表格、按钮等元素使用不同的字体系列。为了避免设计多种字体或支付许可费用,许多WordPress主题和插件开发人员使用免费的第三方 -派对字体。谷歌字体的使用与谷歌的流行和CDN的能力一起提供了更接近您网站访问者的字体文件。

    谷歌字体

    谷歌字体

    10个商业WordPress主题中几乎有7个使用Google字体并提供自定义主题面板。您可以从1250多种可用字体系列中选择一种。由于有大量的字体可供免费使用,开发人员可以简单地将所需的Google字体文件与标题部分中的系列和重量详细信息联系起来。您可以通过查看您网站的源代码来查看您网站上的Google字体文件。

    源代码中的Google字体CSS文件

    源代码中的Google字体CSS文件

    您可以看到字体是从fonts.googleapis.com服务器加载的。Open Sans和Roboto是字体系列,400/600表示字体粗细。有时您可能还会看到字体是从诸如fonts.gstatic.com之类的Google域加载的。

    使用多种和外部字体的问题

    在WordPress中使用Google字体会产生以下问题:

    • 任何第三方资源都会影响您网站的页面加载速度。示例包括Google字体、分析跟踪、Facebook像素等。
    • 使用多个字体系列和字体粗细会增加 Google 服务器所需的外部文件数量。这将增加从您的站点发送的 HTTP 请求的数量,从而降低页面加载速度。
    • 在从Google服务器下载所有字体文件之前,浏览器不会加载文本。这可能需要一些时间,在此期间用户将看到空白的空白页面。您将在Google PageSpeed Insights工具中看到警告,以确保在网络字体加载期间文本可见。
    • 您可能需要使用预连接和DNS预取来连接到Google字体域,以加快网站的加载速度。

    由于速度是Google搜索中的官方排名因素之一,因此您没有其他选择可以避免使用第三方Google字体。

    如何在WordPress中禁用谷歌字体?

    现在很明显,您必须在WordPress中禁用Google字体以提高页面加载速度。但问题是当您的主题和插件使用Google字体时,如何在影响或不影响网站外观的情况下做到这一点。以下是可供您选择的选项。

    • 完全禁用Google字体,以便您的网站使用浏览器的备用字体。
    • 将swap参数添加到Google字体文件并继续使用它们。
    • 通过添加自定义CSS或更改主题来使用系统字体。

    我们将在以下部分探讨所有这些选项。

    #1 – 完全禁用WordPress中的Google字体

    随着Google字体成为速度问题,几乎所有缓存和速度优化插件都提供了从您的网站合并或删除Google字体的功能。我们推荐的最佳选择是使用Perfmatters插件,该插件还附带一套完整的选项来消除腹胀。例如,如果您使用WooCommerce插件,您只需点击几下即可禁用文章和页面上的WooCommerce样式和脚本。

    • 在您的网站上购买并安装Perfmatters插件
    • 转到“设置 > Perfmatters”菜单。
    • 导航到“Fonts”部分下的“Options”选项卡。
    • 启用针对“Disable Google Fonts”选项的按钮。
    • 单击“保存更改”按钮以应用更改。

    在Perfmatters插件中禁用Google字体

    在Perfmatters插件中禁用Google字体

    如果您不想使用付费插件,请转到仪表板中的“插件 > 安装插件”部分并安装“Disable and Remove Google Fonts”插件。这是一个免费且专用的插件,它只做一项工作即可完全摆脱您网站上的Google字体。

    Disable and Remove Google Fonts插件

    Disable and Remove Google Fonts插件

    令人惊讶的是该插件没有任何烦人的设置页面。您所需要的只是在您的站点上安装并激活它。

    其他免费选项包括Auto optimize,它与缓存选项一起很有用。如果您在SiteGround主机上,请使用SG Optimizer插件来组合所有Google字体以减少HTTP请求的数量。

    #2 – 设置谷歌字体Swap显示

    如上所述,不使用谷歌字体的主要原因之一是它会延迟文本内容的加载。要处理这个问题,您可以使用如下CSS属性:

    对于使用外部字体文件:

    <link href=”https://fonts.gstatic.com” crossorigin>
    <link href=”https://fonts.googleapis.com/css2?family=Roboto&display=swap”>
    <link href=”https://fonts.gstatic.com” crossorigin>
    <link href=”https://fonts.googleapis.com/css2?family=Roboto&display=swap”>
    <link href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
    

    与CSS @import一起使用:

    <style>
    @import url(‘https://fonts.googleapis.com/css2?family=Roboto&display=swap’);
    </style>
    <style>
    @import url(‘https://fonts.googleapis.com/css2?family=Roboto&display=swap’);
    </style>
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
    </style>
    

    最近,Google推出了对CSS font-display:swap属性与Google Fonts的支持。这实质上意味着您可以指示浏览器首先使用默认浏览器的字体,直到Google字体文件可用。当浏览器完成下载谷歌字体文件时,它会交换显示并使用谷歌字体。这样,查看文本内容不会有延迟。这将帮助您解决问题,例如确保在Google PageSpeed Insights工具中加载网络字体期间文本保持可见。

    为了实现字体交换,您可以使用Swap Google Fonts Display插件。该插件也没有任何设置,您只需在您的站点上激活插件即可在所有Google字体文件中添加display=swap值。

    Swap Google Fonts Display插件

    Swap Google Fonts Display插件

    #3 – 使用系统字体

    最近,许多WordPress主题都提供了使用系统字体堆栈和Google字体的选项。例如,您可以为此目的使用流行的轻量级主题(如GeneratePress )。您只需在定制器设置中选择系统字体选项即可。

    在GeneratePress主题中使用系统字体堆栈

    在GeneratePress主题中使用系统字体堆栈

    如果您想在站点中手动使用系统字体,只需在“外观 > 自定义 > 添加CSS”部分下添加以下CSS。此CSS仅适用于body元素,如果需要,您可能需要在声明中添加其他元素。此外,您必须手动删除其他CSS导入或文件链接,以避免同时加载这些字体文件。

    body {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, “Segoe UI”, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;
    }
    body {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, “Segoe UI”, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;
    }
    body {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

    虽然这是一个简单的选项,但在使用系统字体时,您不会在所有设备中都有固定的字体显示。

    小结

    无论您使用哪种方法,请确保测试该站点的源代码中不包含任何Google字体文件。如果您使用交换选项,请检查字体CSS文件是否包含display=swap属性。此外,使用Google PageSpeed Insights工具测试您的网站,以确保没有与字体相关的警告。

  • 如何实现WordPress图片和视频懒加载(图文教程)

    wordpress-lazy-load

    如果您的WordPress网站严重依赖视觉内容,您可能需要为其添加懒加载功能。此WordPress功能有助于提高网站的页面速度和性能,使其对您的SEO工作至关重要。

    根据HTTP Archive,网页平均体积为3719 kB,其中图像和视频占总体积的近78%。 这对于网站访问者的浏览器下载和渲染来说是很多字节,并且未来的趋势网页越来越大及使用更多的图像或者视频内容。 在共享媒体和将媒体文件整合到网站设计中时,WordPress正在引领潮流。 使用WordPress,可以轻松地将图像和视频集成到文章,页面甚至主题的背景中。

    但是,过多的媒体资源使得网页加载变得非常缓慢,因为用户在查看网页之前必须等待下载大文件(包括最初未显示的文件)。 这是为什么我们要对WordPress做图片或者视频懒加载(延迟加载)的原因。

    什么是懒加载以及它如何工作?

    延迟加载(又称懒加载)是一种加载可见内容的优化技术,即延迟下载和呈现在首屏下方需要显示的内容。延迟加载不是一次加载所有图像,而是仅下载用户屏幕上可见的图像。它用占位符图像或空白区域替换所有其他图像。当用户向下滚动时,您的网站会加载在浏览器查看区域中可见的图像。

    这也是谷歌极力推广的网页优化策略“缩减首屏内容的大小”,如果您的WordPress文章和页面包含大量嵌入式视频和高分辨率图像,这是一种应该考虑的技术。

    延迟加载的工作方式如下:

    • 浏览器在不下载图像和预加载视频下构建网页DOM而。
    • JavaScript用于确定要下载哪些图像以及根据页面加载时最初可见的内容预加载哪些视频。这些图像和视频会根据需要下载和预加载。
    • 下载和呈现其他视频会延迟,直到网站访问者向下滚动页面并且其他内容进入视图。

    最终结果是,在实际需要之前,不会下载图像和加载视频。这可以为包含大量高分辨率图像和嵌入视频的网站实现显着的性能提升。

    延迟加载对您的WordPress网站非常有利。

    • 它减少了初始网页加载时间,因此用户会更快地看到您的网站
    • 它通过仅提供可查看的图像来节省带宽,并可节省托管成本

    WordPress 5.5的发布添加了延迟加载作为默认功能。

    但是,如果您想自定义图像延迟加载和背景图像延迟加载的方式,则需要使用WordPress插件。

    注意:虽然延迟加载有助于提高网站加载速度,但在上传到WordPress之前,您应该始终针对网络优化图像以获得最佳性能。

    WordPress懒加载的优缺点

    如果您仍然想知道是否应该在WordPress中实现图像延迟加载,以下是该功能的优缺点:

    优点:

    • 减少带宽使用,降低托管成本。
    • 提高网站速度,使访问者的浏览体验更好。
    • 提升移动体验。
    • 优化最大内容绘制分数
    • 改进SEO工作,提高您网站的搜索排名。

    缺点:

    • 导致内容缓冲,影响加载速度。
    • 减慢快速滚动。

    为什么要做图像懒加载?

    延迟加载您的WordPress图片可以加快您的网站速度并提供更好的用户体验。

    没有人喜欢慢速网站。事实上,一项性能研究发现,页面加载时间延迟一秒会导致转化次数减少7%,页面浏览量减少11%,客户满意度降低16%。

    网站速度研究报告

    任何搜索引擎也不喜欢加载缓慢的网站。这就是速度越快的网站在搜索结果中排名越高的原因。

    与其他网络元素相比,图像在您的网站上加载所需的时间最长。如果您在文章中添加大量图片,那么每张图片都会增加您的页面加载时间。

    处理这种情况的一种方法是使用CDN服务,例如又拍云CDN。CDN将让用户从离他们最近的Web服务器下载图像并降低网站加载速度。

    但是,您的图像仍将被加载并影响整体页面加载时间。为了解决这个问题,您可以通过在您的网站上实现延迟加载来延迟图像加载。

    如何为您的WordPress添加懒加载

    与许多其他网站性能问题一样,WordPress延迟加载也是可以通过插件来解决。 实际上,WordPress插件库有许多插件可用于懒加载图像和视频。 这样的插件林林总总,我们从中挑了五个可以显着提高网站性能的插件。 如果您已准备好实施懒加载,可以考虑这五个插件。

    图像和视频真的会让网站变慢吗?

    首先,在将任何图像上传到WordPress之前,请确保已经执行了优化(关于图片体积优化,可以参考文章《如何做到Google PageSpeed Insights测试满分/100分》里面的图片优化章节)。

    我们需要一个基线分数,以便可以看到添加图像和视频的对网站加载速度的影响。 如果开始就没有问题,就没有解决问题的必要。 为了测试我在测试主机上安装标准的WordPress,并启用了默认主题TwentySixteen,且没有启用优化插件或缓存等技术。

    以下截图是在添加任何图片或视频之前,使用Pingdom(查阅更多网站测速工具)对网站进行速度测试的结果。

    no-images-or-videos

    不添加任何图片或视频网站测速

    正如您所看到的,页面非常小,只有不到155 kb,并且在不到半秒的时间内加载。 如果网站加载包含大型图片文件和嵌入式YouTube视频,测速结果将会如何?

    no-lazy-load

    不使用懒加载插件执行网站测速

    在测试网站添加图片和视频后,我们可以看到页面体积到了1.7 MB,页面加载时间增加到1.3秒。 我们可以看到添加图像和视频后使页面体积变大,并大大降低了页面加载速度。

    1. 升级到WordPress 5.4或更高版本

    WordPress 5.4及更高版本默认包含延迟加载图像。将您的WordPress更新到最新版本将自动启用延迟加载。

    尽管是最简单的方法,但它不允许您配置要延迟加载的图像。因此,您的网站可能会过度使用该功能,从而表现出上述缺点。

    另一个需要考虑的因素是每个 WordPress 版本中延迟加载功能的不同性质。最近,WordPress发布了WordPress 5.9进行了改进,以解决旧版本的大型内容绘制分数不佳的问题。

    这意味着在旧WordPress版本上运行的网站不会获得与使用WordPress 5.9相同的好处。

    2.通过浏览器启用本机懒加载

    Chrome、Firefox和Opera等流行浏览器支持原生图像懒加载。您只需将<img loading= “lazy”>加载属性添加到目标图像和视频即可自动启用它。

    在原生WordPress延迟加载中,loading属性支持这三个值:

    • Auto ‒ 触发默认的延迟加载,这与不包括加载属性相同。
    • Lazy ‒ 分配资源的加载,直到每个资源都达到与视口的指定距离。
    • Eager ‒ 页面加载后立即加载所有资产,无论其位置如何。

    以下是如何使用它的示例:

    <img src=”image-name.png” loading=”lazy” alt=”alt attribute” width=”200″ height=”200″>
    <img src=”image-name.png” loading=”lazy” alt=”alt attribute” width=”200″ height=”200″>
    <img src=”image-name.png” loading=”lazy” alt=”alt attribute” width=”200″ height=”200″>

    此方法非常适合延迟加载某些图像,为每个图像提供一个加载属性,指示它们在视口中出现的时间。但是,延迟加载单个图像可能需要一些时间,尤其是在您的网站有大量媒体文件的情况下。

    3. 使用懒加载插件提高页面加载速度

    这次我们将对五个WordPress延时加载插件BJ Lazy Load,Lazy Load XT,a3 Lazy Load和Lazy Load(Lazy Load for Videos)进行测试。 让我们来看看每个插件变现如何。  当你尝试使用WordPress延迟加载插件时,一定要做一个前后测试,以确保能够达到你预期的结果。

    1. BJ Lazy Load

    BJ Lazy Load是一个非常受欢迎的懒加载插件。目前它在超过9w+个启用安装,获得4星评分。

    bj-lazy-load-plugin-wordpress

    WordPress延时加载插件-BJ Lazy Load

    该插件安装和设置都非常简单。只需通过“插件-安装插件”搜索该插件,并安装启用。启用后,通过“设置 ”>“BJ Lazy Load”即可进入插件设置界面。默认情况下会选择所有延迟加载选项,除非您在启用插件后,网站前端遇到问题,否则您无需对插件执行过多的设置。

    此插件提供了一个选项,其他两个选项都无法为图像添加URL,以用作延迟加载的图像和视频的占位符,直到下载实际的图像和视频资源。当然,如果您使用此选项,您将需要使用非常小的文件而不是高分辨率图像。

    为了页面美观不破坏页面整体,建议您创建一个与您的网站背景颜色相同的纯色图像,并将其保存为png格式。

    您还可以指定排除延迟加载的HTML类。然后,您可以将该类应用于您希望从延迟加载中排除的任何图像或视频。最后,您可以设定懒加载图片和视频下载的时机(即触发图片和视频离下载渲染的目标离当前可视窗口位置值)

    在使用了懒加载插件BJ Lazy Load后,页面加载速度变化如下:

    pingdom-bj-results

    使用延时加载插件BJ Lazy Load后的测速

    再经过多次测试统计后,结论是使用BJ Lazy Load插件可以让页面加载时间保持在300到400毫秒之间。

    虽然安装此插件后页面加载速度惊人,但页面的大小实际上还是增加。 怎么回事? 理论上,激活延迟加载后,页面大小也应该会减少,因为并非所有图像都是在初始页面加载时下载的。

    在对这种情况进行一些调查后,发现:

    WordPress默认的图片读取规则

    WordPress嵌入图像时会img元素添加srcset属性,向浏览器显示各种尺寸的图像。 浏览器根据不同的设备分辨率加载最合适的尺寸的图片。

    这意味着如果您上传一个非常大的图像文件,WordPress将自动为您的网站访问者提供该图像的多个尺寸版本,浏览器再根据设备分辨率选择其中一个最合适的图片Size。

    BJ Lazy Load改变WordPress图片读取规则

    BJ Lazy Load会覆盖WordPress默认的图片读取。 srcset属性已替换为与插件脚本一起使用的data-lazy-srcset属性。 然而,最终结果是,不是下载最佳尺寸版本的图像,而是下载和渲染全分辨率图像。

    这也就解释了前面的页面速度测试,为什么页面体积大小变化不大的现象问题。所以建议你使用此插件执行懒加载时,确保在上传图片之前对图片进行最优化,即上传较为合适分辨率的图片。

    2. Lazy Load XT

    Lazy Load XT在我们的测试中表现良好,是另一个值得考虑的WordPress延迟加载插件。 但需要注意的是这个插件不像BJ Lazy Load那么受欢迎,且已经有三年未更新了(鉴于技术支持保障及安全性考虑,不建议优先考虑此插件)。

    lazy-load-xt-plugin-wordpress

    WordPress懒加载插件-Lazy Load XT

    启用插件后,通过WordPress仪表盘“设置Lazy Load XT”配置插件。 你会注意到这个插件不仅仅提供延迟加载图片和视频支持,还提供压缩JS和CSS文件,使用Cloudflare CDN加载JavaScript和CSS库,并将脚本移动到站点页脚等功能。

    您可以使用其他选项来微调网站性能。 但由于我们本次只是测试延迟加载,此次仅采用了默认设置,并没有缩小或移动CSS和JavaScript,清除服务器缓存。最终通过Pingdom网站运行速度测试结果如下:

    pingdom-xt

    WordPress延时加载插件Lazy Load XT后测速

    启用Lazy Load XT插件后页面体积大小还是2 MB,页面加载时间不如BJ Lazy Load快,但相对于未启用懒加载,页面加载时间减少50%。

    快速浏览一下测试结果中的文件树,启用Lazy Load XT插件与我们在BJ Lazy Load中看到的那样。 启用这两个插件均不是加载图像的优化版本,而是下载并呈现图像的全分辨率版本。

    虽然插件没有产生与BJ Lazy Load相同的速度提升,但是Lazy Load XT支持眼球测试。 与BJ Lazy Load不同,Lazy Load XT使用的占位符是透明的。 因此,在加载图像和视频时,没有难看的空白框,您不必担心创建和上传占位符图像。

    3. a3 Lazy Load

    a3 Lazy Load是WordPress插件市场其中一个非常流行的WordPress延迟加载插件。 此插件目前已有超过10w+个有效激活安装,并且得到了4.5星评分。

    a3-lazy-load-wordpress-plugin

    WordPress懒加载插件-A3 Lazy Load

    启用插件后,在WordPress仪表盘新增了“设置>a3 Lazy Load”菜单。 出于测试目的,使用了插件的默认设置,但有一个例外,“Loading Background Colour ”选项将占位符颜色与网页背景的颜色相匹配。

    pingdom-a3

    安装启用A3 Lazy Load插件后的测速状况

    启用插件后再次测速,页面加载时间不到半秒。 考虑到此网页上包含的图像和视频数量,这样的效率还是非常不错的。

    测速结果对比

    毫无疑问,您会注意到页面大小和请求数量已大大减少。 是什么造成不同插件之间的这种戏剧性的差异? 我们通过Pingdom提供内容大小的快照,快速比较后发现了其中的答案。 首先,这是激活a3 Lazy Load时内容大小快照如下图所示:

    content-size-a3

    启用A3 Lazy Load插件的页面内容大小

    启用A3 Lazy Load插件后页面图像占用空间很小,超出150 kb一点点。 BJ Lazy Load和Lazy Load XT都生成了2.0 MB的页面大小。 以下是启用Lazy Load XT插件页面内容的组成分析截图。

    content-size-xt

    启用Lazy Load XT插件的页面内容大小

    启用A3 Lazy Load和Lazy Load XT延时加载插件后页面的脚本,HTML,CSS和其他内容大小几乎相同。但是后者的页面图像大小为1.86 MB – 而不是前者的仅仅150 kb。发生什么了?正如我之前提到的,WordPress自动提供各种尺寸的图像,浏览器根据设备屏幕分辨率呈现不同尺寸的图像版本。

    BJ Lazy Load和Lazy Load XT都会覆盖WordPress默认的读图规则并最终提供全分辨率图像。但是,a3 Lazy Load保留了默认的WordPress读图规则,传送的图像文件要小得多。

    奇怪的是,尽管页面大小不同,但激活BJ Lazy Load时网站加载速度比激活a3 Lazy Load时加载速度快。安装了每个插件后,对该站点进行了多次测试,以确保测速结果不是例外情况。最终将差异归结为加载页面所需的HTTP请求数。乍一看,看起来BJ Lazy Load需要更多请求。但是,如果我们看一下文件树,我们才能看到实际所发生的事情。

    bj-file-tree

    启用Lazy Load插件的Data URIs

    激活了BJ Lazy Load的站点文件包含大约20个以 data:image/gif 开头的请求。 这些是数据URIs而不是HTTP请求。 实际上,它们告诉浏览器在本地创建一个gif,而不是从服务器请求那个gif。 因此,BJ Lazy Load实际上只需要17个HTTP请求来构建页面而不是a3 Lazy Load所需的27个。 这就解释了为什么页面加载速度为什么可以做到那么快。

    Lazy Load XT采用了类似的策略,但仍需要比BJ Lazy Load插件更多的请求,这就解释了为什么它不能产生完全相同的结果。

    4. Lazy Load

    推荐的第四个插件是Lazy Load,这是知名的WP Rocket团队开发的免费插件。 该插件目前已经有4w+的激活安装,并且获得了4星评分。 如果您正在寻找一个速度很快且简单WordPress延迟加载方案,这个插件是一个很好的选择。

    Lazy-Load-wp-rocket

    由WP Rocket开发的WordPress懒加载插件-Lazy Load

    此插件适用于缩略图,文章内容或小部件文本中的所有图像,头像和表情符号。 这个插件的最大优点是没有使用JavaScript库,例如jQuery,脚本大小不到10 KB。 没有配置选项,只需安装插件,延迟加载即可实现。

    5. Lazy Load for Videos

    如果您只需要延迟加载视频,Lazy Load for Videos 插件即可。 虽然上面的一些插件也支持视频延迟加载,但对于视频内容来说Lazy Load for Videos是一个很好的解决方案。

    lazy-load-for-videos-plugin

    Lazy Load for Videos plugin

    6. WP Rocket

    我们建议使用WP Rocket插件在 WordPress 中延迟加载图像。它是市场上最好的WordPress缓存插件,可让您轻松打开图像延迟加载。

    除此之外,它还是一个非常强大的插件,可以帮助您优化网站速度,而无需了解复杂的技术术语。

    开箱即用,他们所有的默认推荐缓存设置将大大加快您的WordPress网站。

    要启用图像延迟加载,您只需选中几个框即可。您甚至可以为视频启用延迟加载,这将进一步提高您的网站速度。

    WP Rocket设置界面

    有关更多详细信息,请参阅有关如何在WordPress中正确安装和设置WP Rocket的指南

    7. Optimole

    此方法使用免费的Optimole插件。它是最好的WordPress图像压缩插件之一,可让您轻松启用图像延迟加载。

    如果您每月有超过5,000名访客,那么您将需要高级版

    首先,您需要安装并启用插件。转到媒体»Optimole,然后您需要注册一个API密钥。

    Optimole API申请

    只需单击“Register & Email API key”,它就会通过电子邮件发送给您。

    然后,输入您的API密钥并单击“Connect to Optimole Service”。

    Optimole服务连接

    之后,单击“Setting”选项卡。

    在这里,您可以确保启用了“Scale images and & Lazy load”设置。这将根据访问者的屏幕尺寸生成图像并提高加载速度。

    根据访问者的屏幕尺寸生成图像

    接下来,单击“Advanced”菜单选项并选择“Lazyload”。

    在此屏幕上,有一些不同的设置可让您自定义图像延迟加载的方式。

    首先,您可以调整“Scale images and & Lazy load”设置。这将阻止延迟加载文章或页面顶部的图像,因此折叠上方的图像将始终显示。

    阻止延迟加载文章或页面顶部的图像

    如果您希望每个图像都延迟加载,您可以将其设置为0。

    接下来,您可以启用“Scale Images”开关。

    将图像缩放到访问者的屏幕大小

    这会将图像缩放到访问者的屏幕大小,并使您的页面加载速度更快。

    之后,您可以打开“Enable lazyload for background images”设置。

    延迟加载您的背景图片

    这将延迟加载您的背景图片,这可能是您网站上一些最大的图片。

    您可以启用的另一个设置是延迟加载嵌入式视频和 iframe。如果您有很多嵌入的视频内容,那么您需要启用此设置。

    延迟加载嵌入式视频和 iframe

    这将加载占位符图像代替视频。当它被点击时,完整的视频将加载。

    您可以继续自定义这些设置,并查看最适合您的网站和图像的设置。

    在退出插件设置之前,请确保单击“保存更改”按钮。

    懒加载对SEO的影响

    无论你最终使用哪个插件进行WordPress延迟加载,都要考究到对SEO的影响。需要确保以下两件事:

    1. 确保搜索引擎仍然可以抓取延迟加载的图片。 您可以使用Google Search Console中抓取菜单下的“Fetch as Google” 工具进行检查。其实如果可以在源代码中看到图像内容,那么很可能就没问题。
    2. 确保懒加载图片上使用alt,因为这对搜索引擎图片搜索排名很重要

    WordPress延迟加载技巧

    充分利用延迟加载的关键是正确使用它。以下是在您的WordPress网站上执行延迟加载的一些技巧:

    • 不要延迟加载折叠上方的图像。由于放置在页面顶部的图像在加载时可见,因此延迟加载它们没有任何好处。
    • 选择适当的占位符。我们建议使用纯色、主色或低质量图像作为图像的占位符。
    • 添加图像加载的缓冲时间。这样,您的图像就可以在进入访问者的视口之前准备就绪,从而消除任何等待时间。
    • 定义图像容器的尺寸。这样做将有助于避免突然的布局变化,使您的网页在加载时看起来整洁。
    • 仅在长页面上实现延迟加载。长页面包括那些需要超过两个卷轴才能到达末尾并且首屏下方有超过五个图像的页面。

    小结

    那会给我们留下什么?所有这四个选项都通过延迟加载图像和视频来提高页面加载速度。选择哪个最好取决于个人偏好以及如何在将图像上传到WordPress网站之前准备图像。

    • 如果在上传前没有对图像进行任何优化 – 建议使用a3 Lazy Load,因为该插件内置图像优化功能。
    • 如果在上传前优化图像且是个懒人,那么BJ Lazy Load和Lazy Load比较适合。
    • 如果在上传前优化图像,并希望有额外的选项给到你配置CSS和JS资源发送处理,那么建议你选择Lazy Load XT。

    延迟加载只是一种可用于优化WordPress网站的技术。但是,如果您使用大量图像和视频,它可能会对网站速度产生深远影响。尽管如此,一旦您实施了延迟加载,您可以考虑并实施几种其他技术来提升网站性能。关于WordPress延迟加载解决方案?或者你有更好的建议,欢迎留言交流。

    除此之外,WordPress要获得更好的性能,我们其实还有很多事情可以做,比如CDN加速WP缓存CSS和JS等文件极简化必要的Gzip压缩等等。要知道您的WordPress网站的性能如何,你可以通过一些专业的网站测速工具进行全面的检测,然后有针对性地进行优化。如果你能够做到Google PageSpeed Insights测试满分(其实90分以上),网站就很OK了。

  • 通过缩放图像以提高WordPress网站性能

    如何缩放图像

    网站速度对其成功至关重要,因为47%的访问者可能会离开加载时间超过两秒的网站。

    虽然有几个因素会影响您的网站性能,但图像需要特别注意。除了使用适应不同屏幕尺寸的图像外,您还应该提供缩放图像。

    提供缩放图像涉及通过将图像重新调整为完美尺寸来优化图像——不要太小,也不要太大。使用正确缩放的图像将对网站速度和性能产生积极影响,从而改善您网站的SEO(搜索引擎优化)。

    本文将解释如何在您的WordPress网站上提供缩放图像。我们还提供了插件推荐,以帮助您自动提供缩放图像。

    什么是缩放图像?

    缩放图像是经过调整以适合网站所需的确切尺寸的图像。

    如果您使用小图像填充较大的区域,则放大时会变得模糊。另一方面,如果你使用过大的图像,浏览器会缩小它们以适应给定的尺寸,但图像尺寸会保持不必要的大。

    缩放图片对比

    例如,如果您将500 x 500像素的图像用于50 x 50像素的缩略图,则浏览器必须先下载并缩小图片,然后才能将其显示给访问者。此过程效率低下,并且会减慢网站加载时间。

    但是,如果您通过提供缩放图像来优化图像,则不会出现此问题。

    如何提供缩放图像?

    现在是时候学习如何在您的WordPress网站上正确提供缩放图像了。有两种方法可以做到这一点——手动或使用插件。本节将向您展示如何手动缩放图像。

    步骤 1-分析网站

    如果您想在完全优化整个媒体库之前尝试使用少量图像,请尝试缩放在您网站的多个页面上重复出现的图像。例如,网站徽标或标题图像。

    首先,您需要在网站上找到需要重新缩放的图像以及要使用的适当尺寸。为此,我们将使用GTMetrix

    1. 打开GTMetrix并输入您的WordPress网站URL。单击Test Your Site按钮。

    GTMetrix

    2. 完成网站分析后,转到“Structure”选项卡并单击“Properly size images”部分。

    Properly size images

    3. 本部分将显示您网站中的哪些图像需要优化。Potential Savings列将显示提供缩放图像后的潜在节省。保存图像的URL以备后用。

    图像优化版本

    步骤 2-使用检查工具找出最大显示尺寸

    WordPress已经包含一个名为srcset的用于图像优化的本机功能,它可以使您的图像具有响应性。

    srcset为上传到站点的每个图像创建多种尺寸。例如,如果您上传2000 x 2000像素的图片,WordPress会自动创建其他几种尺寸的副本,例如:

    • 中等尺寸– 400 x 400 像素
    • 缩略图– 200 x 200 像素

    然后,它向浏览器提供这些不同的尺寸,浏览器只会下载最优化的尺寸。

    但是,完全依赖 srcset并不能像提供缩放图像那样显着提高站点性能。为了进一步优化您的WordPress网站,仍然需要找出显示图像的最大尺寸。

    例如,如果最大显示尺寸为500 x 500像素,则无需上传2000 x 2000像素的图像。因此,要找出图像的最大显示尺寸,请使用检查工具

    1. 在Chrome中,右键单击图像并单击Inspect。如果您使用Firefox,请选择Inspect Element,或者在Edge中选择Developer Tools。在本例中,我们将使用Chrome。

    2. DevTools面板将显示在浏览器窗口的右侧在那里,图像代码将突出显示。将鼠标悬停在代码上以查看图像的Rendered sizeIntrinsic size

    DevTools查看图片属性

    3. 记下Rendered size,因为它是最大显示尺寸。同时,Intrinsic size是图像的实际尺寸,是用户浏览器下载的尺寸。

    浏览器加载图片实际尺寸

    步骤 3-重新缩放图像

    下一步是重新调整大小不正确的图像。有多种方法可以做到这一点:使用图像编辑器、WordPress媒体库或媒体设置。让我们看看他们中的每一个。

    通过图像编辑器

    在WordPress网站中缩放图像的第一种方法是使用图像编辑器。有大量可用的在线和离线图像编辑器工具。

    用于编辑图像的离线工具的示例包括PhotoshopGIMP。在本教程中,我们将使用在线图像编辑器PicResize

    1. 打开PicResize并选择From URL

    PicResize

    2. 粘贴您要编辑的图像的URL,然后单击Continue to Edit Picture

    3. Select a new size for your picture选项下有一个下拉菜单。选择Custom Size

    自定义图片尺寸

    4. 对于新的图像尺寸,根据检查工具建议的渲染尺寸输入WidthHeight

    5. 向下滚动并点击I’m Done, Resize My Picture! 按钮。

    图片保存下载

    6. 通过单击Save to Disk来保存图像。立即执行,因为PicResize会在20分钟后自动删除图像。

    PicResize自动删除图片

    7. 通过删除文件名开头的rsz_将图像重命名为其原始名称。

    通过WordPress媒体库

    要使用此方法提供缩放图像,您将使用WordPress媒体库裁剪图像。这样做的方法如下:

    1. 在WordPress仪表盘上,转到文章选项卡。

    2. 找到包含您要重新缩放的图像的文章,然后点击编辑

    WordPress图片编辑

    3. 在文章上,单击要缩放的图像。选择替换->打开媒体库

    编辑文章图片

    4. 将出现一个媒体库弹出窗口。在那里,导航到右列,然后单击编辑图像链接。

    WP编辑图片入口

    5. 在Scale Image部分下,您将看到原始图像的大小。在其下方的字段中输入新的缩放尺寸 – 基于上一步中的Rendered size。请注意,当您键入水平尺寸时,垂直尺寸会自动调整。单击Scale

    WP修改图片尺寸

    图像现在已成功缩放。

    通过管理媒体设置

    最后一种方法是通过直接调整媒体设置来缩放图像:

    1. 在WordPress站点仪表盘上,导航到Settings -> Media

    自定义WP图片生成尺寸

    2. 您将看到“Media Settings页面,其中设置了默认图像尺寸。它包括中等的尺寸,以及缩略图设置

    3. 设置每个图像尺寸的最大宽度和高度。设置首选图像尺寸后,单击保存更改按钮。

    这些设置将提示 WordPress 自动缩放您将来上传的图像。

    步骤 4-替换图像

    要手动缩放图像,您还必须替换现有图像。在这个例子中,我们将使用一个名为Enable Media Replace的WordPress插件。

    1. 从插件菜单安装并启用插件Enable Media Replace。

    2. 导航到Media -> Library并将布局从Grid更改为List

    多媒体库显示方式

    3. 将鼠标悬停在要替换的图像上,然后选择Replace Media

    WP替换图片

    4. 单击Choose File按钮以选择您保存的缩放图像。

    替换图片上传

    1. 设置ReplacementDate选项,然后单击Upload

    替换图片方式

    对于Replacement Options ,如果缩放的版本使用相同的格式,请选择Just replace the file 。同时,对于Date Options,建议保留原来的日期。

    5个提供缩放图像支持的插件

    现在您已经学会了如何手动缩放图像,让我们来看看如何使用 WordPress 插件来做到这一点。

    虽然手动过程允许更高的精度,但这种方法可以更轻松、更快速地提供缩放图像,因为插件将自动执行该过程。

    以下是我们挑选的五个在WordPress中提供缩放图像的最佳插件。

    1.Smush

    Smush

    Smush是用于WordPress图像优化目的的最受欢迎的插件之一。它有助于在不影响图像质量的情况下调整图像大小和压缩图像。

    该插件有助于在您的WordPress网站上提供缩放图像,具有以下功能:

    • 批量压缩 – 一次为多达50张图像提供高质量的图像压缩和优化,以帮助节省时间。
    • 尺寸不正确的图像检测– 查找会降低站点速度的未优化图像。
    • 指定目录压缩 – 压缩位于WordPress媒体库之外的目录中的图像。这包括来自其他WordPress插件和主题包的图像,以便您可以在整个站点上有效地提供缩放图像。
    • 内置懒加载– 仅提供网站访问者正在查看的图像,同时延迟页面下方的其他图像。懒加载功能有助于显着提高网站速度,尤其是在网站有大量图像的情况下。
    • Smush配置– 只需单击几下即可保存您首选的Smush配置设置并将其应用到站点,从而改进您的工作流程。

    Smush的免费版本提供了出色的工具来在WordPress网站中提供缩放图像。它优化无限图像,只要每个图像大小不超过5MB。

    同时,高级计划具有许多附加功能,例如与免费版本相比优化速度提高200%以及保持EXIF数据完整的选项,这对于摄影师来说是理想的选择。

    2.Optimole

    Optimole

    Optimole是另一个在WordPress中提供缩放图像的优秀插件。设置完成后,它将自动调整图像大小以适应各种屏幕尺寸。

    借助以下工具,使用Optimole缩放图像非常简单:

    • 基于格式的优化– 根据访问者浏览器支持的格式优化无限图像。例如,如果访问者使用支持WebP的浏览器,Optimole会将图像文件转换为WebP。
    • 水印添加– 自动为图像添加水印。这对于保护图像免遭未经授权的使用非常有用,特别是如果您打算在网站上上传原始图像,例如您自己的插图或照片
    • 为较慢的连接降级质量– Optimole在检测到较慢的网络时会将图像大小减少到多达40%。
    • 云库支持– 将您的站点图像保存在Optimole Cloud上,这将有助于节省服务器存储空间并在多个Optimole连接的网站之间交叉共享图像。
    • 视网膜支持——检测视网膜屏幕并在适用时自动加载视网膜图像。

    使用Optimole的免费计划,为每月最多5,000名访问者的WordPress网站缩放图像。要在流量较高的网站上使用它,必须订阅高级计划。

    3. EWWW Image Optimizer

    EWWW Image Optimizer

    EWWW Image Optimizer是一种图像优化工具,可帮助您在WordPress网站上缩放图像。

    通过使用EWWW Image Optimizer的一系列出色功能来提供缩放图像,例如:

    • 无限文件大小优化– 优化所有大小的图像。如果您想优化比EWWW Image Optimizer测试过的尺寸更大的图像,只需联系他们。
    • 批量优化– 通过优化单个页面上的所有图像(包括媒体库目录之外的图像)来更有效地工作。
    • 删除元数据——从不必要的数据中去除图像。
    • 自适应转换——EWWW图像优化器支持JPG、PNG、GIF和WebP图像格式。它的智能转换会自动检测最佳图像格式,例如,将PNG转换为JPG或WebP格式(如果适用)。
    • 与其他插件的兼容性 – 该插件与数百个 WordPress 插件和主题兼容,例如Perfect Images Retina,可在上传过程中自动优化视网膜图像。

    EWWW Image Optimizer的核心插件是免费的,但付费计划提供更强大的功能。他们可以处理多个网站上的图像优化,并增加带宽限额。

    4.ShortPixel

    ShortPixel

    Shortpixel通过提供高质量的图像压缩来有效地提高WordPress网站的性能。

    该插件将通过使用以下功能来帮助提供缩放图像:

    • 自动调整图像大小– 在您上传图像时自动调整图像大小,以实现更有效的工作流程。
    • 光泽优化——这种类型的图像压缩提供一流的图像质量,但可能会导致页面加载速度略有下降。这对摄影师很有用,因为它有利于图像质量而不是页面速度。
    • 保留或删除 EXIF 数据– 非常适合摄影师仅提供所选图像的必要数据,从而优化网站性能。
    • 跳过优化的图像——ShortPixel不会过度优化站点图像,因为它会跳过任何已经优化的图像。
    • 批量优化– 只需单击一下即可优化媒体库选项卡或其他站点目录中的图像。

    它的免费版本每月优化多达150张图像。同时,其付费版本包括具有各种图像配额的月度和一次性计划。此外,ShortPixel为非营利组织提供免费的优化积分。

    5.Perfect Images

    Perfect Images

    Perfect Images有助于优化WordPress的视网膜显示图像。该插件的功能包括:

    • 高清缩放图像——自动生成视网膜图像,为超高分辨率屏幕提供优化图像。
    • 媒体库视图– 更容易查看需要将哪些图像转换为视网膜图像。对于具有大量图像的网站特别有用。
    • 缩略图再生– 帮助为每次图像更改重新生成缩略图。这可以批量完成以节省时间。
    • 图像阈值控制——WordPress可能会自动调整大图像的大小,而视网膜图像会故意在分辨率和大小上保持较大。Perfect Images可让您通过禁用图像阈值来控制此功能。
    • 图像替换– 使用视网膜版本快速轻松地替换图像。

    除了免费计划外,这个WordPress插件还提供付费版本,支持延迟加载、自动调整站点媒体库中的图像大小,并可在多个网站上使用。

    小结

    提高WordPress网站性能的最佳方法之一是提供缩放图像。这意味着调整站点图像的大小以适合放置它们的区域的确切尺寸。

    优化图片可以显着改善您网站的加载时间和在搜索引擎结果中的排名,从而增加网站流量并降低跳出率

    此外,在WordPress网站中提供缩放图像并不难。您可以手动完成,也可以使用 WordPress 插件。

    如果您选择遵循手动方法,则步骤包括:

    1. 分析网站——在网站上找到需要重新缩放的图像。
    2. 找出图像的最大显示尺寸——使用检查工具找出图像的最大显示尺寸。
    3. 缩放图像——通过使用图像编辑器或通过媒体设置指定最大图像尺寸,将图像缩放到适当的尺寸。或者,通过WordPress媒体库裁剪图像。
    4. 替换原始图像– 用正确缩放的图像替换现有图像。

    如果您更喜欢使用更实用的方法提供缩放图像,请使用插件。这样做会自动在WordPress网站中提供缩放图像,这样您就可以专注于其他重要的网站方面。

  • 如何清除WordPress网站缓存

    如何清除WordPress网站缓存

    拥有一个快速加载的网站对于用户体验和SEO(搜索引擎优化)至关重要。具有优化速度的网站往往具有较低的跳出率,从而导致更高的参与度和转化率。谷歌也偏爱快速网站,并在搜索结果页面上排名更高

    从编码标准到托管服务提供商,许多组件都会影响网站速度。因此,有很多方法可以提高网站性能,而Web缓存是最有效的方法之一。

    Web 缓存存储站点数据的副本以供将来请求。Web缓存不是从服务器下载原始数据,而是将这些缓存文件提取给您的网站访问者。因此,您的内容显示得更快。

    但是,缓存文件可能会过期——这将阻止访问者看到您网站的更新版本。

    为了解决这个问题,我们将向您展示如何使用流行的WordPress插件清除缓存。我们还将包括删除浏览器缓存以获得更有效结果的步骤。让我们先解释一下什么是缓存以及它是如何工作的。

    解释WordPress缓存是什么以及它是如何工作的

    缓存是静态内容的临时存储位置,例如HTML、Javascript、CSS和媒体文件。

    每当您访问网站时,您的浏览器都会向该网站的服务器发送请求。服务器可能需要一两分钟来获取和显示请求的内容——网络缓存使这个过程更快。

    Web 缓存下载站点的静态内容并将其存储为缓存文件。因此,您的浏览器可以向服务器创建更少的请求,因为它已经有缓存的内容。

    Web缓存有两个主要系统:

    • 客户端缓存——也称为浏览器缓存,这种类型的缓存将静态内容存储在本地存储中。当用户重新访问网站时,它会加载得更快,因为缓存的版本已经存储在浏览器缓存文件夹中。
    • 服务器端缓存——具有与客户端缓存类似的概念。但是,它使用服务器来存储网站的缓存数据。服务器缓存可以存储来自多个数据库的各种站点数据,使其成为高流量网站的绝佳解决方案。

    总而言之,Web缓存通过存储网站的静态版本来减少对服务器的请求,从而提高网站性能。

    它还减少了您的网络资源,因为处理更少的请求需要更少的带宽,这可以使资源有限的网站受益。

    清除WordPress中的缓存

    有时您更改和调整您的WordPress网站,但您的内容没有在前端更新。这可能是因为您的WordPress服务器仍在显示页面的缓存版本。

    幸运的是,清除WordPress缓存通常可以解决此问题。当您的网站缓存为空时,缓存系统可以存储更新的数据并将其显示给您的访问者。

    清除WordPress网站缓存的最简单方法是安装插件。以下部分将说明如何使用四个流行的WordPress缓存插件清除缓存,并展示如何在您的域指向Cloudflare时清除缓存。

    使用LiteSpeed清除缓存

    使用LiteSpeed清除缓存

    使用LiteSpeed Cache for WordPress (LCWP) 插件来有效管理缓存的存储和使用方式。这个缓存插件使用LiteSpeed服务器缓存来改善站点加载时间,并带有LiteSpeed独有的功能。

    LiteSpeed Cache插件提供了多种清除WordPress缓存的方法。从根据特定条件设置自动缓存清除到为计划清除包括特定网站URL。请按照以下说明进行操作:

    1. 安装并激活插件后,访问您的WordPress管理仪表盘。然后,转到LiteSpeed CacheLiteSpeed Cache控制面板
    1. 选择工具箱菜单,将出现LiteSpeed缓存工具箱窗口。 LiteSpeed缓存工具箱
    1. 您可以清除各种类型的缓存,从页面缓存到CSS/JS缓存。选择您要执行的缓存清除类型。 LiteSpeed清除缓存选项
    1. 如果您想完全清除WordPress缓存,请选择Purge All。请注意,它不会删除您WordPress网站上的关键数据——您可以继续清除缓存。
    2. 但是,如果您只想清空站点某些部分的缓存,请向下滚动到“Pure By”部分。从那里,使用类别、标签或URL输入您的内容。 按类别清除LiteSpeed缓存

    除了访问您的WordPress仪表盘之外,您还可以通过访问它来清除特定页面的缓存——请记住,您需要以管理员身份登录。只需将鼠标悬停在管理栏上的LiteSpeed图标上,然后选择Purge this page

    快速清除LiteSpeed缓存

    使用WP Super Cache清除缓存

    使用WP Super Cache清除缓存

    WP Super Cache使用三种缓存模式修改WordPress站点中的缓存系统:WP cachingSimpleExpert。

    Expert和Simple方法服务于超级缓存文件,因此它们是高流量网站的绝佳解决方案。唯一的区别是专家方法涉及重写.htaccess文件中的规则以获得更快的性能。同时,WP缓存方法缓存登录用户,例如在您的网站上发表评论或存储个人信息的访问者。

    这个WordPress缓存插件还可以通过单击刷新缓存文件。只需按照以下步骤操作即可:

    1. 从您的WordPress管理后台,转到设置-> WP Super Cache。 WP Super Cache设置
    1. 在WP Super Cache Settings页面中,向下滚动到Delete Cached Pages部分。然后,单击Delete Cache按钮。

    此外,WP Super Cache插件提供了广泛的缓存功能,其中最突出的功能是垃圾收集。用户可以设置缓存超时时间,系统会相应地清除缓存文件。为此,请按照以下说明操作:

    1. 转到设置 -> WP Super Cache -> Advanced。然后,向下滚动到Expiry Time & Garbage Collection过期时间和垃圾收集
    1. 根据需要设置缓存超时和间隔。

    如果您不经常更新您的WordPress网站,将其设置为3600秒将是理想的选择。但是,拥有大量动态内容的繁忙网站(例如电子商务网站)的所有者应将其设置为600秒,以防止性能下降。

    1. 接下来,单击Change Expiration以保存更改。 更改缓存过期时间
    1. 如果要禁用垃圾收集,只需将缓存超时设置为0秒

    使用W3 Total Cache清除缓存

    使用W3 Total Cache清除缓存

    W3 Total Cache是最受欢迎的缓存插件之一,以其定制和节省带宽的功能而闻名。该插件通过缩小、提要优化和HTTP压缩节省高达80%的带宽使用量。它提供多种缓存功能,包括浏览器、数据库和站点缓存。

    此缓存插件还附带有助于提高SEO性能的AMP支持。此外,用户可以使用其WP-CLI支持命令界面来执行各种任务,例如缓存清除和查询字符串更新。

    以下是使用W3 Total Cache清除WordPress缓存的方法:

    1. 安装此缓存插件后,访问您的WordPress管理后台并转到Performance -> Dashboard。 W3 Total Cache仪表盘
    1. 单击位于页面顶部的empty all caches 一键清除W3 Total Cache缓存
    2. 系统将开始清除您的WordPress缓存。结束后,您应该会看到此消息。 W3 Total Cache缓存清除成功提示
    1. 除了empty all caches按钮外,还有其他用于删除多种缓存类型的按钮,包括仅从数据库中清除Memcached缓存。只需单击按钮即可开始相应的操作。 从数据库中清除Memcached缓存

    使用WP Fastest Cache清除缓存

    如何清除WordPress网站缓存-1

    WP Fastest Cache是另一个流行的缓存插件,以其各种优化和缓存功能而闻名,例如缩小、缓存预加载和GZIP压缩。它带有一个直观的仪表板并使用mod_rewrite来提供最快的缓存解决方案。

    用户可以开启缓存超时,省去手动清缓存的麻烦。每当发布新页面或帖子时,该插件还可以自动删除所有缓存文件——这可以防止过时的数据显示在您的WordPress网站上。

    按照以下步骤使用WP Fastest Cache执行自动缓存清除:

    1. 从您的WordPress管理后台,导航到WP Fastest Cache。它将打开WP Fastest Cache Options页面。 WP Fastest Cache选项
    1. 勾选Cache System设置旁边的框。启用缓存后,该插件将定期清除您的缓存。 WP Fastest Cache缓存系统
    1. 如果您想在发布文章或页面时清除缓存文件,只需检查“New Post”“Update Post”设置。 WP Fastest Cache缓存清理规则设置
    1. 要启用更多功能,请继续并勾选每个设置的框。请务必单击提交按钮以保存更改。

    此外,还有一个手动删除WordPress缓存的选项:

    1. 转到WP Fastest Cache并选择Delete Cache选项卡。
    2. 从那里,按Delete Cache按钮。 手动清除WordPress网站缓存
    3. 同时,如果您刚刚编辑了CSS或JavaScript文件,请选择Delete Cache and Minified CSS/JS按钮。
    4. 在页面底部,您将找到Timeout Rules设置。只需单击Add New Rule即可设置到期时间。 缓存到期时间规则设置
    1. 将出现一个弹出窗口。在那里,您可以配置要缓存的页面或帖子的条件以及删除它们的频率。单击保存以添加规则。

    使用Cloudflare清除缓存

    使用Cloudflare清除缓存

    除了使用WordPress缓存插件外,您还可以使用Cloudflare清除缓存。这是一项内容交付网络 (CDN)服务,具有多种功能来提高您的网站性能,包括缓存控制、快速缓存清除和Web缓存保护。

    要使用此方法清除WordPress缓存,请将您的域指向Cloudflare

    如果您的WordPress主机没有自动为您设置Cloudflare,请按照以下步骤操作:

    1. 创建一个Cloudflare帐户
    2. 添加您的域名并等待系统识别您的DNS记录。
    3. 选择计划级别。
    4. 当Cloudflare提供所需的名称服务器时,只需复制值并从您的托管帐户仪表板更新您的名称服务器。

    将您的域指向Cloudflare后,请按照以下步骤清除WordPress缓存:

    1. 登录您的Cloudflare仪表盘并单击您的WordPress站点的域。 Cloudflare仪表盘
    1. 导航到Caching菜单并单击ConfigurationCloudflare缓存设置页面
    1. 选择您喜欢的清除缓存的方法。要清除所有缓存文件,请单击“Purge Everything”按钮。如果要选择特定页面,请选择Custom Purge并填写要清除的页面。 Cloudflare缓存清除两种方式

    清除浏览器中的缓存

    清除您自己的浏览器缓存也有助于解决加载和格式问题。它将删除过时的文件,允许您的浏览器获取您网站的新版本。这样做还可以修复与服务器相关的问题,包括502 bad gateway504 gateway timeout

    请记住,删除浏览器缓存也可能会删除您的浏览器数据,例如书签和设置首选项。因此,请务必从浏览器中导出数据,并在清除缓存后将其重新导入

    以下步骤将向您展示如何清除Google Chrome中的缓存。请注意,相同的步骤也适用于其他浏览器。

    1. 打开您的Chrome应用程序。
    2. 单击屏幕右上角的三点(⋮)菜单。
    3. 选择更多工具 -> 清除浏览数据
    4. 它将带您到一个页面,您可以在其中执行基本或高级缓存清除。 清除浏览器缓存
    1. 选择您喜欢的方法,设置时间范围,并根据需要选中相应的框。取消选中密码和其他登录数据选项以保留您的登录凭据。
    2. 最后,单击清除数据按钮

    小结

    缓存是让您的网站加载更快的好方法——它存储您网站静态内容的副本以供将来重用。但是,过时的缓存文件可能会阻止访问者在您的网站上看到新的更改。

    幸运的是,清除您的网站缓存可以解决这个问题。本教程向您展示了如何使用WordPress流行的缓存插件清除WordPress缓存。如果删除WordPress服务器缓存不能解决问题,请尝试删除浏览器缓存

    请注意,一旦缓存的文件被删除,浏览器和服务器将需要一些时间来再次下载它们——这可能会导致加载时间比以前稍长。

  • 如何合并WordPress网站外部JavaScript

    如何合并WordPress网站外部JavaScript

    加载缓慢的网站是一个巨大的问题,但是,有很多方法可以克服它。在众多解决方案中,您可以尝试在WordPress中正确合并外部JavaScript 。

    虽然解决方案可能很简单,但它会像魅力一样发挥作用。在本文中,我们将向您展示为什么必须在WordPress中合并外部JavaScript文件以及如何使用几个简单的步骤来完成。

    为什么必须合并外部JavaScript文件?

    您可能知道,当您请求一个HTML页面时,浏览器将发送一个对所有所需资源的查询。所有文件,包括JavaScript文件,都将从服务器获取并再次加载到浏览器中。

    在每个请求中,JavaScript文件会一起下载,但会按照它们在HTML中出现的顺序执行。虽然单独下载本身可能会减慢网站速度,但顺序过程可能会让您等待更多。

    JavaScript文件和CSS文件都是渲染阻塞资源——除非所有文件都完全加载,否则不会加载其他组件。由于这些文件通常位于网页的头部,因此可能会导致问题。

    为确保您是否遇到这些问题,您需要通过进行速度测试来检查您网站的性能。

    有许多网站,如PingdomGTMetrixGoogle PageSpeed Insights可以帮助您做到这一点。您所要做的就是放置您的网站链接,然后单击分析。

    以下是我们测试站点结果的示例:

    GTMetrix

    Google PageSpeed Insights 理想情况下,结果应该在绿色类别内(快速)。或者至少,确保您的网站不在红色类别中。如果发生这种情况,请立即采取行动。

    大多数情况下,如果找到超过五个JavaScript文件,您会收到警告。通过定位问题,您已准备好解决问题。

    HTTP/2

    实施HTTP/2等最新技术总是有益的。如果您的托管服务提供商支持它  – 您可能不需要合并文件,因为它支持并行下载。

    HTTP/2(超文本传输​​协议第2版)于2015年发布,是作为HTTP/1.1的增强版开发的,自1989年以来一直是在线通信的标准。新协议的增强旨在:

    • 提高页面加载速度
    • 启用并行下载
    • 启用多路复用
    • 压缩请求头
    • Head-of-line或包裹阻塞

    这个新版本有几种方法可以减少延迟,这会影响网站的整体性能。

    请记住,这个合并外部JavaScript文件的教程是为那些使用HTTP/1.1的人准备的。

    如何在WordPress中合并外部JavaScript文件?

    如前所述,在进行页面加载速度测试时,多个JavaScript文件会增加总渲染时间并触发警告。

    作为一种解决方案,您可以在WordPress中合并外部Javascript文件,将它们全部变成一个文件并删除其余文件。如果您复制并粘贴正确的脚本,则JavaScript组合文件将像单独的文件一样正常工作。

    虽然复制和粘贴的想法可能看起来很简单,但手工编码的工作具有挑战性。由于JavaScript的学习曲线很陡峭,因此粗心地执行这些任务将弊大于利。

    因此,您可以使用插件在WordPress中结合外部JavaScript,让您的生活更轻松。

    最好的插件之一是Autooptimize

    这个插件可以帮助您处理HTML、CSS或JavaScript文件的缩小任务。定期更新,超过900,000次活跃安装,强烈推荐此插件。

    虽然您可以免费使用它,但您可以获得其高级版本以获得更多功能:Autooptimize Pro Configuration ( $167 ) 和Complete Speed Optimization ( $671.74 )。

    Autooptimize设置

    安装并激活后,您可以转到WordPress仪表盘 -> 设置 -> Autooptimize。在JS、CSS & HTML菜单下,您可以启用Optimise JavaScript Code。之后,单击Save Changes。优化是自动的,因此您可以立即再次测试您的网页加载速度以查看改进。

    除此之外,如果要合并CSS文件,还可以启用Optimise CSS Code选项。如果您使用的是CDN,则可以启用所有选项,包括CDN选项。

    小结

    加载速度对于任何网站都非常重要。如果您在本部门遇到任何问题,请尽快尝试解决。

    您可以在WordPress中合并外部JavaScript文件,以加快您的网站加载速度。但是,它可能需要您手动处理代码。

    如果您想避免意外错误,建议使用插件来完成任务。Autooptimze是最好的WordPress插件之一。安装后,它将自动优化您的网站。