Question

我知道该网站是基于图像的，我尽可能多地限制插件并压缩CSS和样式。它不应该像它一样慢。有什么理由为什么我或我可以做些什么来加快它？感谢

Answer 1

在我看来

1-你使用了太多的CSS和javascript
2-消除上层内容中的渲染阻止JavaScript和CSS 3-你应该优化你的形象
4-您可以将服务器升级到更快的服务器
5-启用压缩和浏览器缓存
和.....

编辑：如何改进以上步骤：

1-为了获得更好的性能，最好将页面大小保持在600kbit以下，因为我们使用主题或插件，如果可以的话，将模板更改为优化版本并减少不必要的插件。另一方面，有一些功能可以通过几个代码来处理，但我们宁愿安装一个新的插件，所以新的插件有自己的javascript和css

2 - 将所有javascript代码放在页脚befoter </body>（help）上，并为你的css创建一个javascript加载器，将你的css插入头部。（help）简单示例渲染阻挡的

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <!-- do not insert css or javascript here -->
</head>
<body>
<!--
 #################
    contents
#################
 -->
<script type="text/javascript" src="/dis/cssloader.js"></script>
<script type="text/javascript" src="/dis/scripts.js"></script>
</body>
</html>

和你的cssloader

//cssloader.js
var version = "?v1";
var cb = function() {
    var styles = [
        "/dist/custom1.min.css",
        "/dist/custom1.min.css",
    ];
    var h = document.getElementsByTagName('head')[0];
    for (var i = 0; i < styles.length; i++) {
        var l = document.createElement('link');
        l.rel = 'stylesheet';
        l.href = styles[i]+version;
        h.appendChild(l);
    }
};
var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);

3-优化图像意味着尽可能地缩小图像比例，并将图像保存为网页（如果您使用的是Photoshop，它可以选择执行此操作，很明显它会降低图像质量）

4-sometime只是服务器上的一些配置，提高了它的性能 5-如果你正在使用apache，你应该在你的apache配置上添加一些代码行，以便启用comperssion和caching，你也可以.htaccess git describe执行此操作（help）{{3 }}）

Answer 2

这会受到奇怪的Javascript和CSS的影响。将它们分别缩放为单个文件或至少一致地使用它们的缩小版本将有所帮助，但对于单个页面 7.1MB ，包括1.1MB图像，您可能会认为您正在做关于页面设计和图像使用的根本错误。即使在快速的桌面上，这也很慢，即使使用缩小的样式和脚本（并且调整大小，而不仅仅是优化＆＃39;，图像），在移动设备上它仍然无法使用。

编辑：该尺寸是启用了ghostery，所以它可能有点偏低，而那些不会做任何事情来帮助你加载时间。

关于为什么网站速度慢/如何加快的建议？

2 个答案: