让你的网站变慢的 18 件事
已发表: 2015-10-23优化您网站的加载时间是一种双赢的方法，可以让您的网站访问者保持快乐并增加您的在线业务产生的收入。
为了阐明所有那些减慢您网站速度的问题，我们邀请了 Stavros Papadakis 展示他加快慢速网站速度的过程。
是什么让您的网站变慢？
您绝对应该查看我之前的帖子，了解 16 种加快 WordPress 网站速度的方法。
尽管这篇文章提供了一个快速检查清单，其中包含优化 WordPress 网站加载时间的最佳调整，但仍有许多问题会减慢您的网站速度。
如果您已对 htaccess 文件启用压缩、合并 CSS 文件、将 Javascript 文件移动到页脚，但您仍然对网站的加载时间不满意，请检查这 18 个常见问题，这些问题会降低您的网站速度。
1. 超重的网站
毫无疑问，一个 3MB 的页面发出 180 个 HTTP 请求会比一个 1MB 的网站发出 60 个 HTTP 请求要慢。
您想优化网站的加载时间吗？
做到这一点的最佳方法之一是最小化网站每个页面的大小。
尽管您可以优化图像、合并 CSS 文件、缩小 Javascript 文件并应用许多前端优化调整，但拥有 3MB 的网站会使您的网站变慢并且网站用户不满意。
21MB 对您的服务器和浏览器来说是一个巨大的负载。
在设计或重新设计网站时，您应该尽最大努力只加载您需要的内容，仅此而已。
换句话说，你应该经常问自己：
主页上的幻灯片中我真的需要 8 张大图吗？
我必须在主页上显示 20 个投资组合项目吗？
我应该在主页上显示 12 个快乐用户的评价还是 3 个评价也能达到目的？
加载所有这些数据会使您的网站看起来不错，但由于所有这些数据，您的网站也会变慢。
你想拥有一个加载缓慢的网站吗？ 如果没有，请尽量减少网站每页加载的数据。
2.未优化的图像
您知道加载网站所需的 80% 时间是由前端结构控制的吗？
这是 Web 性能优化的一个惊人事实。
80% 的最终用户响应时间都花在了前端。 专注于此。
您可以尝试优化您的数据库或 PHP 代码，但如果您忽略这一至关重要的事实，那么您的网站将会很慢。
一个 460KB 的 PNG 文件通过优化可以变成 90KB。
如果您的站点上有 10 个未优化的图像，那么您可能会增加 2-3 MB 的额外页面加载量。
如果您不优化图像，那么您网站的加载时间可能会受到严重影响。
好消息是，通过使用 Photoshop、ImageOptim 或 Kraken 等第三方工具对其进行优化，大多数 JPG 和 PNG 图像可以在不损失图像质量的情况下缩小 40% 甚至高达 80%。
3. 过度使用广告
Google Adsense 和其他类似服务可以为您带来额外的收入来源，但它们也会降低您的网站速度。
使用 2 或 3 种不同广告服务在标题、右侧边栏、帖子正文和页面底部加载广告的网站将比只有 1 个广告的网站慢得多在右侧边栏或帖子正文中。
广告不仅让大多数用户感到恼火，而且还会减慢您的网站速度。
请查看客户网站的以下屏幕截图。
你真的需要所有这些烦人的广告吗？
信不信由你，里面有 4 个不同的广告，一个在屏幕截图顶部，一个是广告视频，一个在右侧边栏，另一个在页面底部！ 不用说，这些广告对大多数用户来说都很烦人，并且也会减慢您网站的加载时间。
总而言之，应始终谨慎使用广告。 只要广告不赚钱，就应该被删除。
4. 图像尺寸错误
您不应该在 HTML 中缩放图像，您应该调整大图像的大小并改用调整大小的图像。
例如，假设您有一个 1200 像素 x 600 像素的图像，并且您想使用它的“较小”版本，例如 400 像素 x 200 像素。
在这种情况下，不要使用原始图像并通过更改 HTML 中的宽度和高度尺寸来缩小它。
您必须通过将原始图像的大小从 1200 像素 x 600 像素调整为 400 像素 x 200 像素来创建新的缩略图图像，并使用更小且加载速度更快的新图像。
我遇到过许多网站，它们曾经加载 150KB 的 256 x 256 facebook 图像，而不是 2KB 的 32 x 32 facebook 图标！
5. 无意义的重定向
我有一个快速测验给你。
以下哪一张图片加载速度更快，A、B、C 还是 D？
A. http://www.domain.com/image.jpg
B. http://domain.com/image.jpg
C. https://www.domain.com/image.jpg
D. https://domain.com/image.jpg
你选A了吗？ 错误的。
你选B了吗？ 错误的。
你选C了吗？ 错误的。
你选D了吗？ 又错了！
正确的答案是这取决于您的网站！
如果您的站点是 https://www.domain.com，那么通过调用图像的非 HTTPS 版本（http://www.domain.com/image.jpg），将会有一个来自 http 的额外重定向： //www.domain.com/image.jpg 到 https://www.domain.com/image.jpg 由浏览器加载图片。
如果您为您的站点 (http://domain.com/) 使用非 www 版本，那么您也应该始终为您的图像使用非 www 版本（例如 http://domain.com/image。 jpg 而不是 http://www.domain.com/image.jpg)。
浏览器不喜欢这种毫无意义的重定向。
毫无意义的重定向会减慢您的网站速度
通过为您的文件使用相对 URL（例如 <img src="//eadn-wc04-1126528.nxedge.io/image.jpg" />），您可以轻松摆脱这个减慢加载时间的常见问题您的网站。
6.错误的服务器位置
如果您网站的流量主要来自美国或英国，那么您的网站应分别由位于美国或英国的托管公司托管。
服务器离您网站的访问者越近，您的网站就会越快。
不用说，如果您获得来自世界各地的流量，那么我强烈建议您使用内容交付网络或 CloudFlare，以便从靠近每个用户位置的服务器加载图像、CSS 和 Javascript 文件。
7. 狡猾的共享主机计划
没有人愿意为托管网站支付 $$$，但通过每月 5 美元的共享托管计划为拥有 40 个活动插件的 WooCommerce 网站或拥有 5000 种产品的 Magento 网站提供服务是灾难的根源。
您应该始终投资于一家好的托管公司，以便为您的网站获得最佳加载时间。
如果您的网站不可用或速度很慢，那么您可以通过使用共享托管计划每月节省几美元，但您会因失去客户而损失更多（访问加载缓慢的网站的用户不会重新访问该网站）。
如果您有一个使用 Woocommerce 或许多活动插件的大型 WordPress 网站，那么我强烈推荐 WP Engine 和 FlyWheel（附属链接）。
您不应该期望每月获得 200.000 次唯一访问来升级到 VPS，当您将网站托管在同一台过载的服务器上，上面有数百个网站时，这种情况永远不会发生。
8. 过度使用社交媒体脚本
社交媒体（Facebook、Twitter、Pinterest 等）脚本添加 DNS 查找、一组 Javascript 文件和一些图像，以及在页面中添加它们时。
尽管其中许多共享选项应该在您的帖子末尾提供，以便您的用户可以轻松地共享您的帖子，但在每个页面上加载所有这些共享选项是没有意义的。
在每个页面（例如在联系页面或您的类别页面）中加载这些社交媒体图标有什么意义？
在主页或类别页面上为每个帖子显示 5 个不同的社交媒体计数会为您的网站增加大量负载。 在这些页面上显示计数有多重要？ 您是否还需要展示 Facebook、Twitter、Pinterest、Google Plus 和 LinkedIn？
太多的社交媒体脚本会影响您网站的性能
您最好只展示对您来说表现良好的 1 或 2 个吗？ 如果您没有获得很多股份，那么显示任何股份有什么意义吗？
在您的网站页面中添加任何社交媒体选项之前，您应该始终三思而后行。
9. 图像文件类型错误
如果您需要图像的透明度，那么您无法避免使用 PNG 文件类型，但是如果您不需要透明度，则永远不应将图像保存为 PNG 文件，因为它们的文件大小比 JPG 图像要大得多。
最小化甚至消除任何沉重的 GIF 文件，因为它们会大大减慢您网站的加载时间。
您还应该尽量避免将带有文本的图像保存为内容，因为编辑图像上的文本可能是一个耗时的过程，并且生成的图像也更重。
使用 JPG 作为您的默认值。 对于大多数文件来说，它是最小和最快的加载文件类型。
10. 不利用专用服务
有大量流行的服务可以减少服务器的负载。
您的网站上有视频吗？ 您应该使用 Youtube、Wistia 或 Vimeo。
您对您的网站有很多评论吗？ 您应该使用 Disqus、IntenseDebate 或
话语。
你使用 jQuery、jQuery UI、AngularJS 还是 Mootools？ 您应该通过 Google 托管的库加载它们。
您是否使用 WordPress 并显示热门帖子？ 您应该使用 Jetpack 自动为您执行此操作。
您还可以使用内容交付网络 (CDN) 从它而不是您的站点来提供您的图像。
如果您的网站获得大量流量并且您加载了许多图像和视频，则可以通过使用上述技巧平衡网站的工作负载来大幅优化网站的加载时间。
11. 404错误
如果您尝试加载一个不存在的文件或浏览器找不到，那么您网站的加载时间将受到此 404 HTTP 错误的影响。
您应该始终在页面呈现期间检查任何 404 错误，以实现最快的加载时间。 您可以通过使用 Webpagetest 和 GTMetrix 检查您网站生成的瀑布，或使用 Chrome 和 Firefox 等浏览器的网络选项卡来做到这一点。
如果 Webpagetest 在瀑布上显示任何红线，那么您应该立即排除故障并修复这些 404 错误。
404 错误会破坏加载时间
这种错误确实会破坏您网站的加载时间，特别是如果您通过共享托管计划为您的网站提供服务。
12.不缓存你的网站
每个内容管理系统（WordPress、Joomla、Drupal、Magento）都使用数据库来保存大量数据。
尽管这对于管理您的站点非常有用，但这也意味着它会在您的服务器上增加额外的负载，以便在每次请求时生成每个页面。
您可以通过使用缓存来解决此问题。
如果您使用 WordPress，那么您可以使用缓存插件，例如
W3 Total Cache 或 WP Super Cache 或 ZenCache 或使用托管服务器托管公司，例如负责缓存的 WP Engine 和 FlyWheel（附属链接）。
不用说，Joomla、Drupal 和 Magento 也提供缓存选项，通过为后续站点访问者提供站点的缓存版本而不是一遍又一遍地生成每个页面，这可以提供很大帮助。
缓存您的页面可以大大加快您的网站速度
缓存对于任何数据库驱动的网站来说都是轻而易举的事。 即使是 10 分钟的缓存期也可以极大地优化您网站的加载时间。
13.数百个HTTP请求
您网站上加载的每个 CSS 文件、Javascript 文件或图像都是一个 HTTP 请求。 您的网站拥有的 HTTP 请求越多，您的网站就会越慢。
尽管您可以尝试结合 CSS 和 Javascript 文件、内联 CSS 文件并将 CSS sprites 用于小图像，但如果您实施了这些调整并且仍然有 150 个 HTTP 请求，那么您显然应该尝试通过从它。
246 HTTP 请求会减慢您的网站，无论它如何优化
我知道在您网站的每个页面中显示大量内容很诱人，但请记住“少即是多”，因此尽量不要加载太多图像或脚本。
14. 糟糕的服务器配置
如果您采用共享托管计划，那么他们会尽最大努力为每台服务器提供尽可能多的站点，这是很常见的。
他们通常通过禁用压缩和 KeepAlive 等功能来做到这一点。
启用 HTTP Keep-Alive 允许同一个 TCP 连接发送和接收多个 HTTP 请求，从而减少后续请求的延迟。
压缩会减小从服务器发送的文件的大小，以提高它们传输到浏览器的速度。
如果您使用的是共享托管计划，并且您的托管公司已禁用压缩和 Keep-Alive，那么您应该尽快更换托管公司。
应在您的服务器上启用 Keep-Alive 和压缩
15. CSS 导入
CSS 导入是在新 CSS 文件顶部导入 CSS 文件的好方法，例如导入 CSS 重置文件，但它也会在网页加载期间增加额外的延迟。
您应该尽可能避免 CSS 导入。
16.在每个页面上加载不必要的文件
仅当站点页面上需要它们时才应加载 CSS 和 Javascript 文件。
例如，如果仅在单个页面上需要特定的 Javascript 文件，在这种情况下，您应该仅在此 URL 处加载该 Javascript 文件，而不是在您网站的每个页面上加载它。
如果您不遵循这个简单的规则，那么您最终可能会在一个页面上加载 30 个 CSS 和 40 个 Javascript 文件，而该页面只需要 3 个 CSS 和 4 个 Javascript 文件，因此您会发出 63 个额外的 HTTP 请求并在页面上添加数百千字节尺寸。
17.后台加载重文件
许多网站用于加载几乎不可见的大背景图像。
您真的需要在后台加载 500KB 的图像吗？ 您应该尽可能使用 CSS3 或使用背景颜色。
在您的网站加载时在后台加载声音文件也是一种不好的做法。
这些技术中的大多数都会降低您的网站速度，应该避免使用。
18. 不使用专家
我的目标是为您提供足够的信息来开始修复您网站加载缓慢的页面。
优化您网站的加载时间对于您和访问您网站的每个人来说都是双赢的局面。 更快的网站意味着更高的转化率、更好的搜索引擎排名和更愉快的用户体验。
当你想把工作做好时，最好聘请专家。
业余爱好者可以遵循最佳实践，但不知道从哪里开始。
专家将解决降低您网站速度的实际问题。
每当业余爱好者不知道您网站的真正问题时，他们会推荐一个毫无意义的临时解决方案，例如移动主机、更改主题、安装不同的缓存插件甚至切换 CMS。
我的许多客户都在业余爱好者身上浪费了时间和金钱，他们刚刚安装了缓存插件而没有解决他们网站的实际问题。
您应该始终记住，每个网站都是独一无二的，因此必须对每个网站应用不同的速度优化调整。
总而言之，优化网站的加载时间应始终由专家来完成，他们将以手术精度执行速度优化调整。
想象一下您的用户看到超快的加载时间会多么高兴！
如果你想雇用我，我很乐意帮助你。 立即查看我的作品集并在 AwesomeWeb 上与我联系！