如何让我的网页加载速度更快？

Question

假设一个空浏览器缓存 - 如何仅通过应用HTML/CSS/JavaScript代码更改来加快网页加载速度？

这意味着,不建议使用CDN等移动服务器.只需更改代码以使其加载速度更快.

Answer 1

根据我的经验:

(1)为Firefox 安装YSlow和Page Speed扩展,并尽可能遵循他们的建议.

(2)非常重要:为保存图像,JS和CSS文件的目录配置HTTP缓存.我只是把它们放在一个名为的目录中static并放在这个.htaccess文件中:

<IfModule mod_headers.c>
    Header set Cache-Control "max-age=29030400, public"
</IfModule>
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault A29030400
    ExpiresByType image/x-icon A29030400
    ExpiresByType application/x-javascript A29030400
    ExpiresByType application/javascript A29030400
    ExpiresByType text/css A29030400
    ExpiresByType image/gif A29030400
    ExpiresByType image/png A29030400
    ExpiresByType image/jpeg A29030400
    ExpiresByType text/plain A29030400
    ExpiresByType application/x-shockwave-flash A29030400
    ExpiresByType video/x-flv A29030400
    ExpiresByType application/pdf A29030400
    ExpiresByType text/html A29030400
</IfModule>

(3)从HTML文件中获取CSS代码并将其放入单独的CSS文件中.

(4)将JS文件合并到一个文件中.然后使用JSMin压缩此文件将很有用.

(5)在Apache中打开gzip压缩以获取静态文本文件.如果您mod_deflate在Apache服务器上,请将其放入.htaccess您的网站根目录中的文件中:

<IfModule mod_headers.c>
    <FilesMatch "\\.(js|css|html|htm|php|xml)$">
        SetOutputFilter DEFLATE
    </FilesMatch>
 </IfModule>

Answer 2

将您的JS和CSS移出HTML并将其移动到每个缩小的文件中.此外,如果可以,请减小任何图像的大小.我没有注意到任何翻转图像,但如果你有它们,请考虑CSS精灵.

Answer 3

考虑到HTML和CSS除了下载之外没有加载时间,如果你不愿意考虑将它移动到外部文件或使用压缩等服务器端解决方案,那么你无能为力除了缩小实际代码大小.实际上,这不会对您的网页产生太大影响.

就你的Javascript来说......你在页面中有大量的内联,这可能是你速度慢的原因.不幸的是,我不能花一个小时的时间来为你描述一切.Stack Overflow不是免费工作......如果你愿意缩短到特定区域的缓慢程度,我很乐意帮助分析它,但要求有人带你的整个网站并从头开始分析它有点多.

Answer 4

阅读并应用史蒂夫·索德斯曾写过的所有内容(特别是但不仅仅是他的两本精湛的书籍),这只是关于这些问题的全部内容(可能有10%的精彩推荐是你不想听到的,比如使用CDN,但绝大多数都是你所要求的目标.