快速提高网站闪电访问速度的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月9日
    054
  • 具有海量关键词词库排名的高品质网站。

    如果一个网站假设只是通过搜索引擎优化发展起来的,那么这个网站现在的战斗能力是最强的。因为没有任何恶意用户的干扰,经过不断的原始积累,逐渐发展成为拥有海量关键词词库排名的优质网站。 而且通过关键词搜索进…

    2022年9月10日
    061
  • 精致网站设计要注意哪些要素。

    随着网络环境和技术的不断发展,做网站推广的企业越来越多。同时,很多行业的网站风格也不一样。现在要想通过网站带来流量和转化,设计吸引用户的网站是绝对必要的。那么精致的网站设计需要注意哪些元素呢? 1。网…

    2022年9月10日
    060
  • 企业网站如何更好地“立住”品牌形象。

    现在网站建设的市场竞争也很激烈,想要自己的网站能够更加与众不同,想要其更加具有吸引力,就先要做好网站的形象,来树立好相关的品牌形象,下面就带大家一起来了解一下。 1、初期明确好风格和方向 网站建设初期的…

    2022年10月20日
    031
  • 大型网站优化和中小型网站优化有什么区别。

    对于大型网站和中小型网站,目前没有严格的定义。中小型网站的特点是结构简单,内容少,管理相对容易。常见的中小型网站有个人博客站、企业网站等。然而,大型网站的结构复杂,包括会员系统、发布系统、付费系统等…

    2022年9月10日
    076
  • seo外包:网络整合营销外包的优势是什么。

    目前,随着互联网的快速发展,各种网络营销渠道和网络推广平台层出不穷。企业要想在网络营销中站稳脚跟,单一的营销渠道已经不能满足企业的需求。因此,网络整合营销非常重要。所以如何运用互联网思维进行网络整合…

    2022年9月10日
    0140
  • 手机网站设计应该注意什麽问题 。

    手机网站设计是当今一门突出的设计科学,从手机硬件的固有局限性、用户行为分析、响应式网页设计(RWD)& # 8230;这些显著的影响对设计师来说是一个巨大的挑战。下面给做手机网站的客户一些参考: [div][div] 1。…

    2022年9月10日
    057
  • seo优化的参数。

    出于SEO优化的目的: 1.外链构建: 我们说过,拓展外链最有效的方法就是创作高质量的原创内容,前提是要定期诊断内容写作策略,分析潜在目标用户,写出对方感兴趣的内容。 比如利用SEO专家,以及行业论坛,讨论热点新…

    2022年9月10日
    0110

联系我们

QQ:951076433

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