快速提高网站闪电访问速度的12个步骤

加速后端的5个步骤

在我们进入可以帮助您加快后端的特定步骤之前,查看“后​​端”的含义可能会有所帮助。您可以考虑存储数据的所有内容的后端,包括数据库本身和服务器 - 基本上任何有助于使您无法在视觉上与之交互的网站功能的东西。有关后端与前端之间差异的更多信息,请阅读本文

第1步:确保已配置反向代理

这是重要的第一步。对于华尔街绿洲(WSO),我们使用名为Varnish的反向代理。它是迄今为止最关键,最快速的缓存层,可为大多数匿名流量(访问者注销)提供服务。Varnish将整个页面缓存在内存中,因此将其返回给访问者的速度非常快。

https://en.wikipedia.org/wiki/Reverse_proxy



第2步:扩展该缓存的TTL

如果你有一个庞大的内容数据库(特别是在10000以上的URL范围内)不会经常变化,为了在Varnish缓存层上提高命中率,你可以延长生存时间(TTL基本上意味着如何在将对象从缓存中刷新之前很久)。

对于新加坡办事处,我们一直走到两周(因为我们讨论了超过300,000次)。在任何给定时间,这些论坛URL中只有几千个是活动的,因此大量缓存其他页面是有意义的。这样做的缺点是,当您进行任何网站范围,模板或设计更改时,您必须等待两周才能到达所有网址。

第3步:预热缓存

为了保持我们的缓存“温暖”,我们有一个特定的流程可以访问我们站点地图中的所有网址。这会增加用户或谷歌机器人访问相同页面时页面进入缓存的可能性(即我们的点击率)它还使Varnish充满了更多的物体,随时可以快速访问。

从下面的图表中可以看出,“缓存命中率”(绿色)与总命中率(蓝色+绿色)的比率超过93%。

快速提高网站闪电访问速度的12个步骤

第4步:调整数据库并关注最慢的查询

在WSO上,我们使用MySQL数据库。确保启用慢速查询报告并至少每季度检查一次。使用EXPLAIN检查最慢的查询。在需要的地方添加索引并重写可以优化的查询。

在WSO上,我们使用MySQL数据库。要调优MySQL,您可以使用以下脚本:https://github.com/major/MySQLTuner-perl和https://github.com/mattiabasone/tuning-primer

第5步:HTTP标头

使用HTTP2服务器push在请求之前将资源发送到页面。首先,确保测试应该推送哪些。JavaScript对我们来说是个不错的选择。你可以在这里阅读更多相关信息。

以下是我们的投资银行面试问题 URL中的服务器推送示例:

</files/advagg_js/js__rh8tGyQUC6fPazMoP4YI4X0Fze99Pspus1iL4Am3Nr4__k2v047sfief4SoufV5rlyaT9V0CevRW-VsgHZa2KUGc__TDoTqiqOgPXBrBhVJKZ4CapJRLlJ1LTahU_1ivB9XtQ.js>; 相对=预载荷; 如=脚本,</文件/ advagg_js / js__TLh0q7OGWS6tv88FccFskwgFrZI9p53uJYwc6wv-a3o__kueGth7dEBcGqUVEib_yvaCzx99rTtEVqb1UaLaylA4__TDoTqiqOgPXBrBhVJKZ4CapJRLlJ1LTahU_1ivB9XtQ.js>; 相对=预载荷; 如=脚本,</文件/ advagg_js / js__sMVR1us69-sSXhuhQWNXRyjueOEy4FQRK7nr6zzAswY__O9Dxl50YCBWD3WksvdK42k5GXABvKifJooNDTlCQgDw__TDoTqiqOgPXBrBhVJKZ4CapJRLlJ1LTahU_1ivB9XtQ.js>; 相对=预载荷; 如=脚本,

确保您使用的格式正确。如果是脚本:<url>; 相对=预载荷; 如=脚本,

如果是CSS文件:<url>; 相对=预载荷; 如=的风格,

加快前端的7个步骤

以下步骤有助于加快您的前端应用程序。前端是用户直接与之交互的网站或应用程序的一部分。例如,这包括字体,下拉菜单,按钮,过渡,滑块,表单等。

第1步:修改JavaScript的位置

修改JavaScript的位置可能是最困难的变化之一,因为您需要不断进行测试以确保它不会破坏您网站的功能。 

我注意到每次删除JavaScript时,都会看到页面速度有所提升。我建议尽可能多地删除Javascript。您可以缩小所需的JavaScript。您还可以组合JavaScript文件,但使用多个包。

始终尝试将JavaScript移动到页面底部或内联。您也可以在可能的情况下推迟或使用async属性,以保证您不会呈现阻止。你可以阅读更多有关移动的JavaScript 这里。

第2步:优化您的图像

尽可能使用WebP获取图像(Cloudflare,CDN,自动为您执行此操作 - 我将在下面详细介绍Cloudflare)。这是一种使用有损压缩 和无损压缩的图像格式  。

始终使用正确尺寸的图像。例如,如果您的网站上有一个2“x 2”方形的图像,请不要使用大的10“x 10”图像。如果您的图像大于所需的图像,则通过网络传输更多数据,浏览器必须为您调整图像大小

使用延迟加载来避免/延迟下载页面下方而不是屏幕可见部分的图像。

第3步:优化您的CSS

你想确保你的CSS是内联的。像这样的在线工具可以帮助您找到要内联的关键CSS,并解决渲染阻塞问题。额外奖励:您将保留具有单独文件的缓存优势。

确保缩小CSS文件(我们使用AdVagg,因为我们使用的是Drupal CMS,但根据您的网站,有很多选项)。  

尝试使用较少的CSS。例如,如果您有某些仅在您的主页上使用的CSS类,请不要将它们包含在其他页面上。 

始终组合CSS文件但使用多个包。您可以在此处详细了解此步骤。

将媒体查询移动到特定文件,以便浏览器在呈现页面之前不必加载它们。例如:<link href =“frontpage-sm.css”rel =“stylesheet”media =“(min-width:767px)”>

如果您想了解有关如何优化CSS的更多信息,请查看Patrick Sexton的有趣帖子。

第4步:减轻您的网络字体(它们可能很重)

如果您不小心,这是您的开发人员可能与您的设计师争论的地方。每个人都想看一个设计精美的网站,但如果你不小心如何实现这个设计,它可能会导致意想不到的速度问题。以下是有关如何使字体节食的一些提示:

  • 使用内联svg图标字体(如字体真棒)。这样,您将减少关键链路径,并在首次加载页面时避免出现空内容。
  • 使用fontello生成字体文件。这样,您只能包含实际使用的字形,这会导致较小的文件和更快的页面速度。
  • 如果要使用Web字体,请检查是否需要字体文件中定义的所有字形。例如,如果您不需要日语或阿拉伯语字符,请查看是否存在仅包含所需字符的版本。
  • 使用Unicode范围选择所需的字形。
  • 尽可能使用woff2,因为它已经被压缩了。
  • 本文是Web字体优化的绝佳资源。

以下是我们使用优化字体时测量的差异:

将我们的字体文件从131kb减少到41kb并删除一个外部资源(useproof)后,我们测试页面上的满载时间从5.1秒一直下降到2.8秒。这是44%的改进,肯定会让谷歌微笑(见下文)。

快速提高网站闪电访问速度的12个步骤

这是44%的改进。

快速提高网站闪电访问速度的12个步骤

第5步:移动外部资源

如果可能,将外部资源移动到您的服务器,以便您可以控制过期标头(这将指示浏览器将资源缓存更长时间)。例如,我们将Facebook Pixel移动到我们的服务器并将其缓存了14天。这意味着您将负责不时检查更新,但它可以提高您的网页速度得分。

例如,在我们的Private Equity Interview Questions页面上,可以看到如何从我们的服务器加载fbevents.js文件,并且缓存控制http标头设置为14天(1209600秒)

cache-control:public,max-age = 1209600

第6步:使用内容分发网络(CDN)

什么是CDN?点击此处了解更多信息。

我建议使用Cloudflare,因为它使得许多任务比在您自己的服务器上尝试执行它们更容易,更快。以下是我们对Cloudflare配置的具体做法:

速度

  • 自动缩小,检查所有
  • 在波兰语下
  • 启用Brotoli
  • 启用Mirage
  • 选择有损
  • 检查WebP

网络

  • 启用HTTP / 2 - 您可以在此处阅读有关此主题的更多信息
  • 目前没有浏览器通过未加密的连接支持HTTP / 2。出于实际目的,这意味着您的网站必须通过HTTPS提供才能利用HTTP / 2。Cloudflare有一种免费且简单的方式来启用HTTPS。在这里查看。

加密

  • 在SSL下
    • 选择灵活
  • 根据TLS 1.3
    • 选择启用+ 0RTT

第7步:使用服务人员

服务工作者为网站所有者和开发人员提供了一些有趣的选项(如推送通知),但就性能而言,我们对这些工作人员如何帮助我们构建更智能的缓存系统感到非常兴奋。

随着服务工作者缓存资源(图像,CSS,javascript,字体等),返回的访问者通常会比没有工作者时更快地提供服务。

测试,工具和外卖

对于您尝试提高速度的每项更改,您可以使用以下工具来监控更改的影响,并确保您处于正确的路径:

  • https://www.webpagetest.org
  • https://developers.google.com/speed/pagespeed/insights
    • Google Page Speed Insights于2018年11月更新(详情请点击此处)。它为您提供了大量有关如何提高基于Light House的移动和桌面页面性能的建议。

我们知道有很多要消化的内容和上面链接的大量资源,但是如果你的时间紧迫,你可以从后端和前端部分的第1步开始。仅这两个步骤就可以自己产生重大影响。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/12191.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2019年6月17日 11:39
下一篇 2019年6月19日

相关推荐

  • 模板网站制作是否真的很差。

    网站制作的样品现在已经很常见了。模板搭建网站主要是针对用户的搭建小需求。如果使用海外服务器,可以立即上网。当然缺点是可能是一样的。那么模板网站真的不好吗?网站建设有什么优势吗? 好事快,只要你能看到会…

    2022年9月10日
    047
  • 网站用户体验应掌握的几个要点。

    视觉外观,中级用户体验,底层安全。今天我们就来评论第二点,出色的用户体验。现在很多网络公司做网站,除了创造好的视觉效果,很少考虑用户的体验,用户体验这个概念很模糊。直接结果就是网站转化率无法提高,销…

    2022年9月10日
    054
  • 企业过度制作网站表现在哪里。

    公司对网站建设的需求不同于以往,现在越来越多的公司都有自己的网站。但是很多公司几乎都是这方面的白皮书,很多时候有些东西不符合实际需求。在一些最初接触的网站上创建业务很容易,那么这个网站的哪些方面可能…

    2022年9月10日
    054
  • 2019年SEO优化的4大变化趋势。

    2019年已经过去了半年,百度的搜索引擎也大幅更新了自然排名算法。因此,许多网站的关键词排名直线下降。根据小编的实践经验,2019年的seo优化有以下四大趋势。 1。返回到内容根目录 虽然搜索引擎一直倡导人人都要…

    2022年9月10日
    053
  • 如何通过SEO优化让一个网站能够赚钱。

    随着互联网业务的发展,网站成为企业推广产品的主要平台,而 SEO优化成为企业推广网站的主要方式之一。通过 SEO优化,企业可以为用户提供更好的网站体验。同时,网站的关键词 那么,SEO优化怎么做才能让网站盈利呢…

    2022年9月10日
    070
  • 网站建设如何缩短制作时间。

    随着互联网的不断发展,更多的企业也在通过建设网站来提升品牌知名度以及为网站带来更多的流量,通常网站建设会需要1—3个月的时间,但对于想要更快获得效果的企业建站来说该如何进行缩短制作时间呢? 首先,…

    2022年10月18日
    035
  • 制作企业网站时需要注重哪些元素的建设。

    做企业网站要注意哪些元素? 很多企业在网站做出来之前,对网站建设的流程和注意事项一无所知。他们往往通过各种渠道对网站制造和设计开发有了全面的了解,才会去寻找理想的网站开发公司合作。企业在前期准备网站时…

    2022年9月9日
    054
  • 如何对视频进行seo优化。

    短视频这几年很乱,那么我们这些seo从业者如何优化网站视频呢?不同于视频文本标记语言,其实我们可以从以下几个方面来优化视频。 1。优化关键字 现在百度在搜索结果中推送的视频越来越多,其中很大一部分来自爱奇…

    2022年9月10日
    081

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息