English 中文(简体)
快速加载的网页
原标题:
  • 时间:2009-02-25 06:06:01
  •  标签:

We are planning to develop a new website. Our goal is to load web pages quickly. What are all the techniques we need to follow.

有人可以给我好的建议、论坛链接或文章吗?

我们的平台是PHP,MySQL,Javascript和AJAX。

问题回答

加速您网站加载速度的最佳指南之一:

将此翻译成中文:http://developer.yahoo.com/performance/rules.html 雅虎性能规则


更新:谷歌现在也有一份优秀的指南。

将此翻译为中文:http://code.google.com/speed/page-speed/docs/rules_intro.html http://code.google.com/speed/page-speed/docs/rules_intro.html

随着一个更好的Firefox插件一同推出。从我的测试结果来看,Google的页面速度插件比YSlow更好得多。它提供了更详细的分析和更智能的建议(而不是像YSlow一样为小型网站推荐CDN)。

一个有用的工具是YSlow,它是雅虎提供的一款工具,可以帮助识别网页性能问题。此外,雅虎的网站加速最佳实践也是一个不错的清单。

然而,阅读杰夫的博客文章雅虎的问题不是你的问题可以获得一些对这个问题的看法。

缓存,缓存,缓存。

memcached 储存器

APC (无耻地宣传自己而不给出具体文本)

选择一个,使用它。不必从数据库中检索所有东西可以大大加快速度。

雅虎:将样式表放在顶部,“将脚本放在底部”。

这比任何其他优化都要更加提高我最近网站的速度。

  • Use CSS sprites to keep your HTTP request count down.
  • Make sure all your images are a decent size.
  • Make sure you have a really good host with good upstream and downstream.
  • Make sure your server can execute your scripts in good time, you can check this using the microtime function.
  • Make sure your code is optimized properly.

只写必要的代码,但不要太少。

更少的代码,更少的编译,更少的发送,更少的接收,更少的处理,更少的显示。

1)mod_gzip / mod_deflate!这是如此简单的修复,我很惊讶它没有默认启用。

2)通过您的URL玩弄技巧,以便您可以告诉浏览器永久缓存您的JS和CSS文件。 换句话说,构建URL看起来像:

http://www.yourdomain.com/js/mad_scriptz-v123.js

然后使用mod_rewrite并剥离“-v123”:

<IfModule mod_rewrite.c>
    # http://www.thinkvitamin.com/features/webapps/serving-javascript-fast
    RewriteEngine on

    RewriteRule ^/(.*)-v[0-9.]+.(css|js|gif|png|jpg|xap)$ /$1.$2  [L]

</IfModule>

现在Apache将寻找“/js/mad_scriptz.js”... 每次更改静态内容时,只需增加版本号以强制浏览器重新加载内容。我通常拥有一个包含全局版本号的模板变量,所有东西都与此相关联。这不是最有效的方法,但对我的目的很有效。如果您可以将版本号与构建系统或文件哈希相关联,那将是额外的美好。

让mod_expires上线,让您的所有静态内容在未来几年过期:

<IfModule mod_expires.c>
    ExpiresActive On
    # all in seconds...  
    ExpiresByType image/x-icon A2592000
    ExpiresByType image/gif A2592000
    ExpiresByType image/jpeg A2592000
    ExpiresByType image/png A2592000
    ExpiresByType application/javascript A2592000
    ExpiresByType application/x-javascript A2592000
    ExpiresByType application/x-shockwave-flash A2592000
    ExpiresByType application/pdf A2592000
    ExpiresByType text/css A2592000
    ExpiresByType application/rdf+xml A1800
</IfModule>

更新:已经注意到并非所有浏览器或搜索引擎都支持gzip压缩内容。不要像我上面建议的那样盲目启用它。请确保即使它们接受gzip,也不要将古老的浏览器装入gzip(其中有些会对压缩的javascript非常生气)。mod_gzipmod_deflate的文档都有应该能正常工作的例子(我认为它们确实能正常工作,否则人们会用更改与他们的电子邮件 :-)。

我还应该提到的是,根据我的经验,如果您在 mod_gzip 和 Apache 服务器与世界之间使用反向代理,则需要小心。Squid 2.6 经常会欺骗 Apache,导致未压缩的内容无法压缩,并且更糟糕的是,它将缓存未压缩的版本并将其提供给可以处理 gzip 内容的浏览器。不知道 3.0 是否修复了这个问题,我也不知道这是否是我的配置错误(我怀疑不是)。要小心 :-)

话说,开下吧。认真的 :-)

1. Enable Keep-Alive

HTTP Keep Alive是指在客户端机器和Web服务器之间发送的消息,请求下载文件的许可。启用Keep Alive可以让客户端机器在不重复请求许可的情况下下载多个文件,这有助于节省带宽。

要启用Keep Alive,只需将以下代码复制并粘贴到您的.htaccess文件中。

<ifModule mod_headers.c>
    Header set Connection keep-alive
</ifModule>

2. Disable hotlinking of images

当其他网站“热链接”到您的图像时,它会窃取带宽,使您的网站变慢。为了防止其他网站占用您的带宽,您可以将此代码片段添加到您的.htaccess文件中。记得更改那个说你的域名.com的部分!

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?your_Domain_name.com [NC]
RewriteRule .(jpg|jpeg|png|gif)$ – [NC,F,L]

3. Compress your website with gzip

Gzip是一种简单的方法,可以压缩您网站的文件以节省带宽并加快页面加载时间。 Gzip的工作原理是将您的文件压缩成一个zip文件,用户的浏览器加载速度更快。然后,用户的浏览器解压文件并显示其内容。这种从服务器向浏览器传输内容的方法更加有效,并节省了大量时间。

您可以通过将以下代码添加到您的.htaccess文件中来启用Gzip:

# compress text, html, javascript, css, xml:
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

# Or, compress certain file types by extension:

SetOutputFilter DEFLATE

要检查您的网站是否启用或正常工作Gzip,您可以使用Gziptest.com。

4. Enable Expires Headers

到期标头告诉浏览器它们是否应该从服务器请求特定文件,还是直接从浏览器缓存中获取。

过期头(Expires Headers)背后的整个思想不仅是为了减少从服务器下载的负载(不断下载相同的未修改文件浪费了宝贵的负载时间),而且要减少服务器的HTTP请求次数。

所以在 .htaccess 文件中包括以下内容

<IfModule mod_expires.c>
    # Enable expirations
    ExpiresActive On 
    # Default directive
    ExpiresDefault "access plus 1 month"
    # My favicon
    ExpiresByType image/x-icon "access plus 1 year"
    # Images
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    # CSS
    ExpiresByType text/css "access plus 1 month"
    # Javascript
    ExpiresByType application/javascript "access plus 1 year"
</IfModule>

5. Replace PHP with static HTML where possible

PHP非常适合使您的网站高效,并减少多次输入相同信息的需求。然而,通过PHP调用信息会耗用服务器资源,应在不节省任何时间的情况下用静态HTML替换。

6. Specify a character set in HTTP headers

出于以上相同的原因,在您的HTTP响应头中指定字符集非常有用,以便浏览器不必额外花费时间来确定您正在使用哪个字符集。

您可以通过在您网站的部分中简单地添加一个UTF-8字符集标签来完成此操作。

7. Enable Output Compression

压缩可以通过两种方式进行。

阿帕奇实际上有两种压缩选项:

  • mod_deflate is easier to set up and is standard.
  • mod_gzip seems more powerful: you can pre-compress content.

您的文件压缩选项是Deflate和GZIP。

  • Deflate is an option which comes automatically with the Apache server and which is simple to set up.
  • GZIP on the other hand needs to be installed and requires a bit more work to install. However, GZIP does achieve a higher compression rate and therefore might be a better choice if your website uses pages which have a lot of images or large file sizes.

Deflate很快且有效,因此我使用它;如果您喜欢,可以使用mod_gzip。在任何情况下,Apache都会检查浏览器是否发送了“Accept-encoding”头并返回压缩或常规版本的文件。但是,一些旧浏览器可能会遇到问题(下文有更多说明),您可以添加特殊指令来纠正这种情况。

zlib.output_compression Whether to transparently compress pages. If this option is set to "On" in php.ini or the Apache configuration, pages are compressed if the browser sends an "Accept-Encoding: gzip" or "deflate" header.

PHP 默认:禁用

在Php.ini中

zlib.output_compression = On

如果您无法更改您的.htaccess文件,则可以使用PHP返回压缩内容。将您的HTML文件命名为.php扩展名,并在顶部添加以下代码:

在PHP中:

<?php 
    if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’))
    ob_start(“ob_gzhandler”); else ob_start(); 
?>

这个部分将启用Apache mod_deflate模块,它会在发送到浏览器之前压缩文本、CSS和JavaScript。这会导致下载大小更小。在.htaccess文件中启用它,并使其看起来像下面这样:

<IfModule mod_deflate.c>

############################################
## enable apache served files compression
## http://developer.yahoo.com/performance/rules.html#gzip

    # Insert filter on all content
    SetOutputFilter DEFLATE
    # Insert filter on selected content types only
    AddOutputFilterByType DEFLATE text/html text/plain text/css text/javascript application/javascript application/x-javascript text/xml application/xml application/xhtml+xml image/x-icon image/svg+xml application/rss+xml application/x-font application/x-font-truetype application/x-font-ttf application/x-font-otf application/x-font-opentype application/vnd.ms-fontobject font/ttf font/otf font/opentype 

    # Netscape 4.x has some problems...
    BrowserMatch ^Mozilla/4 gzip-only-text/html

    # Netscape 4.06-4.08 have some more problems
    BrowserMatch ^Mozilla/4.0[678] no-gzip

    # MSIE masquerades as Netscape, but it is fine
    BrowserMatch MSIE !no-gzip !gzip-only-text/html

    # Don t compress images
    SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary

    # Make sure proxies don t deliver the wrong content
    Header append Vary User-Agent env=!dont-vary

</IfModule>

Sorry, as an AI language model, I cannot answer your request without the specific phrase or sentence that you want me to translate into Chinese. Please provide more details or context.

8. Enable cache, OPcache, and eAccelerator (Another PHP Caching tool)

Memcache 特别适用于减少数据库负载,而像 APC 或 OPcache 这样的字节码缓存引擎则非常适合在脚本编译时节省执行时间。

9. Take Advantage of Native PHP Functions

尽可能利用PHP的原生函数而非编写自定义函数以达到相同的结果。花一点时间学习如何使用PHP的原生函数不仅有助于更快地编写代码,还会使它更高效。

10. Cut Out Unnecessary Calculations

When using the same value of a variable multiple times, calculate and assign the value at the beginning rather than performing calculations for every use. If you’re looping through an array, for example, count() it beforehand, store the value in a variable, and use that for your test. This way, you avoid needlessly firing the test function with every loop iteration.

11. Use the Strongest Str Functions

尽管str_replace比preg_replace快,但strtr函数比str_replace快四倍。

12. Stick With Single Quotes

尽可能使用单引号而不是双引号。双引号检查变量,可能会降低性能。

13. Try Three Equal Signs

由于“= = =”只检查封闭范围,因此与使用“= =”进行比较相比,它更快。

14. Use isset( )

与之相比

count( ),strlen( )和sizeof( )

isset()是确定值是否大于0的更快,更简单的方法。

15. Cut Out Unnecessary Classes

如果你不打算多次使用类或方法,那么你实际上不需要它们。如果你必须使用类,一定要使用派生类方法,因为它们比基类方法更快。

16. Close Database Connections

在您的代码中取消设置变量并关闭数据库连接将节省宝贵的内存。

17. Limit Your Database Hits

使查询聚合可以减少对数据库的命中次数,从而使事情更快地运行。

使用 PHP 分析器确保代码在合理的速度下执行。如果性能可以提高,则重新构造(在可能的情况下)。

除了已经说的之外:

  • obfuscate and compress your css
  • obfuscate and compress your javascript
  • less files == less http requests == faster site == put all your css in one file, put all your javascript in one file

压缩所有文件,包括CSS和JS文件,也要压缩PHP文件。尽可能少地调用数据库,并像之前所述缓存所有返回。

一些随机点。

渐进式渲染而不是在内存中构建并在最后发送,会给人一种明显的速度印象

有一些高级缓存技巧可以使用,例如前置缓存(这是Akamai在大规模上所做的),以及将静态和动态内容分开。

特别是使用PHP时,要小心复制大量数据。由于它的“默认复制”,PHP 4因此而臭名昭著,但在PHP 5中仍然很容易有大量数据。换句话说:不要无端复制(或创建!)字符串、数组和对象;在原地工作并传递引用。

Here is one tip I always find useful: If you have a lot of tiny images, put them all in one tiled image. In your CSS declarations, control the viewport of the html element by manipulating the x and y coordinates of the background:

.icon {
    background-image:url(static/images/icons.png);
    height:36px;
    width:36px;
}
.food {
    background-position:-52px -8px;
}
.icon_default {
    background-position:-184px -96px;
}

平铺可以在Python脚本中完成,或者如果您有一个管理良好的集合,也可以手工完成。

Gmail也是这样做的。请参见:http://mail.google.com/mail/images/2/5/greensky/icons7.png

一个项目可以帮助你满足 Yahoo! 的几项指南(http://developer.yahoo.com/performance/rules.html),这个项目叫做Minify,它可以同时进行缩小文件、包装文件和条件 HTTP 服务,如果结合好的设计实践,可以显着地减少页面加载时间,尤其是用户体验(这与实际页面加载时间不同)。

加载网页更快的最佳方法:

根据雅虎。

1- 样式表应该出现在顶部,以加快网页加载速度。

2-避免重定向。

3-减少不必要的代码。

4- 将CSS和JS放在外部文件中。

5-移除重复脚本。

Source: https://developer.yahoo.com/performance/rules.html


根据Google。

1-消除渲染阻塞资源

2-适当调整图片大小

推迟离屏图片加载

4-高效地对图像进行编码

用现代格式提供图片。

6-启用文本压缩

7-预连接到所需的源。

8-减少服务器响应时间(TTFB)

9-避免多个页面重定向

10-预加载关键请求

11-使用视频格式制作动画内容

12-减少第三方代码的影响

使用外表层来杀死懒加载第三方资源。


注意:应用这些提示可以显著降低时间。按照您的需要使用这些要点。





相关问题
热门标签