除了定义网站可用性的参数外，速度是最重要的。一个由最先进的技术和框架制成的网站，如果它的加载时间像一只移动的蜗牛，那么它的加载时间将是毫无用处的，并且具有最直观的界面。
用户可以通过三种不同的形式感知网站的速度，它们是：
(1)加载速度这是站点在调用它的设备上加载所花费的时间。它可以是台式机、笔记本电脑、平板电脑、智能手机或平板手机。此速度主要受用户所依赖的互联网连接的影响，但也受网站上使用的图像、文档等文件大小的影响。您不能对互联网连接做太多事情，但绝对可以对您网站中存在的文件做很多事情。
(2)渲染和处理时间将所有文件下载到计算机浏览器后，用于处理 html、CSS、JS 等并为用户渲染图像。所有处理时间取决于代码结构，渲染取决于多媒体文件的质量。越是非结构化的代码和高质量的文件，用于处理和渲染的时间就越多。用户可以非常轻松地控制代码和多媒体。
(3)感知的网站速度这不是一个存在的速度，它只存在于用户的脑海中。一个快速的网站可能看起来很慢，而一个缓慢的网站可以通过一些巧妙的改变看起来很快。一个典型的例子是在 html 文件中放置
在处理好速度之后，让我们现在开始优化代码。
加速 CSS
大多数开发人员都很难使用 CSS。他们花更多的时间修补它，而不是花在网站的任何其他部分上。未使用的 CSS 代码只会将字节添加到您的网站大小。所以，如果你想优化，那么 CSS 是一个很好的起点。
花时间找出未使用的代码并将其删除。
明智地使用 CSS 选择器。像“:first-child”和“pseudo”这样的选择器是最慢的。尽量减少它们的使用。
注意 box-shadow 之类的属性，它们需要更长的时间来渲染并使加载速度变慢。移动设备可以感受到明显的延迟。
CSS 动画很酷，但会消耗 GPU，并且肯定会减慢整个加载过程。只在必要时使用，不要炫耀。
压缩你的 CSS。压缩将处理注释和空白并减小大小。
加速 JS 文件
Javascript 可能会让人头疼，并且对网站速度的影响比 CSS 更直接。最糟糕的部分是 JS 文件通常比 CSS 重，即使它只包含最低限度的功能。
同样，移动设备上的客户可以感受到加载速度的显着滞后。如果您依靠插件来完成工作，那可能会很糟糕，因为两个插件可能无法正确互补，并且会使网站不必要地繁重。以下是处理 JS 的一些步骤。
尽可能对 JS 文件和 CSS 使用 CDN。它包括 http 请求，但这些将被浏览器缓存以备后用。
始终在 body 标签末尾添加 JS 文件，以便加载 HTML 和 CSS。
如果可以，请避免使用框架，但如果不能，则框架同时提供缩小文件和普通文件。除非您需要调整代码，否则出于包含目的使用压缩版本。也遵循相同的 CSS 准则。
图片
与 JS 和 CSS 一样，图像会导致加载速度下降。图片的分辨率越高，网站的运行速度就越慢，并且使用 Retina 显示和诸如 unsplash 和 stocknap 高分辨率图片之类的网站可用，并且开发人员可以在不压缩的情况下使用它们。仅仅因为屏幕有显示能力并不意味着这个问题就解决了。GPU 和带宽等变量仍然控制着方程式。以下是您可以对图像执行的几项操作。
仅使用适合该站点的分辨率。仅仅因为更高的分辨率可用并不意味着您必须使用。
使用 Photoshop 或一些在线工具压缩图像。
将图像裁剪为必要的大小。完全不需要像 3730x2100px 这样的尺寸。
尽可能使用 svg 格式的图像和图标。
使用响应式图像。
由于有限的带宽和 GPU 消耗，互联网上的比特数非常多。Web 开发人员更加有意识的努力可以使客户的体验更加愉快。
关注素马设计，阅读更多与网站设计相关文章，可以给你获取更多灵感。
