您的老师没有告诉您有关优化网站速度的信息

作者:华火

<p>尽管网站速度是Google搜索结果中的排名因素,但快速网站并不常见您的网站可能有改进的空间通过观察细微的细节,可以显着减少网页加载时间 - 从而提高SERP性能让我们来看看查看一些不太常用的方法来减少页面加载时间以便在SERP中获得更好的性能如果您在网站上设置了Google Analytics,那么了解您的网页执行情况应该是一项相对简单的工作只需导航到行为>网站速度和查看其中包含的各种报告页面时间和速度建议报告将显示您的首页,以及他们的性能统计数据,以及提高页面速度的建议这些报告将帮助您确定要优先考虑的页面评估当前页面加载后使用Google Analytics时,您需要分析导致问题的网站因素是非优化图片是罪魁祸首</p><p>也许这是过于臃肿的代码</p><p>糟糕的服务器</p><p>或者这三个因素一下子</p><p>在预算和优先级允许的情况下分阶段攻击这些问题,将帮助您准确评估每个因素对网站页面速度的影响程度 - 以及修复它可以提高网站在SERP中的性能的程度每一点都有帮助,对吧</p><p>正如我所执行的许多网站审核一样,我总是惊讶地发现网站上至少没有一个预加载脚本</p><p>编写JavaScript预加载器的代码并不难,它让我感到很容易页面优化的一部分经常被忽略通过预加载页面元素(如图像),您可以显着减少网站的加载时间并有助于提高其整体性能您不会冒任何因为Google上的网站出现任何负面影响的风险结果,为什么不呢</p><p>此外,有一些方法可以使用CSS预加载页面级元素,如本示例所示,在有CSS替代方案的情况下,使用CSS而不是JavaScript的Web最佳实践为什么</p><p>因为当访问您网站的用户关闭JavaScript时JavaScript会出现问题如果您的Google Analytics帐户未显示任何关闭JavaScript的访问者,您是否需要担心</p><p>是的,你永远都不知道这个随机技术娴熟的访问者什么时候会出现在你的网站上,他们的设置设置方式只要预算,优先级和项目范围允许,就可以充分考虑尽可能多的浏览器和平台确保所有图像都经过适当优化是众所周知的行业最佳实践</p><p>这意味着您不应在页面上使用25 MB JPG,将其压缩成150 x 150像素的图像您必须确保所有像素信息均已正确压缩上传图像之前像Adobe Photoshop这样的程序如果不执行此步骤,将会发生一个150 x 150像素的图像,物理尺寸为25 MB等待一分钟,图像如何是150 x 150但是有25 MB的物理尺寸</p><p>答案在于它没有物理压缩这一事实当你物理压缩图像时,你不仅减少了图像尺寸,还减少了物理尺寸Adobe Photoshop执行所谓的“无损压缩”,这种压缩离开了最终优化文件几乎与您发现的完全一致目标内容中优化图像的理想尺寸范围大约为15-50KB,具体取决于像素尺寸显然,700 x 700照片将比150 x 150照片大得多,因此,最好根据观众的连接速度使用您的最佳判断但是,只需拍摄已保存的图像并在像WordPress这样的CMS中调整大小就行不通了么</p><p>因为WordPress只调整物理尺寸它不会同时调整物理+像素尺寸这就是为什么需要两个部分的过程:1拍摄图像并在Photoshop中物理调整其像素尺寸,然后将其添加到WordPress当然,如果你是手工编码,第2步就被淘汰了,因为所有你要做的就是将宽度+高度编码到图像中这将我们带到下一点:始终确保你的图像用宽度和高度编码为什么</p><p>因为否则,浏览器必须猜测图像的大小它为渲染过程增加了一个额外的步骤,从而为加载时间增加了宝贵的毫秒数 你印象深刻吗</p><p>没有</p><p>让我们继续前进,然后......创建一个拥有成千上万行代码的网站,这一切都很好但是如果这些代码行变得多余,它们就会成为你网站加载时间的负担,如果不这样做,有时会增加十倍非常注意它这就是为什么“思考缩小”方法是获得编码必杀技的最佳方法之一为什么你真的想在你的内容中使用多少div</p><p>多少桌子</p><p> (我希望你还没有使用表格进行设计这是一个过时的方法,W3C声明表格只应用于表格数据,而不是出于布局原因)我真的想把这张图片分成四个片段吗</p><p>或者,使用一个图像并将其优化为核心会更好吗</p><p> (这是一个决定,将取决于图像的大小)这是一个示例,采取极端编码SNAFU情况,并将其变成一个美丽的东西看下面的示例页面代码你会注意到有很多内联CSS这导致代码膨胀,并且可能某些浏览器的一些问题混淆了CSS想要发生的事情通过将这种编码缩小到最小形式并使用CSS来实现我们可以实现的绝对极简标记,可以减少页面加载通过缩小的时间通过观察正确的计划和执行,我们的加载时间可以在职责范围之外(这正是我们想要的结果)略微最小化:[点击放大]如果您的网站有超过两个或三个JavaScript文件,这算作JavaScript的过度实现</p><p>重要的是,您的页面元素对服务器的调用越多,您在网站速度中引入的瓶颈就越多对许多人来说同样如此一次写入CSS文件当您在10个CSS文件之上添加10个JavaScript文件时,它可能会导致一些主要的速度瓶颈问题一般建议确保您的服务器处理不超过两个或三个JavaScript文件和/或两个或三个每页CSS文件以便检查您的服务器调用您不必总是使用minification插件来最小化多个JavaScript文件的影响您应该手动对所有违规文件执行缩小原因是minification插件并不总是执行正确的优化事实上,一些插件可以添加更多的代码膨胀当有疑问时,总是去手动路线以下引用来自“如何加载时间影响你的底线” Kissmetrics博客:加载时间是导致页面放弃的一个主要因素普通用户对于加载时间太长的页面没有耐心,并且理所当然因此必须努力争取不到一秒钟为您网站的每个页面加载所有设备的时间现在,减少两到三秒的加载时间可能听起来不是很多然而,它真的可能意味着成功的网站和随意的网站之间的差异这看似背后的原因是什么一秒加载时间的不可能度量</p><p>根据Kissmetrics的说法,“页面响应延迟1秒可以使转换率降低7%”这意味着“如果一个电子商务网站每天赚10万美元,1秒的页面延迟可能会花费你25美元每年损失数百万美元“这是一个沉重的代价,以继续运营一个有7到8秒加载时间的网站所以请,让您的网站加载一秒或更少您的访问者(和谷歌)将感谢你注意:这总是现实吗</p><p>当你做出决定时,不需要考虑预算,优先事项和项目范围等其他事项在决定这是否适合你的项目时,使用自己的判断力和最佳判断力是很重要的</p><p>在确保您的网站是优化的乌托邦用户体验时,移动指南是一个很好的起点但是当您想要考虑移动设备的页面速度优化时,您会怎么做</p><p>首先,根据您正在处理的站点类型(信息,电子商务或其他),您需要保持简单的复杂性不要使用JavaScript和过于复杂的动态服务器端执行来呈现您的站点(除非它是轻量级的,适用于您的网站)使用多个媒体查询和战略优化的图像,使用单一样式表保持简单 策略优化的图像是什么意思</p><p>下面是一个示例:如果您使用标题图像,请创建标题图像,以便您可以使用相同的标题图像通过媒体查询动态调整标题图像不要将多个图像用于多个媒体查询所有这些都是增加对服务器的调用并创建一个带宽瓶颈,在事实之后优化可能具有挑战性还记得我们的JavaScript示例吗</p><p>保持对服务器的调用至少接下来,确保您的图像也针对移动设备进行了质量优化首先在优化时考虑加载时间,然后考虑图像数量在寻求快速加载时尽量减少两者的影响移动网站通过遵循这些建议,可以将网站性能提高十倍</p><p>查看缩小,谷歌分析和整体网站速度问题,并确保他们的快速解决方案将有助于增加性能本文中表达的观点是访客作者的意见,....