linux提高静态库性能
几个月前，我正在美国以外的地方旅行，想向朋友展示我的个人（静态）网站上的链接。 我尝试导航到我的网站，但所需时间比我预期的要长得多。 绝对没有任何动态变化-它具有动画和一些响应式设计，但是内容始终保持不变。 对于结果，我感到非常震惊，DOMContentLoaded大约需要4s，整页加载大约是6.8s。 静态站点有20个请求，传输的数据总量为1mb。 我习惯了洛杉矶的1Gb / s，低延迟的Internet连接到旧金山的服务器，这使这种怪异现象看起来像闪电般快速。 在意大利，速度为8mb / s，完全是另一回事。
这是我第一次尝试优化。 到目前为止，任何时候我想添加一个库或资源，我都将其放入并使用src =”…”指向它。 从缓存到内联再到惰性加载，我对任何形式的性能都没有给予任何关注。
我开始四处寻找有类似经历的人。 不幸的是，许多关于静态优化的文献很快就被淘汰了——2010年或2011年的建议讨论了库，或者做出了根本不再成立的假设，或者一遍又一遍地重复了同样的准则。
但是，我确实找到了两个很好的信息来源- 高性能浏览器网络和Dan Luu在优化静态网站方面的类似经验 。 虽然我在剥离格式和内容方面没有达到Dan的水平，但我确实设法使页面加载速度提高了大约10倍，对于DOMContentLoaded而言，它的加载速度提高了约五分之一秒，而对整个页面加载的速度只有388ms（实际上，有点不准确，因为它会影响下面解释的延迟加载）。
流程
该过程的第一步是对站点进行概要分析。 我想弄清楚花费时间最长的东西，以及如何最好地并行化所有东西。 我运行了各种工具来描述我的网站并在世界各地进行测试，包括：
- https://tools.pingdom.com/
- www.webpagetest.org/
- https://tools.keycdn.com/speed
- https://developers.google.com/web/tools/lighthouse/
- https://developers.google.com/speed/pagespeed/insights/
- https://webspeedtest.cloudinary.com/
其中一些提供了改进建议，但是当您的静态站点有50个请求时，您只能做很多事情-从90年代留下的间隔gif到不使用的资产（我正在加载6种字体和仅使用1）。
我想改善我可以控制的所有内容-从javascript的内容和速度到实际的Web服务器（Nginx）和DNS设置。
最佳化
缩小和合并资源
我注意到的第一件事是，我分别向CSS和JS（没有任何形式的HTTP Keepalive）发出了十几个请求，并向各个站点发出了一些请求，其中一些是https。 这增加了对各种CDN或服务器的多次往返，并且一些JS文件正在请求其他文件，这导致了上面看到的阻塞级联。
我使用webpack将所有资源合并为一个js文件。 每当我更改内容时，它都会自动缩小并将所有依赖项转换为一个文件。
我使用了不同的选项-当前，这个bundle.js文件位于我网站的<head>中，并且正在阻止。 最终大小为829kb，其中包括每一个非图像资产（字体，css，所有库和依赖项以及js）。 其中绝大多数是超棒的字体，它占了829kb的724kb。
我浏览了Font Awesome库，除去了我正在使用的三个图标（fa-github，fa-envelope和fa-code）。 我使用了一项名为fontello的服务，仅提取所需的图标。 新的大小仅为94kb。
当前网站的构建方式，如果只有样式表，它看起来将不正确，因此我接受了单个bundle.js的阻止性质。 加载时间约为118毫秒，比上述时间要好一个数量级。
这也带来了一些额外的好处-我不再指向第三方资源或CDN，因此用户无需1）对该资源执行DNS查询，2）执行https握手，以及3）实际上等待该资源的完整下载。
尽管CDN和分布式缓存对于大规模的分布式站点可能有意义，但对于我的小型静态站点却没有意义。 额外的一百毫秒左右是值得的折衷。
压缩资源
我正在加载一个8mb大小的头像，然后以10％的宽度/高度显示它。 这不仅仅是缺乏优化-这几乎是用户带宽使用的疏忽 。
我使用https://webspeedtest.cloudinary.com/压缩了所有图像-它还建议我切换到webp ，但是我想保持与尽可能多的浏览器兼容，所以我坚持使用jpg。 可以设置一个系统，在该系统中，仅将webp交付给支持它的浏览器，但我想保持尽可能的简单，而增加抽象层的好处似乎并不值得。
改进Web服务器-HTTP2，TLS等
我做的第一件事是过渡到https-开始时，我在端口80上裸机运行Nginx，仅从/ var / www / html提供文件
我首先设置https，然后将所有http请求重定向到https。 我从Let's Encrypt （一个很棒的组织，也刚刚开始签署通配符证书 ！）获得了TLS证书。
只需添加http2指令，Nginx就可以利用所有最新的HTTP功能带来的现代功能。 请注意，如果要利用HTTP2（以前称为SPDY），则必须使用HTTPS。 在此处了解更多信息。
您还可以在http2_push images / Headshot.jpg中利用HTTP2推送指令；
注意：启用gzip和TLS可能会使您面临BREACH的风险。 因为这是一个静态站点，并且实际发生BREACH的风险非常低，所以我感到很舒服。
利用缓存和压缩指令
仅Nginx还能完成什么？ 跳出的第一件事是缓存和压缩指令。
我正在发送未压缩的原始HTML。 只需一个gzip即可； 行，我能够从16000字节增加到8000字节，减少了50％。
实际上，我们实际上可以进一步提高这个数字-如果将Nginx的gzip_static设置为on，它将在事前查找所有请求文件的预压缩版本。 这与上面的webpack配置齐头并进-我们可以在构建时使用ZopflicPlugin来预压缩所有文件！ 这节省了计算资源，并允许我们在不牺牲速度的情况下最大化压缩率。
另外，我的站点很少更改，因此我希望资源被尽可能长时间地缓存。 这样一来，在以后的访问中，用户将无需重新下载所有资产（尤其是bundle.js）。
我更新的服务器配置如下所示。 请注意，我不会涉及所做的所有更改，例如TCP设置更改，gzip指令和文件缓存。 如果您想进一步了解这些内容，请阅读有关调整Nginx的文章。
和相应的服务器块
延迟加载
最后，对我的实际网站进行了很小的更改，这将使事情有所改善。 直到您按相应的选项卡时才看到5张图像，但它们与其他所有图像同时加载（由于它们位于<img src =”…”>标记中）。
我写了一个简短的脚本来修改lazyload类中每个元素的属性。 这些图像仅在单击相应的框后才会加载。
因此，一旦文档完成加载，它将修改<img>标记，以使它们从<img data-src =”…”>变为<img src =”…”>，并将其加载到后台。
未来的改进
还有一些其他更改可以提高页面加载速度-最显着的是，使用Service Workers缓存和拦截所有请求，使站点甚至可以脱机运行，以及将内容缓存在CDN上，从而使用户无需执行全部操作。往返于SF中的服务器。 这些都是值得的更改，但对于充当在线简历/关于我页面的个人静态网站而言，并不是特别重要。
结论
这将我的页面加载时间从第一次页面加载时的8秒钟以上提高到了约350ms，而随后的页面加载时间则从约200ms缩短了。 我真的建议您通读所有高性能浏览器网络 -这是相当快速的阅读，并提供了现代互联网的写得很好的概述，并在现代互联网模型的每个层进行了优化。
我有想念吗？ 看到任何违反最佳做法或可以进一步改善我的表现的东西吗？ 随时与我们联系-JonLuca De Caro！
翻译自: https://hackernoon.com/optimizing-a-static-site-d5ab6899f249
linux提高静态库性能
4945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
