如何从根本上提高你的网站性能(第一部分)
如何从根本上提高你的网站性能(第一部分)
原文：https://medium.com/hackernoon/how-to-radically-improve-your-website-performance-part-1-c728f4e5b08f
等待网站加载并不是一件愉快的经历。性能是 web 开发的支柱之一，每个开发人员都应该确保保持强大和正直。这可以深刻地影响用户第一次访问你的网站时的最初反应，并反过来影响你喜爱的产品或博客页面的订阅基础。
简介
我最终决定打破常规。很长一段时间以来，我一直想发布我通过多年的深入研究获得的知识，并与所有渴望提高编码技能和技术的开发人员公开分享。在接下来的几个月里，我将发表一系列文章，帮助你征服 web 开发的学习曲线。这也是一个巨大的个人挑战的一部分，在写作我的第一本书时将我的创造力推向极限。如果你有兴趣了解更多，请在这里关注我，不要错过我即将出版的书——《成为一名专业的 web 开发人员——T2》。
让我们详细看看如何创建最高效的网站，并关注 web 性能的力量。
在这篇文章中，你会发现对你的网站性能有重大影响的关键点。在你现有的或即将推出的网站中实施以下技术应该可以帮助你提高网站的页面速度和加载时间。我们将主要关注那些从零开始建立自己网站的开发者，但是很多信息也适用于那些使用在线服务(比如曾经流行的 WordPress)建立网站的人。
有三个主要类别可以帮助提高你的网站性能，每个类别都有自己的优点。
让我们开始吧:
让你的网站更轻松
是的，减少页面加载量是加快页面加载速度的关键的第一步。我们很多在家工作的人都有高速互联网，但我们也应该记住，还有数百万人没有我们这么幸运。尽管移动互联网速度正在赶上 LTE 连接，但仍有很大比例的用户使用 3G 甚至 2G 网络连接。
减少框架和库的使用(不要让使用这些成为习惯)
我经常看到网站使用庞大复杂的库(jQuery、AngularJS、React 等)只是为了实现一些效果，比如隐藏和显示元素，或者在点击事件中改变一些文本。不幸的是，许多早期的开发者通过使用库和框架找到了快速入门和发布他们的第一个网站的方法，却不知道它们为什么存在。我们认为这是开始开发网站所必需的。是的，它们确实提供了易用性，而且我们都必须从某个地方开始，我们都需要时间来学习。请记住，这些库和框架是为更复杂的网站和 web 应用程序准备的，这些网站和应用程序有数百个开发文件，需要团队协作，从而改进工作流和编码与可用指南的一致性。
如果你只是有一个个人网站，或者想创建一个简单的作品集页面，我鼓励你试着从头开始创建。它没有你想象的那么可怕！而 web 开发的伟大之处在于，你可以随时看一看其他主要网页的页面源码(右击页面，进入“查看页面源码”)。这是我学到最多的。我查看了脸书和谷歌等其他热门网站的源代码，进行了比较，并搜索了我不知道的代码的含义。通过减少库和框架的使用，你不仅可以让你的网站更轻便，还可以大大提高你的编码技能。
使用移动优先的方法
在这个世界上，移动电话正在成为检查在线应用程序或网站的首选设备，我们需要重新思考我们的发展建设战略。通过使用移动优先的方法，我们首先为移动设备提供浏览整个网站所需的数据量。它还会让你专注于网站运行真正需要的东西，并把自己推向极限，尝试找到访问网站特定部分的最佳方式，只需最少的点击和努力。虽然设计在给用户留下深刻印象方面起着重要的作用，但是保持网站简单易用也是至关重要的。使用平板电脑和桌面设备的媒体查询。使用这些，我们可以请求专门用于移动设备的较小尺寸的图像和图标，而较大的较高分辨率的图像和图标将相应地仅用于平板电脑或桌面设备。
提示:谷歌现在给移动响应网站更高的排名
开发文件的压缩
这非常简单且易于实现。我们所有的样式表(CSS)和脚本(JS)文件都可以通过使用现成的在线压缩服务来简化。压缩这些文件会删除文件中所有不必要的“空格”和“回车”,同时通常还会将局部变量名称更改为单个字符。一些强大的服务还会检查其他复杂的方法，以尽可能地不断减小文件大小。不要试图在开发过程中使用它，尽可能保持文件的可读性，将文件压缩作为生产前的最后一步。这就是为什么您通常会看到两组文件，如“example.css”(这将是开发文件)和“example.min.css”(这将代表最终缩小的生产文件)。使用这个 CSS 压缩工具查看 CSS 压缩文件的区别。默认情况下，一些主机服务还会在将 HTML 文件发送到浏览器之前对其进行压缩。
优化您的图像
有多种方法可以改善你的图片，继续降低你网站的权重。
- 压缩图像文件。JPEG、PNG 和 GIF 图像都可以压缩。这是一种有损压缩算法，在保持所需质量水平的同时，将图像缩小到尽可能小的尺寸。令人印象深刻的是如何保持相同水平的图像质量，同时将文件大小减少一半！Optimizilla 在这方面做得很好。
- 为你的网站图标使用 SVG(可缩放矢量图形)。SVG 图标的优势不仅在于它的尺寸比 PNG 图标小，而且与分辨率无关。这意味着，无论是在高分辨率显示器上还是在旧设备上看到图标，图像都会看起来很清晰，从而消除了多个图标支持不同分辨率的需要。图标的宽度和高度也可以调整，而不用担心它变得模糊——非常适合今天的响应网站！
- 使用精灵表。在本文第 2 部分的“服务器端改进”一节中有更多关于实现这一点的内容。
提高后端和前端性能
函数、方法和类的有效使用
如果你的网站包含很多后端处理，确保优化你的代码。代码的效率和没有遵循有效的术语，例如 DRY(不要重复自己)，只是性能停顿的一些主要因素。充分利用后端代码中的函数、方法和类也有助于维护一个良好的环境，使查找和修复错误变得更容易，并为多个用户改善站点的整体性能和呈现。
使用 SQL 查询从数据库中获取数据
这也是我们许多人在开发数据密集型应用程序时容易犯的一个常见错误。不要使用后端代码本身内部的条件循环通过单个 SELECT 语句。相反，我们将沉重的负担直接放在数据库查询本身上。SQL 的性能比从我们的后端代码调用多个查询要快得多。这也保持了代码的整洁和可维护性。
更新到 PHP 7(对于那些使用 PHP 作为后端语言的人来说)
只需将您的服务器升级到 PHP 的最新版本——在撰写本文时是版本 7——就可以将您的服务器端性能提高 2 倍！我不是在开玩笑，看看这个关于 PHP 7 的五大特性的研究吧。在升级之前，请务必查看新文档中您当前可能正在使用的任何不推荐使用的功能。
异步 JavaScript
“懒惰加载”这个术语我们以前并不是没有听说过。它最初是一个术语，用于逐批递增地上传一长串图像，让用户在上传的同时查看前几个图像——因此有了这个术语——异步上传“后面”的其他图像。但是我们能实现的还有更多锦囊妙计(这也是你每天访问脸书新闻页面时可能会经历的事情)。用户访问网站时首先看到的是登录页面。专注于尽可能快地获取适当显示第一页所需的数据。一个 JavaScript 函数将后一种数据称为“幕后数据”,以使网站看起来加载更快。所有这一切都发生在短短几毫秒内，而且终端用户通常不会察觉。
超折内容
浏览器需要立即绘制的样式应该放在 html 文档的中。这将消除对单个请求的需要，也消除了浏览器等待文件被获取以开始样式化 DOM(文档对象模型)的需要。这消除了你打开新网页时有时会注意到的瞬间延迟。 Google page-speed 是一个提高你网站性能的伟大工具，它给了你如何提高你网站整体性能的伟大提示。
下层内容
与上述内容不同，这是完全相反的。这主要用于 JavaScript 文件。不影响我们的站点呈现的数据，或者需要先加载 DOM 的数据，应该放在文件的末尾，就在结束的 body 标签(
未完待续…
在本文的第一部分，我们探讨了如何通过尽可能减少内容和媒体的负载来有效提高网站性能。我们还研究了如何通过优化后端编码和其他实用但鲜为人知的技术来快速呈现我们的内容，这些技术目前被所有专业 web 开发人员使用。在本文的下一部分，也是最后一部分，我们将对服务器端的改进有一个独特的看法。
请继续关注我，或者加入我的时事通讯，这样你就不会错过下一个从根本上提高你的网站性能的关键技术！
更从欧文远:
是时候升级游戏，在你最喜欢做的事情上变得伟大了！
hackernoon.com](https://hackernoon.com/how-to-radically-improve-your-website-performance-part-2-2bbbfa7b567f) [## 从头开始建立网站的优势
大多数和我谈论我正在开发的产品或网站的人，倾向于问我是否在使用任何…
hackernoon.com](https://hackernoon.com/the-advantages-of-building-your-website-from-scratch-da5748a1baaf) 
