提高网站加载速度的一些小技巧

站长手记作者： 2024-08-27 23:15:01

为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争，拥有一个吸引人的网站可以帮助你脱颖而出。研究表明，如果加载时间超过3秒，会有 40％的用户放弃访问你的网站

翻译：疯狂的技术宅
原文：https://likegeeks.com/improve...

为你的页面元素选择正确的加载顺序

服务器性能可能会导致页面加载问题

优化代码很重要

优化之前：

function test(node) { var parent = node.parentNode; if (0) {
        alert( "Hello Everybody" );
    } else {
        alert( "We love Websites" );
    } return;
    alert( 1 );
}

优化后：

function test(){alert("We love Websites")}

了解延迟和异步标记

<html> <head> <script src="big.js"></script> </head> <body>

    </body> </html>

<html> <head> <script src="big.js" async></script> </head> <body>

    </body> </html>

注意复杂的文件格式和大图像

未使用的 .JS 库组件

使用 GZIP 模块是理想的选择

const gzip = zlib.createGzip(); const fs = require('fs'); const inp = fs.createReadStream('input.txt'); const out = fs.createWriteStream('input.txt.gz');
 
inp.pipe(gzip).pipe(out);

Be Aware of Code Density

意识到代码密度

处理太多文件请求

避免使用太多插件

适当的用 CSS3 效果而不是 JavaScript

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Slider</title> </head> <body> <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/"> <div id="slider"> <figure> <img src="austin-fireworks.jpg" alt> <img src="taj-mahal_copy.jpg" alt> <img src="ibiza.jpg" alt> <img src="ankor-wat.jpg" alt> <img src="austin-fireworks.jpg" alt> </figure> </div> </body> </html>

@keyframes slidy { 
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
} body { margin: 0; } div#slider { overflow: hidden; } div#slider figure img { width: 20%; float: left; } div#slider figure { position: relative; width: 500%; margin: 0; left: 0 text-align: left; font-size: 0; animation: 30s slidy infinite;
}