网站优化的11个技术操作

发表时间:2020-04-29 10:04作者:网站优化来源:江苏互旦科技网址:http://www.hudoo-tech.cn/youhua257.html

网站优化尤其是在线竞争如此激烈的情况下。在过去的几个月中,我们编写了许多性能教程,例如如何加快WordPress,Joomla,Drupal等的速度。但是,如果您不在任何这些平台上怎么办?如果您要优化站点,则无论平台如何,我们都建议以下18个优化技巧。


但是在我们深入研究技巧之前,您应该了解一些工具,以便您可以首先确定网站性能问题。如果您知道网站在哪里变慢或出现瓶颈,则可以重新调整优先级。


网站速度测试


网站优化的11个技术操作


首先,我们建议您使用网站速度测试工具来分析您网站的整体速度。我们建议您使用KeyCDN的网站速度测试工具或WebPageTest,因为它们都支持HTTP / 2。需要Firefox 36+或Chrome 41+。您将在下面看到更多有关为什么我们建议迁移到HTTPS以利用HTTP / 2的优点。



网站负载测试

其次,重要的是对您的网站进行负载测试,以查看可能引起瓶颈的原因。以下是一些可以帮助您测试网站的工具。如果您要扩展平台,这些功能也非常有用。


CyberFlood:网站和应用程序的安全性和性能测试。


负载影响:DevOps的自动化和按需性能测试。立即对多达120万并发用户进行负载测试您的网站,Web应用程序,移动应用程序或API。

加载程序:加载测试服务,可让您通过数千个并发连接对您的Web应用程序和API进行压力测试。释放多达10,000个客户。

BlazeMeter:针对您的所有应用程序运行大规模可扩展的,基于开源的性能测试,并在每个软件交付阶段验证性能。

如果您运行的是WordPress网站,则有一个有用的插件(例如P3),可以帮助您查明使您的网站变慢的插件。



计算网站性能优化预算



Jonathan Fielding整理了一个很棒的免费小工具,您可以在其中计算绩效预算。只需输入您希望站点加载的速度(以秒为单位),然后选择连接速度即可。


在下一页上,您可以根据网站上的CSS,JS,图像,视频和字体使用情况来调整滑块。


在最后一页,它为您提供了性能预算明细以及不同连接类型的整体估计负载时间。同样,这些都是估计值,但是查看所有连接速度之间的分散程度可能很有用。不要忘记针对移动设备和速度较慢的设备进行优化。


网站性能优化技巧


既然您已经在网站上运行了一些测试以查看延迟或负载在哪里,那么现在是时候开始进行优化了,请按照以下这些优化技巧进行操作。



1.图像优化



最近,我们邀请了20多位网络性能专家来分享他们的建议和他们看到的错误。猜猜其中有46%的人说优化是第一要务吗?没错,图片优化!所以,现在您已经从专家那里听到了,不只是相信我们。


根据HTTP Archive 2016年的一份报告,平均而言,网站页面权重的64%由图片组成。


KeyCDN开发了Optimus WordPress插件以及一个API,该API专注于无损和有损图像压缩的组合。如果您使用API,则可以在任何平台上使用。可以在GitHub上找到Optimus API的PHP库。如果您是开发人员,请随时为其他Optimus API库做出贡献。


通过使用Optimus,您可以摆脱Google PageSpeed Insights的建议:通过压缩…,您可以节省4.7 KB(30%)而不损失。使用Optimus的另一个优点是它支持转换为Google开发的WebP格式。


根据Google的说法,WebP无损图像比PNG小26%,比JPEG图片小25-34%。


您可以将以下代码段添加到.htaccess文件中,以支持WebP格式(而不是JPEG或PNG图像)的提供。


而且,如果您使用的是WordPress,则可以使用KeyCDN的免费WordPress Cache Enabler插件自动提供WebP格式。这里是一些其他第三方工具,您也可以将其用于图像压缩。


图像缩小自动任务系统的插件#

咕unt声:grunt-contrib-imagemin

gulp:gulp-imagemin

第三方在线工具#

小小PNG

海妖

JPEGmini(适用于OSX,iOS,Windows的应用程序)

本地工具#

ImageAlpha(Mac)

还请确保使用HTML srcset和size属性来利用响应图像,以根据显示的大小提供不同比例的图像。



2.减少HTTP请求



当浏览器从服务器获取数据时,它会使用HTTP(超文本传输协议)来获取数据。它是客户端和主机之间的请求/响应。通常,HTTP请求越多,网页加载速度就越慢。


您可以通过多种方式减少请求数量


内联您的JavaScript(仅在很小的情况下)

使用CSS精灵

减少诸如第三方插件之类的资产,这些资产会产生大量外部请求

除非绝对需要,否则不要使用第三方框架

使用更少的代码!

组合CSS和JS文件(使用HTTP / 2串联不再重要)

特定网站必须发出的请求数量因站点而异。运行站点速度测试将告诉您生成特定页面需要多少个请求。


禁用此功能后,您将不再具有该第二个HTTP请求,并且您的主脚本将不再具有302重定向。这只是HTTP请求清除的一个示例。


第二个HTTP请求清除


HTTP请求清除的另一个示例是,如果您运行的WordPress默认情况下在头文件中包含附加的JavaScript文件wp-emoji-release.min.js?ver = 4.3.1。表情符号很棒,但真的需要吗?值得从其他JavaScript文件获得额外的重量和时间吗?可能不会。您可以通过将以下代码添加到您的functions.php文件中来禁用WordPress中的表情符号。


或者,您也可以使用免费的“禁用表情符号”插件。


如果事情没有被使用,不要让它们产生请求!另外,不仅要优化您的首页,网站的其余部分也应引起注意。



3.缩小CSS和JavaScript



资源的最小化意味着从HTML,JavaScript和CSS中删除不需要加载的不必要字符,例如:


空格字符

换行符

注释

块定界符

这减少了必须从服务器请求的代码量,从而加快了加载时间。


缩小自动化任务系统的插件#

的JavaScript


咕unt声:咕unt声-丑化

吞咽:吞咽uglify

的CSS


咕unt声:grunt-contrib-cssmin

Gulp:gulp-minify-css

如果您使用的是WordPress,则还可以使用Cache Enabler插件来缩小CSS和JavaScript。

4.关键路径和渲染阻止资源(CSS + JS)

在分析网页速度时,您始终需要考虑可能阻止DOM的因素,这会导致页面加载时间的延迟。这些也称为渲染阻止资源,例如HTML,CSS(可以包括Web字体)和JavaScript。以下是有关如何通过优化关键渲染路径来防止CSS和JavaScript阻止DOM的一些建议。


CSS文件


正确调用您的CSS文件。

使用媒体查询将某些CSS资源标记为非渲染阻止。

减少CSS文件的数量(将CSS文件合并为一个文件)。

缩小CSS(删除多余的空格,字符,注释等)。

总体上减少使用CSS。

的JavaScript


当涉及到JavaScript时,要牢记一些最佳实践。


将您的脚本移动到</ body>标记之前的页面底部。

使用async或defer指令以避免渲染阻塞。

将您的JS文件连接到一个文件中(使用HTTP / 2不再重要)。

缩小JavaScript(删除多余的空格,字符等)。

如果很小,请内联您的JavaScript。

异步允许脚本在后台下载而不会阻塞。然后,在完成下载的那一刻,渲染被阻止并且该脚本执行。执行脚本后,将继续渲染。


您的另一个选择是推迟JavaScript。 该指令的作用与异步相同,不同之处在于它保证脚本按在页面上指定的顺序执行。 帕特里克·塞克斯顿(Patrick Sexton)有一个很好的例子,说明了如何适当推迟JavaScript的加载。


在这篇文章的后面,我们还将讨论您对Web字体的选择。

5.使用内容交付网络(CDN)减少延迟

如果您不熟悉内容交付网络(CDN),我们强烈建议您阅读完整的CDN指南。 除了加快全球资产交付速度之外,CDN还可以大大减少延迟。


我们进行了一项测试,向您展示了在实施和未实施CDN的情况下延迟时间的差异。这仅仅是从连接性的角度来看。我们使用了KeyCDN的ping测试工具,可以方便地从以下10个位置同时进行测试。这是两者之间的结果。


我们的原始服务器(不带CDN)和POP(带CDN)之间的等待时间平均减少了73%!查看我们的网站延迟测试的全部详细信息。


您可以在几乎任何现有平台上实施CDN,因为KeyCDN具有25种以上的集成。这是我们集成指南的快速列表。


WordPress整合

CMS整合指南

框架集成指南

AWS S3 CDN集成

Google Cloud Storage CDN整合

定制CDN集成

6. TTFB

到第一字节的时间(TTFB)是Web服务器响应能力的度量。基本上,这是您的浏览器从服务器请求信息后开始接收信息的时间。网站的TTFB计算如下:


HTTP请求时间+进程请求时间+ HTTP响应时间


TTFB在Chrome DevTools中显示为绿色等待栏。


我们的原始服务器(不带CDN)和POP(带CDN)之间的等待时间平均减少了73%!查看我们的网站延迟测试的全部详细信息。


您可以在几乎任何现有平台上实施CDN,因为KeyCDN具有25种以上的集成。这是我们集成指南的快速列表。


WordPress整合

CMS整合指南

框架集成指南

AWS S3 CDN集成

Google Cloud Storage CDN整合

定制CDN集成


域名预取是在用户实际跟随链接之前已经解析域名的一个很好的解决方案。下面是一个示例,如何在HTML的HEAD部分中实现它:


<link rel =“ dns-prefetch” href =“ // www.example.com”>

双斜杠表示URL以主机名开头(在RFC1808中指定)。


Preconnect允许浏览器在将HTTP请求实际发送到服务器之前建立早期连接。可以预先启动诸如DNS查找,TCP握手和TLS协商之类的连接,从而消除了这些连接的往返延迟,并为用户节省了时间。


下面的示例显示为KeyCDN的区域别名链接启用预连接的外观。


<link href ='https://cdn.keycdn.com'rel ='preconnect'>

7. HTTP / 2

Stack Exchange and Discourse的联合创始人Jeff Atwood在我们的网络性能问题中回答说,他将给出的第一条建议是“全面采用HTTP / 2-每个人的巨大进步。”我们喜欢Jeff的回答,因为我们绝对同意HTTP / 2是未来,并且会带来巨大的性能优势。


Go是一种编程语言,它是一个很好的例子,它说明了当您在页面上处理大量图像时,以及HTTP / 2远远超过HTTP / 1的情况。


要启用HTTP / 2,仅需要一个SSL证书(它需要TLS)和一个支持HTTP / 2的服务器。您可以使用KeyCDN的HTTP / 2测试工具来查看是否受支持。现在,KeyCDN通过我们的加密集成提供免费的SSL证书。还没有迁移到HTTPS?我们也有一个HTTP到HTTPS迁移指南。



8. PHP7和HHVM#


出于安全补丁,性能升级等原因,使Web服务器的各个组件保持最新状态至关重要。如果您使用的是PHP,则与PHP 5.6相比,升级到PHP7可以极大地提高性能。以及利用HHVM。


根据上图的结果,相比于WordPress 3.6中PHP 5.6的96个,PHP7每秒可以处理204个请求。此外,与WordPress 4.1中PHP5.6相比,PHP7可以处理183个以上的请求。


HHVM是Facebook等网站使用的开源VM,也显示出了良好的效果。在测试PHP 7和HHVM时,Kinsta与Zend的结果略有不同。从他们的结论来看,HHVM势不可挡。


由于环境,硬件,所测试的CMS平台,版本等的不同,许多测试结果会有所不同。但是无论哪种方式,PHP7和HHVM都是提高网站性能的绝佳方法。

9. Web字体性能

根据HTTP存档,现在有60%的网站使用自定义字体。自2011年以来,该数字增长了850%以上。网络字体(例如Google字体)的缺点是它们向外部资源添加了额外的HTTP请求。 Web字体也被渲染阻止。以下是一些有关更好的Web字体性能的建议。


根据浏览器支持确定优先级

只选择您需要的样式

尽量减少字符集

在本地托管字体或预取

使用Base64编码存储在LocalStorage中

您可以在我们有关分析网络字体性能的文章中看到以上每种方法的示例。格鲁吉亚(Georgia)是一种很棒的系统字体,看上去很漂亮,而且易于阅读。


您也可以将Google字体移至CDN。我们在使用Google的CDN和KeyCDN之间进行了比较,而使用KeyCDN的速度更快。为什么?因为它减少了HTTP请求的数量,所以DNS查找使您可以利用单个HTTP / 2连接,并可以更好地控制缓存。

10.热链接保护

热链接保护是指限制HTTP引荐来源网址,以防止其他人将您的资产嵌入其他网站。通过禁止其他站点显示图像,热链接保护将为您节省带宽。


示例:您的网站URL是www.domain.com。要停止从其他站点对图像进行热链接并从图像主机显示名为donotsteal.jpg的替换图像,请将以下代码放在.htaccess文件中:


RewriteEngine开

RewriteCond%{HTTP_REFERER}!^ http://(。+ \。)?domain \ .com / [NC]

RewriteCond%{HTTP_REFERER}!^ $

RewriteRule。* \。(jpe?g | gif | bmp | png)$ http://i.imgur.com/donotsteal.gif [L]

KeyCDN还提供一种简单的方法来启用热链接保护,以保护您的CDN带宽。请参阅我们的教程,了解如何创建区域引荐来源网址。

11.启用Gzip压缩

Gzip是另一种压缩形式,它在将服务器上的网页,CSS和JavaScript发送到浏览器之前对其进行压缩。该网站的性能优化易于实施,并且可以发挥很大的作用。


12.Apache


您可以通过将以下内容添加到.htaccess文件来启用压缩。


<IfModule mod_deflate.c>

    #压缩HTML,CSS,JavaScript,文本,XML和字体

    AddOutputFilterByType DEFLATE应用程序/ javascript

    AddOutputFilterByType DEFLATE application / rss + xml

    AddOutputFilterByType DEFLATE application / vnd.ms-fontobject

    AddOutputFilterByType DEFLATE应用程序/ x字体

    AddOutputFilterByType DEFLATE应用程序/ x-font-opentype

    AddOutputFilterByType DEFLATE应用程序/ x-font-otf

    AddOutputFilterByType DEFLATE应用程序/ x-font-truetype

    AddOutputFilterByType DEFLATE应用程序/ x-font-ttf

    AddOutputFilterByType DEFLATE应用程序/ x-javascript

    AddOutputFilterByType DEFLATE application / xhtml + xml

    AddOutputFilterByType DEFLATE应用程序/ xml

    AddOutputFilterByType DEFLATE字体/ opentype

    AddOutputFilterByType DEFLATE字体/ OTF

    AddOutputFilterByType DEFLATE字体/ ttf

    AddOutputFilterByType DEFLATE image / svg + xml

    AddOutputFilterByType DEFLATE图片/ x-icon

    AddOutputFilterByType DEFLATE文本/ CSS

    AddOutputFilterByType DEFLATE text / html

    AddOutputFilterByType DEFLATE文本/ javascript

    AddOutputFilterByType定义文本/纯文本

    AddOutputFilterByType DEFLATE text / xml


    #删除浏览器错误(仅适用于真正的旧浏览器)

    BrowserMatch ^ Mozilla / 4 gzip-only-text / html

    BrowserMatch ^ Mozilla / 4 \ .0 [678] no-gzip

    BrowserMatch \ bMSIE!no-gzip!gzip-only-text / html

    标头附加随用户代理

</ IfModule>

Nginx

您可以通过将以下内容添加到nginx.conf文件来启用压缩。


如您所见,您可以实施数百种不同的网站优化调整,以进一步改善内容的交付和速度。 从图像优化到实施CDN,再到浏览器和服务器缓存,都可以利用HTTP / 2,Gzip,PHP7,HHVM等更多功能对自己官网网站优化

文章列表
2019-07-08
苏州谷歌竞价发现,许多外贸公司的网站都负责外包公司。对于其他批次的公司,他们依靠自己的探索方法。但他们经常遇到无法解决的问题。以下是Google Bidding教程方法的详细说明。
2019-07-08
苏州外贸推广渠道有哪些?本次就关于B2B推广,我总结了五种方法分享给大家,仅此帮助那些从事google推广碰壁的人...
2019-07-09
苏州谷歌代理现已是长三角负责google推广的重要渠道之一,对于新入行的企业来讲首先要知道其到底是做什么?自己可能...
2019-07-09
对于苏州外贸网站建设的人来说,由于随着全球电子商务的发展,许多外贸公司希望将品牌推向世界,并将建立一个外贸网站。那...
2019-07-10
做过的网站优化的人都会碰到网站收录下降、网站被K或者是不收录等情况,令人头疼不已。本次就由苏州seo外贸推广教你6...
2019-07-10
从今天海外网站发展趋势来讲,如果外贸企业还想单靠网站在Google、bing和Yahoo等搜索引擎赚取流量和订单,...
2019-07-11
由于外贸近年来遭受的损失,如何度过这场危机已成为最关键的问题。搞好外贸是一种在主要社交媒体上推广网站排名和公司产品...
2019-07-11
首先要知道Google作为全球第一大搜索引擎,每天吸引的流量是无比庞大的。既然是外贸企业如果放弃这个推广平台,实在...
2019-07-12
苏州google代理商就网站中最重要TKD教程中,今天抽取title标签单独讲,后续也会把K和D逐一为大家分析。t
2019-07-12
苏州谷歌代理商告诉你做优化首先要懂一些代码,但是现在很多刚从事这类工作的人不是太懂代码,只知道把标题、关键词、描述...