石家庄网站建设 > 博客教程 > seo优化教程 >

石家庄网格优化建设

发布时间:2021-06-09

网站加载速度是整体用户体验的优先考虑因素,也是数百个SEO排名因素之一。事实是,如今人们没有耐心等待超过五秒钟的时间来加载页面。如果您的网站加载速度不够快,您将失去潜在的客户。
 
由于超过50%的在线流量来自移动设备,因此每个人都希望网站几乎是即时加载。考虑到这一点,在本文中,我将向您展示如何通过Google PageSpeed Insights工具针对台式机和移动设备的监视器反向链接获得100/100的评分。
 
动机
我们的网站已经非常快地加载,但是我们知道总有一种方法可以使它变得更好。
 
有一天,在使用PageSpeed Tool时,我注意到Google的网站在移动设备上的得分非常糟糕,为59/100。桌面版本的性能更好,为95/100。
 
LLlzIRg.png
也许他们应该使用他们的工具来改善网站,对吗?
 
这就是促使我们加快网站加载速度并证明您可以获得100/100的动力。这不是痴迷;它的目标是完美。
 
我们从87/100开始。
 
这是在实施我将要与您分享的一些技术之后我们得到的结果。
 
WWAYM7w.png
如何使页面加载更快
在开始显示我们遵循的确切步骤之前,让我告诉您,PageSpeed工具只是最佳Web性能实践的指南。它提供了有关优化网站页面加载速度的建议,并且要获得令人满意的结果取决于服务器环境的设置方式。
 
尽管其中一些步骤需要专业技术知识,但其他步骤则不需要。请注意,几乎可以使用任何内容管理系统(CMS)来遵循它们。
 
步骤1:优化图片
SA9EugY.png
PageSpeed Insights工具建议我们优化图像以通过减小文件大小来更快地加载。为了解决这个问题,我们做了两件事:
 
使用Compressor.io和TinyPNG等工具压缩所有图像。这些工具是免费的,在某些情况下可以将图像文件的大小减少80%以上,而不会降低图像的质量。
将图像尺寸减小到最小尺寸而不会降低图像质量。例如,如果我们要在我们的网站上以150x150px的尺寸放置图片,则该尺寸恰好是该图片在我们服务器上的尺寸。您所拥有的图像绝不应该超过其要渲染的图像,也不应使用CSS或HTML标签减小其尺寸。
我们下载了每个图像,然后对其进行手动压缩和调整大小。优化这些图像后,最好养成对上传到服务器的所有新图像进行优化的习惯。每个新图像都应进行压缩和调整大小。
 
 
Google还提供了下载已优化的图像的选项,您可以将其上传到服务器。您可以使用JavaScript和CSS进行相同的操作。
 
rPecTD4.png
步骤2:缩小CSS和JavaScript
zEeAoMe.png
Google现在告诉我们,我们必须缩小JavaScript和CSS文件。
 
缩小过程通过从CSS和JavaScript文件中消除不必要的空格,字符和注释来减小文件的大小。程序员在编码时通常会留下许多空格和注释。这些甚至可以使CSS和JavaScript文件的大小增加一倍。
 
HME9biO.png
为了解决这个问题,我们在服务器上安装了Gulpjs。该工具会自动创建一个新的CSS文件并删除所有空格。它还会为您进行的所有新更改自动创建一个新的CSS文件。就我们而言,它帮助我们将主CSS文件的大小从大约300kb减小到150kb。区别在于所有不必要的字符。有关如何删除空格的更多说明,请参阅Google指南。
 
如果您使用的是Wordpress,建议您安装插件Autoptimize。
 
您也可以从PageSpeed工具下载优化的文件。这是一个例子:
 
以下是我们在最小化CSS和JavaScript之后获得的结果。
 
V6BCd5T.png
步骤3:利用浏览器缓存
ZWX6fOV.png
对于许多网站运营商而言,利用浏览器缓存是最具挑战性的部分。
 
为了解决此问题,我们将每个静态文件从我们的网站移至CDN(内容交付网络)。
 
CDN是位于世界各地的服务器网络。它们能够缓存网站的静态版本,例如图像,CSS和JavaScript文件。CDN将网站内容的副本存储在其服务器上,当有人登陆您的网站时,静态内容是从距离他们最近的服务器中加载的。
 
例如,如果您网站的主服务器来自德克萨斯州,而没有CDN,那么来自阿姆斯特丹的访客将不得不等待服务器从美国一直加载网站。使用CDN,您的网站将从更近的位置加载给用户。在这种情况下,这是一个更靠近阿姆斯特丹的地方。因此,该网站将加载得更快。
 
这是GTmetrix关于CDN工作原理的直观表示。
 
M7cMb05.png
我们将所有图像,JavaScript和CSS文件移动到CDN上,仅将HTML文件保留在主服务器上。将您的图像托管在CDN上将极大地提高页面对网站访问者的加载速度。
 
完成此操作后,PageSpeed工具仍然令人讨厌地建议我们将浏览器缓存用于某些第三方资源。这是屏幕截图:
 
xpt5dQ1.png
我们通过用CDN上托管的一些静态映像替换了它们提供的计数器,解决了社交媒体脚本问题。我们没有使用第三方脚本来尝试从Twitter,Facebook或Google Plus访问数据来吸引关注者,而是自己托管了这些脚本并解决了问题。
 
比社交媒体脚本问题更令人沮丧的是,Google的Google Analytics(分析)代码正在减慢我们的网站速度。
 
i7MXiu9.png
为了解决Google Analytics(分析)脚本问题,我们做了一些相当困难的事情。由于我们不想从我们的网站上删除Google Analytics(分析),因此我们不得不寻找其他解决方案。
 
Google很少每年对Google Analytics(分析)代码进行超过一两次的修改。因此,Razvan创建了一个脚本,该脚本每八小时运行一次,以验证上次修改Analytics代码的时间。仅当发现新更改时,脚本才会再次下载Analytics(分析)代码。这样,我们可以在服务器上托管Google Analytics(分析)JavaScript代码,而无需每次访问都从Google的服务器上加载它。
 
如果未发生任何更改,则Google Analytics(分析)代码将从CDN上的缓存版本加载。
 
当Google再次修改其JavaScript代码时,我们的服务器将自动下载新版本并将其上传到CDN。我们将此脚本用于所有外部第三方脚本。
 
这是Pingdom Tools的屏幕截图,显示了如何从CDN加载所有内容,包括Google Analytics(分析)代码。从我们的服务器加载的唯一文件是主页文件,只有15.5 KB。消除所有第三方脚本可以极大地提高整体加载速度。
 
h9JmXjG.png
步骤#4:消除折页上方的渲染阻止资源
FMIAxXZ.png
消除渲染阻止是提高页面加载速度的最复杂部分之一,因为它需要更多的技术知识。我们必须处理的主要问题是将所有JavaScript代码从网站的页面底部的页眉和正文移至页脚。
 
如果您使用的是Wordpress,我上面建议的Autopmize插件应该可以帮助您完成此任务。检查其设置,然后取消选中“在<head>中强制JavaScript”并选中“内联所有CSS”。
 
步骤#5:启用压缩
zycbOoO.png
只需在您的服务器设置中即可实施启用压缩建议。如果您不是技术人员,可以要求技术支持团队为服务器启用GZIP压缩。
 
步骤#6:优化移动体验
移动体验就是要显示适用于所有不同类型分辨率的响应式移动版本,使用正确的字体以及拥有良好的导航系统。
 
RREZqKy.png
您可以使用Google Chrome浏览器测试网站在不同移动版本中的外观。点击右上角的汉堡菜单,然后点击“更多工具-开发者工具”。在左侧,您可以选择查看不同移动分辨率下的网站外观。
 
bR5sqwO.png
在我们的案例中,没有太多更改要进行。
 
结论
这些是我们要使用Google的Speed Tool使Monitor Backlinks得分100/100的最重要步骤。我们不仅优化了首页。我们还优化了一个内部页面,即免费的反向链接检查器。
 
ny2zaoB.png
您可以采取的三个最重要的行动来改善您的网站:
 
使用CDN(内容交付网络)。
解决渲染阻止问题。(避免在代码主体中使用JavaScript。您的JavaScript代码应放在文件的底部。)
优化图像大小并压缩它们。
您的团队是否为您的网站进行过此类项目?如果是这样,您的结果如何?

网站建设
Website
客户案例
Customer case
关于展为
About ZHANWEI
展为致力于网站建设与网络营销,微信营销,专业领域包括网站建设、网站seo优化推广、移动互联网营销、三网合一网站建设,微信营销小程序开发,与其他网站建设及系统开发公司不同,我们的整合解决方案结合了展为网络建设经验和互联网整合营销的理念,并将策略和执行紧密结合,且不断评估并优化我们的方案,为客户提供一体化全方位的互联网品牌整合方案!

扫码咨询

Copyright © 石家庄展为网络有限公司. 冀ICP备14018173号-6 Copyright 2010-2020版权所有
展为网络
网站建设
客户案例