• 17630273926

完美100/100 Google PageSpeed Insights得分的7个步骤

作者:郑州云优化 / 2019-11-14 21:37 / 浏览次数:
完美100/100 Google PageSpeed Insights得分的7个步骤
要在用户体验和快速的Google PageSpeed Insights得分之间找到完美的平衡,可能会非常棘手。
我们花了数周的时间才能达到100/100的满分。
每个网站的公式都会不同–没有一种万能的方法。
准备破坏您的网站。如果您不这样做,则可能是您努力不足。
为此,我们做了七件事。
注意:我们所有的测试都是在暂存/开发站点上进行的,后来又迁移到了我们的实时网站上。我们的网站使用WordPress构建,并运行具有Salient主题的最新WordPress构建。
注意:我们所有的测试都是在暂存/开发站点上进行的,后来又迁移到了我们的实时网站上。
Google Page Speed Score
1.  DNS
我们使用Cloudflare,但不使用任何速度优化。
我们在测试中发现速度较慢。
如果您使用共享主机环境,那么Cloudflare可能会有所帮助。
但是特别是对于我们来说,使用专用服务器,最好关闭所有服务器。
如果您没有技能或时间来安装Cloudflare作为替代方案,则可以使用主机提供商,例如WP-Engine,Presslabs,Pantheon.io。它们带有内置的服务器缓存和CDN配置。
2.传递服务器响应时间
该指标为0.2秒。高于此的任何值,Google都会使您失望。
我们的网站在具有几个帐户的高规格专用服务器上运行。您在线上阅读的大多数内容都建议您切换到更快的WordPress主机(带有会员链接),这是最简单的方法,但是我还没有准备放弃我们自己的环境,至少没有尝试过。
有很多服务器管理员经验,因此我关闭了服务器上运行的所有不必要的服务,以帮助提高速度。但是,这并没有太大的区别。
我们注意到减少服务器响应时间的最大区别是切换到PHP7。并非所有主机都支持PHP 7,但幸运的是,由于我们托管自己的站点,因此可以。
在线混合报告显示,切换到PHP 7的速度提高了20%到50%。不管实际的百分比如何,我们都需要速度,并希望对其进行测试。
如果您不知道运行的是哪个版本的PHP,请安装此插件,然后您将在管理控制台的“概览”中看到它。
在继续之前,您需要检查站点是否兼容。幸运的是,您可以为WordPress下载一个PHP兼容性检查器插件,该插件可扫描您的代码并确定切换到PHP 7时遇到的任何问题。
结果显示了一些需要解决的问题,我们很快处理了这些问题。我们终于准备好切换到PHP 7。
为了进行切换,从WHM中访问“ Multi PHP Manager”,选择所需的站点并更改PHP版本。如果您无权访问WHM,请询问您的服务器管理员,但请确保您在测试/开发环境中进行操作-最好不要破坏生产网站。
PHP编码
3. CSS和JavaScript渲染阻止
首先,您应该定义CSS和JS文件的哪些部分对于渲染至关重要。此后,您需要通过将这些部分<head>内联在<style>and <script>标记中来将这些部分加载到HTML元素中  。
第二步涉及启用非关键元素的延迟加载或异步加载。例如,如果您使用网站上的弹出窗口(在用户登陆您的网站一段时间后出现),则应将弹出窗口的CSS和JS分开放置在另一个文件上,并按如下所述进行加载。( 通过使用以下代码段,可以延迟加载任何非关键CSS以及Google字体  。):
<noscript id =“ deferred-styles-number-1”>
      &amp; lt; link rel =“ stylesheet” type =“ text / css” href =“ https://fonts.googleapis.com/css?family=Do+Hyeon” /&amp; gt;
    </ noscript> <script>
    window.addEventListener('DOMContentLoaded',function(){
      var loadDeferredStyles = function(){
        var addStylesNode = document.getElementById(“ deferred-styles-number-1”);
        var replace = document.createElement(“ div”);
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(替换)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      如果(raf)raf(function(){window.setTimeout(loadDeferredStyles,0);});
      否则window.addEventListener('load',loadDeferredStyles);
    });
    </ script>
对于JavaScript文件,您可以简单地在标记中添加defer 或async 属性<script>。您可以在此处了解有关这些加载方法之间差异的更多信息。
完成此操作后,您将永远不会遇到样式文件中的渲染阻塞问题。
4.优化图像
几乎所有网站都有图像优化问题。有多种方法可以解决此问题。
按照Google的建议安装服务器插件。
使用PHP内置库ImageMagick
使用第三方API,例如Tinypng,ShortPixel或Kraken.io
5.缩小
有许多插件可以处理JS和CSS文件的缩小问题。我们最多看到的是自动优化和更好的WordPress缩小。
使用Autoptimize完全弄乱了网站和联系表格。网站上的Hero滑块和常规功能坏了。
简而言之,我们获得了不错的PageSpeed评分,但是该网站无法使用。
因此,我们选择了更好的WordPress Minify,它可以提供更好的控制,并使您可以选择如何处理每个JS和CSS文件。配置此过程耗时最长,必须四处移动脚本,检查站点是否正常运行,然后重新运行测试。
我们保留了所有更改的日志,并报告了每个更改以及对Google PageSpeed的影响。有太多要调整的变量,最好记录下来以衡量因果关系。每个站点都会有所不同,因此请针对您的特定网站进行微调。
6.不要成为插件Ho积者
如果您使用WordPress,Joomla等CMS,那么您绝对应该避免使用太多插件。
更多插件=较慢的网站。
去除任何脂肪。删除或禁用未使用的插件。您可以使用自定义编码进行细微调整,而不必安装加载2-3个JavaScript或CSS文件的怪物插件。
例如,如果您查看此资源,您会发现许多简单的调整,您只需复制和粘贴即可避免安装插件。
7.启用压缩
我们在服务器上启用了此功能,然后对.htaccess文件进行了更改以启用压缩。我们没有使用其他插件。
以下是htaccess文件的示例。您会注意到许多使用GZIP缓存的元素:
############## CACHING-GZIP ############
<IfModule mod_expires.c>
有效期至
过期默认值A2592000
<FilesMatch“ \。(txt | xml | js)$”>
过期默认值A2592000
</ FilesMatch>
<FilesMatch“ \。(css)$”>
过期默认值A2592000
</ FilesMatch>
<FilesMatch“ \。((flv | ico | pdf | avi | mov | ppt | doc | mp3 | wmv | wav | mp4 | m4v | ogg | webm | aac)$”>
过期默认值A2592000
</ FilesMatch>
<FilesMatch“ \。(jpg | jpeg | png | gif | swf | webp)$”>
过期默认值A2592000
</ FilesMatch>
</ IfModule>
<IfModule mod_headers.c>
<FilesMatch“ \。(txt | xml | js)$”>
标头集Cache-Control“ max-age = 2592000”
</ FilesMatch>
<FilesMatch“ \。(css)$”>
标头集Cache-Control“ max-age = 2592000”
</ FilesMatch>
<FilesMatch“ \。((flv | ico | pdf | avi | mov | ppt | doc | mp3 | wmv | wav | mp4 | m4v | ogg | webm | aac)$”>
标头集Cache-Control“ max-age = 2592000”
</ FilesMatch>
<FilesMatch“ \。(jpg | jpeg | png | gif | swf | webp)$”>
标头集Cache-Control“ max-age = 2592000”
</ FilesMatch>
</ IfModule>
<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng | X-cept-Encoding | X {15} |?{15} |-{15})$ ^((gzip | deflate)\ s *,?\ s *)+ | [X? -] {4,13} $ HAVE_Accept-Encoding
RequestHeader追加接受编码“ gzip,deflate” env = HAVE_Accept-Encoding
</ IfModule>
</ IfModule>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE“ application / atom + xml” \
“应用程序/ javascript”
“ application / json” \
“ application / ld + json” \
“ application / manifest + json” \
“ application / rdf + xml”
“应用程序/ rss + xml”
“ application / schema + json” \
“ application / vnd.geo + json” \
“ application / vnd.ms-fontobject”
“应用程序/ x-font-ttf”
“应用程序/ x-javascript”
“ application / x-web-app-manifest + json” \
“ application / xhtml + xml” \
“应用程序/ xml”
“字体/字体”
“字体/ opentype”
“图片/ bmp”
“ image / svg + xml” \
“ image / vnd.microsoft.icon” \
“图片/ x-icon”
“文本/缓存清单”
“文本/ css”
“文本/ html”
“文字/ javascript”
“文字/纯文字”
“文字/电子名片”
“ text / vnd.rim.location.xloc” \
“文本/ vtt”
“文本/ x组件”
“文本/ x跨域策略”
“文本/ xml”
</ IfModule>
<IfModule mod_mime.c>
AddEncoding gzip svgz
</ IfModule>
</ IfModule>
您可以从htaccess代码中看到,它有助于缩小网站呈现的所有内容。这包括JavaScript文件,CSS甚至网站图标。
图像通常是页面速度得分较低的主要原因之一,因此建议在移动设备视图中删除(或隐藏)对移动体验没有任何价值的任何图像。
结论
这些技术方面中的一些经常被忽略。另外,不要害怕改变周围的环境并设置自己以测试您网站上的几种代码变体。
如今,随着移动设备使用量的增加,实现高页面速度分数对于SEO至关重要。因此,推动自己获得神圣的100/100页面速度得分。完全值得。
此处有更多页面速度资源:
如何击败Google的移动页面速度基准
如何提高页面速度以获取更多流量和转化
如何进行快速彻底的页面速度审核
【郑州云优化】郑州SEO、网站建设、网站设计、服务器空间租售、网站维护、网站托管、网站优化、百度推广、自媒体营销、微信公众号
如有意向---联系我们
热门栏目
热门资讯
热门标签

网站建设 网站托管 成功案例 新闻动态 关于我们 联系我们 服务器空间 加盟合作 网站优化

备案号:ICP备*********号 网站地图/sitemap 

公司地址:河南省郑州市郑州云优化 咨询QQ:1774525808 手机:17630273926 电话:17630273926