blocks|key|4531590|text|外部化JS和CSS声明，而不是将它们包含在内联中-这将是显而易见的。这样，用户只需下载一次即可，以后可以从缓存中使用它们。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4531591|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Externalize JS and CSS declarations instead of including them inline - that would be the obvious one. That way users can download them once and use them from their cache later on.

blocks|key|221318|text|将JS和CSS移出HTML，分别放入一个缩小的文件中。此外，如果可以，请减小任何图像的大小。我没有注意到任何翻转图像，但是如果你有的话，考虑一下CSS精灵。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|221319|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Move your JS and CSS out of the HTML and into one minified file for each. Also, reduce the size of any images, if you can. I didn't notice any rollover images, but if you have them, consider CSS sprites.

blocks|key|221332|text|阅读并应用Steve+Souders曾经写过的所有内容(特别是但不仅仅是他的两本优秀的书)，这些都是关于这些问题的(也许他精彩的建议中有10%25是你不想听到的，比如使用CDN，但其中绝大多数都恰好符合你的要求)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|221333|entityMap|0|LINK|mutability|MUTABLE|url|http://stevesouders.com/^0|5|D|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Read and apply all that <a href="http://stevesouders.com/" rel="noreferrer">Steve Souders</a> has ever written (especially but not exclusively his two superb books), it's just all about this very questions (maybe 10% of his splendid recommendations are the kinds you don't want to hear, such as using CDNs, but the vast majority of them is exactly on target for what you ask).

blocks|key|1315164|text|在用户实际单击备用选项卡之前，不要加载它们的所有数据。如果用户想要查看其他选项，只需抓取选项卡文本的计数并加载数据。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1315165|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Don't load all of the data for the alternate tabs until the use actually clicks them. Just grab the counts for the tab text and load the data should the user want to look at the other options.

blocks|key|221356|text|将gzipped压缩的内容提供给接受它的浏览器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|221357|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Serve gzipped content to browsers that will accept it.

blocks|key|1521053|text|考虑到除了下载之外，HTML和CSS不涉及加载时间，如果您不愿意考虑将其移动到外部文件或使用服务器端解决方案(如压缩)，那么除了缩小实际代码大小之外，您别无选择。真的，这对你的页面不会有多大影响。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1521054|根据你的Javascript..。你在页面中有大量的内联信息，这可能就是你速度慢的原因。不幸的是，我不能从一天中抽出一个小时来为你描述这一切。堆栈溢出不是免费工作...如果你愿意将缓慢缩小到一个特定的领域，我很乐意帮助分析它，但要求有人从你的整个网站从头开始分析它有点太多了。|1521055|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Considering that there is no load time involved with HTML and CSS other than downloading it, if you're not willing to consider moving it to external files or using a server-side solution such as compression, then there isn't anything you can do except shrink the actual code size. And really, that's not going to make much difference to your pages.

In terms of your Javascript... you've got a ton of it inline in the page, and it's probably the cause of your slowness. Unfortunately, I can't take an hour out of my day to profile it all for you. Stack Overflow isn't for free work... if you're willing to narrow down the slowness to a specific area, I'd be happy to help analyze it, but asking for someone to take your entire site and analyze it from scratch is a bit much.

blocks|key|1521070|text|您正在加载一些JS库，每当呈现引擎命中标记时，浏览器就会暂停并开始执行它，每个人都会坐下来等待，直到庞大的JavaScript库完成加载。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1521071|阅读这篇文章：non-blocking+JavaScript+documents，并将其应用于您的网站。此外，将网页中的所有JavaScript外部化，并在页面末尾以非阻塞的方式加载它们。所有的JS都将在用户的视神经元传输页面的第一个视觉图像并试图找出点击位置时执行。这就是所谓的感知性能。|offset|length|1521072|entityMap|0|LINK|mutability|MUTABLE|url|http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/^0|0|7|X|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

You're loading some JS libraries and whenever the render engine hits a tag, the browser halts and starts executing it and everyone sits and waits until your hefty JavaScript library finishes loading.

Read this article: <a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/" rel="nofollow noreferrer">non-blocking JavaScript documents</a> and apply it to your website. Also externalize all JavaScript in your webpage and load them in an unblocking way at the end of your page. All your JS will be executing while the users optic neurons are transmitting the first visuals of the page and trying to figure out where to click. That's called perceived performance btw.

blocks|key|1522967|text|Apache's+mod_expire提供了更快的加载性能，甚至在本地测试中也会注意到这一点。这是一个好主意，mod_expire所有的静态内容，包括.js文件，如马特·格兰德所说。大多数“真正大”的网站都使用这个或类似的东西，包括Stackoverflow.com。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1522968|entityMap|0|LINK|mutability|MUTABLE|url|http://httpd.apache.org/docs/2.0/mod/mod_expires.html^0|0|J|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<a href="http://httpd.apache.org/docs/2.0/mod/mod_expires.html" rel="nofollow noreferrer">Apache's mod_expire</a> grant so faster loading performance that you will notice it even in local tests. Its a nice idea to mod_expire all static content, including the .js files as Matt Grande said. Most "really big" sites use that or similars, including Stackoverflow.com.

blocks|key|221435|text|除了上述建议外：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|221436|221437|不使用CSS表达式。|unordered-list-item|221438|您的淡入淡出效果代码正在尝试设置无效颜色#ffff100。为什么不使用jQuery.animate()？|offset|length|style|CODE|221439|221440|$().animate({backgroundColor：}，)|221441|entityMap^0|0|0|0|Z|G|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|R|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|T|8|@$H|U|I|V|J|K]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

Apart from the suggestions above:

<ul>
<li>Do not use CSS expressions. </li>
<li>Your fade effect code is trying to set an invalid color #ffff100. Why are you not using <code>jQuery.animate()</code>?

<pre><code>$(&lt;selector&gt;).animate({backgroundColor: &lt;targetColor&gt;}, &lt;duration&gt;)
</code></pre></li>
</ul>

blocks|key|1523013|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1523014|图像:+Photoshop可以优化你的图像，将其保存为。这减少了大量的space.|ordered-list-item|1523015|Scripts:循环，更优化的解决方案等。|1523016|超文本标记语言:无表布局(它减少了相当多的标签)|1523017|CSS:更少使用诸如过滤器等功能。|1523018|1523019|这些是针对任何网页优化的提示。|1523020|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|O|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|P|7|@]|8|@]|9|$]]|$1|D|3|E|4|C|6|Q|7|@]|8|@]|9|$]]|$1|F|3|G|4|C|6|R|7|@]|8|@]|9|$]]|$1|H|3|I|4|C|6|S|7|@]|8|@]|9|$]]|$1|J|3|-4|4|5|6|T|7|@]|8|@]|9|$]]|$1|K|3|L|4|5|6|U|7|@]|8|@]|9|$]]|$1|M|3|-4|4|5|6|V|7|@]|8|@]|9|$]]]|N|$]]

<ol>
<li>Images: Photoshop can optimize your images to be saved for the web. This reduces a HUGE amount of space.</li>
<li>Scripts: Less loops, more optimised solutions, etc.</li>
<li>HTML : Tableless layouts (it reduces quite a lot of tags)</li>
<li>CSS : less use of functionalities such as filters, etc.</li>
</ol>

These are tips for ANY webpage optimisation.

blocks|key|1315460|text|优化图像，使用精灵，优化html，分离css，js，压缩/缩小，使用缓存和聚合将js+/css合并为一个文件。用户服务器端缓存，获得更快的服务器，确保您拥有具有最小延迟和快速响应时间的快速网络。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1315461|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

optimize images, use sprites, optimize html,separate css, js, compress/minify, use caching and aggregation to combine js /css into one file.
user server-side caching, get a faster server, ensure you have a fast network with minimal delay and fast response time.

blocks|key|4532030|text|根据我的经验：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4532031|(1)为火狐安装YSlow和Page+Speed+extensions，并在可能的情况下遵循他们的建议。|offset|length|style|BOLD|4532032|(2)非常重要的一点:配置存放图片、JS和CSS文件目录的HTTP缓存。我只是将它们放在一个名为static的目录中，并在那里放入以下.htaccess文件：|CODE|4532033|<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>|code-block|syntax|javascript|4532034|(3)从文件中提取CSS+代码，并将其放入一个单独的CSS文件中。|4532035|(4)将您的JS文件合并为一个文件。然后，使用JSMin压缩此文件将非常有用。|4532036|(5)对于静态文本文件，在Apache中打开gzip压缩。如果您的Apache服务器上有mod_deflate，请将其放入网站根目录下的.htaccess文件中：|4532037|<IfModule+mod_headers.c>
++++<FilesMatch+"\\.(js%7Ccss%7Chtml%7Chtm%7Cphp%7Cxml)$">
++++++++SetOutputFilter+DEFLATE
++++</FilesMatch>
+</IfModule>|4532038|entityMap^0|0|8|5|E|A|0|T|6|1C|6|1V|9|0|0|4|9|0|N|5|0|M|6|18|B|1W|9|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@$D|11|E|12|F|G]|$D|13|E|14|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|15|8|@$D|16|E|17|F|G]|$D|18|E|19|F|J]|$D|1A|E|1B|F|J]]|9|@]|A|$]]|$1|K|3|L|5|M|7|1C|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|1D|8|@$D|1E|E|1F|F|G]]|9|@]|A|$]]|$1|R|3|S|5|6|7|1G|8|@$D|1H|E|1I|F|G]]|9|@]|A|$]]|$1|T|3|U|5|6|7|1J|8|@$D|1K|E|1L|F|G]|$D|1M|E|1N|F|J]|$D|1O|E|1P|F|J]]|9|@]|A|$]]|$1|V|3|W|5|M|7|1Q|8|@]|9|@]|A|$N|O]]|$1|X|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]]|Y|$]]

From my experience:

(1) Install YSlow and Page Speed extensions for Firefox and follow their advice where possible.

(2) Very important: configure HTTP caching for directories where you keep your images, JS and CSS files. I just put them in a directory named <code>static</code> and put there this <code>.htaccess</code> file:

<pre><code>&lt;IfModule mod_headers.c&gt;
 Header set Cache-Control "max-age=29030400, public"
&lt;/IfModule&gt;
&lt;IfModule mod_expires.c&gt;
 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
&lt;/IfModule&gt;
</code></pre>

(3) Take the CSS code from HTML file and put it into a separate CSS file.

(4) Combine your JS files into one file. Then it will be useful to compress this file using JSMin.

(5) Turn on gzip compression in Apache for static text files. If you have <code>mod_deflate</code> on your Apache server, put this into <code>.htaccess</code> file in your website root directory:

<pre><code>&lt;IfModule mod_headers.c&gt;
 &lt;FilesMatch "\\.(js|css|html|htm|php|xml)$"&gt;
 SetOutputFilter DEFLATE
 &lt;/FilesMatch&gt;
 &lt;/IfModule&gt;
</code></pre>

blocks|key|221541|text|我并不觉得抓取地图的功能有用。它非常时髦，但它吸引了我的注意力，它产生的房屋列表从未引起我的注意。我更喜欢更传统的搜索功能，也许是在输入搜索功能的基础上进行扩展。而且，浏览源文件看起来地图和主页列表javascript是源文件的2/3。在没有它的情况下肯定会有更快的加载。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|221542|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I didn't find the grabble map feature useful. It's very snazzy, but it arrests my attention and the home listings produced by it never got my attention. I would have preferred a more conventional search feature, maybe expanding from the input search feature. And, skimming through the source file looks like the map and home listing javascript is 2/3 of the source. There's gotta be faster loads without it.

blocks|key|4532147|text|我建议下载Safari并使用他们出色的开发工具(和漂亮的界面)，看看到底是什么花了这么长时间，以及你可以做些什么来加快速度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4532148|如果你正在使用JQuery，别忘了使用谷歌的托管版本！|4532149|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

I'd suggest downloading Safari and using their awesome Dev tools (and pretty interface) to see exactly what is taking so long, and what you can do to speed it up.

If you're using JQuery, don't forget to use Google's hosted versions!!

blocks|key|221440|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|221441|htaccess|ordered-list-item|221442|221443|AddOutputFilterByType+DEFLATE文本/纯AddOutputFilterByType+DEFLATE文本/html+AddOutputFilterByType+DEFLATE文本/xml+AddOutputFilterByType+DEFLATE文本/css+AddOutputFilterByType+DEFLATE应用程序/xml+AddOutputFilterByType+DEFLATE应用程序/xhtml%2Bxml+AddOutputFilterByType+DEFLATE应用程序/rss%2Bxml+AddOutputFilterByType+DEFLATE应用程序/javascript+AddOutputFilterByType+DEFLATE应用程序/x-javascript+|221444|php|221445|if(substr_count($_SERVER['HTTP_ACCEPT_ENCODING'],+'gzip'))+
+ob_start("ob_gzhandler");
else
+ob_start();+|code-block|syntax|javascript|221446|2.|221447|<IfModule+mod_expires.c>

#+open

ExpiresActive+On



#+file+images

ExpiresByType+image/jpg+"access+1+year"
ExpiresByType+image/jpeg+"access+1+year"
ExpiresByType+image/gif+"access+1+year"
ExpiresByType+image/png+"access+1+year"



#+CSS

ExpiresByType+text/css+"access+1+month"



#+javascript

ExpiresByType+text/x-javascript+"access+1+month"




#+icon+page

ExpiresByType+image/x-icon+"access+1+year"



#+other

ExpiresDefault+"access+2+days"
</IfModule>|221448|221449|心理技巧:)使用预加载器，用户喜欢发生的事情:)|221450|221451|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|X|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|Y|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|Z|7|@]|8|@]|9|$]]|$1|E|3|F|4|5|6|10|7|@]|8|@]|9|$]]|$1|G|3|H|4|5|6|11|7|@]|8|@]|9|$]]|$1|I|3|J|4|K|6|12|7|@]|8|@]|9|$L|M]]|$1|N|3|O|4|5|6|13|7|@]|8|@]|9|$]]|$1|P|3|Q|4|K|6|14|7|@]|8|@]|9|$L|M]]|$1|R|3|-4|4|5|6|15|7|@]|8|@]|9|$]]|$1|S|3|T|4|C|6|16|7|@]|8|@]|9|$]]|$1|U|3|-4|4|5|6|17|7|@]|8|@]|9|$]]|$1|V|3|-4|4|5|6|18|7|@]|8|@]|9|$]]]|W|$]]

<ol>
<li>htaccess


AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</li>
</ol>

php

<pre><code>if(substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) 
 ob_start("ob_gzhandler");
else
 ob_start(); 
</code></pre>

2.

<pre><code>&lt;IfModule mod_expires.c&gt;

# open

ExpiresActive On



# file images

ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"



# CSS

ExpiresByType text/css "access 1 month"



# javascript

ExpiresByType text/x-javascript "access 1 month"




# icon page

ExpiresByType image/x-icon "access 1 year"



# other

ExpiresDefault "access 2 days"
&lt;/IfModule&gt;
</code></pre>

<ol start="3">
<li>psychological trick :) 
use preloader, user likes something happens :)</li>
</ol>

Assuming an empty browser cache - How can I make a web page load faster by only applying HTML/CSS/JavaScript code changes? 

Meaning, don't recommend moving servers, using a CDN, etc. Just code changes to make it load faster.

How can I make my web page load faster?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

假设浏览器缓存为空-如何通过仅应用HTML/CSS/JavaScript代码更改来提高网页加载速度？这意味着，不建议移动服务器，使用CDN等。只需更改代码以使其加载更快。

问怎样才能让我的网页加载更快？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问怎样才能让我的网页加载更快？EN