快速提高网站闪电访问速度的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日 00:00

相关推荐

  • 浅谈定制网站与模板网站的区别。

    模板和定制网站最大的区别是:定制网站在风格和功能上是随机的、可修改的,而模板网站大多应用一种模式,无法进行网络营销。所有企业都要申请一个系统设置的网站模板,模板库中只有几十个方案可供参考。如果你想改变…

    2022年9月10日
    058
  • SEO推广技术是什么意思呢。

    虽然很多新手看了很多遍SEO的百度百科,但还是很难理解SEO技巧到底是什么意思,SEO的工作是什么,细节有什么用?举个简单的例子,假设你在做SEO技巧,你身边的人都不懂这个技巧,那么他们可能会说SEO就是传销。如果…

    2022年9月10日
    064
  • 网络主流营销手段是网络推广。

    随着互联网时代的加速,网络推广正在受到各类企业的追捧,网络推广的营销方式也在不断迭代更新。但如果说十万到一万,网络营销的本质只是基于互联网的一种新的营销方式,利用数字信息和网络媒体帮助实现营销目标。 …

    2022年9月10日
    061
  • 网站建设定位需要考虑哪些。

    网站定位需要考虑什么? 现在很多企业都在讲定位。不仅企业运营需要定位,网站建设也需要定位,定位确实很重要。可以帮助企业快速树立品牌形象,在网站上做出口碑。那么网站建设定位不明确会怎么样呢?让我们带您浏…

    2022年9月9日
    068
  • 企业网站建设费用和哪些因素有关系。

    网站建设就是要做好网上宣传。企业在网上投放广告,可以节省品牌推广成本,为企业拓展新的推广方式和销售渠道。那么哪些因素与企业网站建设成本有关? 网站建设类型 不同类型的网站(展览宣传网站、营销推广网站、企…

    2022年9月10日
    070
  • 分析不利于提升网络推广效果的几个要点。

    为了让互联网更好的为企业服务,企业需要进行网络推广。在这个信息爆炸的时代,更多的用户可以通过互联网找到企业。因此,企业是否有良好的网络推广效果更为重要,企业需要掌握一定的技巧来提高网络推广的效果。 下…

    2022年9月10日
    049
  • 2020做网站开发有哪些内容需引起重视。

    现在在制作网站的过程中,更多的网站优化细节是要注意的。毕竟网站框架结构和布局风格是网站建设过程中应该注意的网站建设细节。那么2020年开发网站需要注意哪些内容呢? 一、网站定位 每个企业在建设的时候都需要…

    2022年9月10日
    057
  • 网页设计流程是怎么制作和规划。

    随着互联网的发展,网站设计相关软件的发展得到了有力的推动,用于制作网页的工具软件也越来越丰富。但是,本文介绍的不是软件,而是网页设计和制作的详细流程。这篇文章主要是写给那些对网页设计师,网站经理和网…

    2022年9月10日 网站搭建
    0166

联系我们

QQ:951076433

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