网页设计

当前位置:

优化网站速度的10条提示

浏览量:0

网页的速度和性能对于用户体验非常重要。如果您的网站速度太慢,那么您不仅会失去访问者,还会失去潜在的客户。像Google这样的搜索引擎会在搜索排名中考虑网站的速度,因此在优化网站速度时,您应该考虑所有因素。每毫秒都很重要。

以下是一些用于提高网站性能和速度的常规网站优化技巧。

1.尽可能延迟加载内容

Ajax允许我们构建可以随时异步更新的网页。这意味着,除了用户执行操作时重新加载整个页面,我们还可以简单地更新该页面的某些部分。

我们可以以图片库为例。图像文件又大又沉;它们会降低网页的页面加载速度。我们可以只显示图像的缩略图,然后当用户单击它们时,我们可以异步地从服务器请求全尺寸图像并更新页面,而不是在用户首次访问网页时加载所有图像。这样,如果用户只想看几张图片,则不必等待所有图片下载。这种开发模式称为延迟加载。

诸如jQuery,Prototype和MooTools之类的Ajax / web开发库可以使延迟的内容加载更易于实现。
 

优化网站速度的10条提示

2.使用外部JS和CSS文件

当用户首次加载您的网页时,浏览器将缓存外部资源,例如CSS和JavaScript文件。因此,最好将它们放置在外部文件中,而不是内联JavaScript和CSS文件。

使用内联CSS还会增加网页的呈现时间。在主CSS文件中定义所有内容后,由于浏览器已经知道需要应用的所有样式规则,因此在呈现页面时,浏览器的工作量减少了。

另外,使用外部JavaScript和CSS文件使站点维护更加容易,因为您只需要维护全局文件,而不是分散在多个网页中的代码。

3.使用缓存系统

如果发现您的站点正在连接到数据库以创建相同的内容,那么该开始使用缓存系统了。通过使用缓存系统,您的站点只需创建一次内容,而不必每次用户访问页面时都创建内容。不用担心,缓存系统会根据您的设置方式定期刷新其缓存-因此,即使是不断变化的网页(例如带有评论的博客文章)也可以被缓存。

流行的内容管理系统(如WordPress和Drupal)将具有静态缓存功能,可将动态生成的页面转换为静态HTML文件,以减少不必要的服务器处理。对于WordPress,请查看WP Super Cache(六个修订版已安装的六个关键WordPress插件之一)。Drupal在核心中具有页面缓存功能。

您还可以在Web服务器上安装数据库缓存和服务器端脚本缓存系统(如果有能力的话)。例如,PHP具有称为PHP加速器的扩展,可通过缓存和各种其他方法来优化性能。PHP加速器的一个示例是APC。数据库缓存通过减少与数据库读/写/访问过程相关的工作来提高Web应用程序的性能和可伸缩性。例如,memcached缓存常用的数据库查询。

4.避免在HTML中调整图像大小

如果图像原本的尺寸为1280x900px,但您需要将其设置为400x280px,则应使用Photoshop之类的图像编辑器(而不是使用HTML width和height属性<img width="400" height="280" src="myimage.jpg" />)来调整图像大小并重新保存图像。这是因为,自然地,大图像的文件大小总是比小图像的大。

与其使用HTML调整图像大小,不如使用Photoshop等图像编辑器调整图像大小,然后将其另存为新文件。

5.停止使用图像显示文本

不仅屏幕阅读器无法访问图像中的文本,而且对于SEO完全没有用,而且使用图像显示文本还可以增加网页的加载时间,因为更多的图像意味着网页更重。

如果您需要在网站中使用大量自定义字体,请了解CSS @ font-face,以更有效地显示具有自定义字体的文本。不用说,您必须确定提供字体文件是否比提供图像更好。

6.通过使用正确的文件格式来优化图像大小

通过选择正确的图像格式,可以优化文件大小而不会降低图像质量。例如,除非您需要PNG格式必须提供的图像透明度(alpha层),否则JPG格式通常会以较小的文件大小显示照片图像。

您可以使用许多工具来进一步减轻图像的文件权重。查看此工具列表,以优化图像。

7.优化编写代码的方式

看看您的源代码。您是否真的需要使用的所有标签,或者可以使用CSS在显示屏上提供帮助?例如,代替使用<h1><em>Your heading</em></h1>,您可以轻松地使用CSS使用该font-style属性将标题设为斜体。有效地编写代码不仅可以减少HTML和CSS文档的文件大小,而且还使其易于维护。

8.在文档末尾加载JavaScript

最好在页面末尾而不是开始时加载脚本。它允许浏览器在开始使用JavaScript之前呈现所有内容。这使您的网页具有更高的响应速度,因为JavaScript的工作方式是阻止其下方的任何内容呈现,直到完成下载为止。如果可能,<body>请在HTML文档的结束标记之前引用JavaScript 。要了解更多信息,请阅读有关延迟JavaScript加载的信息。

9.使用内容传送网络(CDN)

用户位置相对于Web服务器的位置,极大地影响了网站的速度。它们离得越远,传输的数据就必须越走越远。将您的内容缓存在多个有战略意义的地理位置上有助于解决此问题。一个CDN往往会使你的经营成本高一点,但你绝对获得速度加成。签出MaxCDN或Amazon Simple Storage Service(Amazon S3)。

10.优化Web缓存

与使用缓存系统一起,您应该创建尽可能利用Web缓存的网站。Web缓存是指Web浏览器缓存文件以供以后使用时。浏览器可以缓存的内容包括CSS文件,JavaScript文件和图像。

除了基础知识(例如将在多个页面中使用的CSS和JavaScript代码放入外部文件)外,还有许多方法可以确保以最有效的方式缓存文件。

例如,您可以设置HTTP响应标头,例如Expires和,Last-Modified以减少当用户返回您的站点时重新下载某些文件的需要。要了解更多信息,请阅读有关HTTP缓存和利用浏览器缓存的信息。

要Expires在Apache中设置HTTP 标头,请阅读有关添加未来过期标头的本教程。

以上是悟空云小编整理的资料,希望能帮到您。更多网站建设请注意我们武汉网站的建设新闻中心。

网页的速度和性能对于用户体验非常重要。如果您的网站速度太慢,那么您不仅会失去访问者,还会失去潜在的客户。像Google这样的搜索引擎会在搜索排名中考虑网站的速度,因此在优化网站速度时,您应该考虑所有因素。每毫秒都很重要。

以下是一些用于提高网站性能和速度的常规网站优化技巧。

1.尽可能延迟加载内容

Ajax允许我们构建可以随时异步更新的网页。这意味着,除了用户执行操作时重新加载整个页面,我们还可以简单地更新该页面的某些部分。

我们可以以图片库为例。图像文件又大又沉;它们会降低网页的页面加载速度。我们可以只显示图像的缩略图,然后当用户单击它们时,我们可以异步地从服务器请求全尺寸图像并更新页面,而不是在用户首次访问网页时加载所有图像。这样,如果用户只想看几张图片,则不必等待所有图片下载。这种开发模式称为延迟加载。

诸如jQuery,Prototype和MooTools之类的Ajax / web开发库可以使延迟的内容加载更易于实现。

2.使用外部JS和CSS文件

当用户首次加载您的网页时,浏览器将缓存外部资源,例如CSS和JavaScript文件。因此,最好将它们放置在外部文件中,而不是内联JavaScript和CSS文件。

使用内联CSS还会增加网页的呈现时间。在主CSS文件中定义所有内容后,由于浏览器已经知道需要应用的所有样式规则,因此在呈现页面时,浏览器的工作量减少了。

另外,使用外部JavaScript和CSS文件使站点维护更加容易,因为您只需要维护全局文件,而不是分散在多个网页中的代码。

3.使用缓存系统

如果发现您的站点正在连接到数据库以创建相同的内容,那么该开始使用缓存系统了。通过使用缓存系统,您的站点只需创建一次内容,而不必每次用户访问页面时都创建内容。不用担心,缓存系统会根据您的设置方式定期刷新其缓存-因此,即使是不断变化的网页(例如带有评论的博客文章)也可以被缓存。

流行的内容管理系统(如WordPress和Drupal)将具有静态缓存功能,可将动态生成的页面转换为静态HTML文件,以减少不必要的服务器处理。对于WordPress,请查看WP Super Cache(六个修订版已安装的六个关键WordPress插件之一)。Drupal在核心中具有页面缓存功能。

您还可以在Web服务器上安装数据库缓存和服务器端脚本缓存系统(如果有能力的话)。例如,PHP具有称为PHP加速器的扩展,可通过缓存和各种其他方法来优化性能。PHP加速器的一个示例是APC。数据库缓存通过减少与数据库读/写/访问过程相关的工作来提高Web应用程序的性能和可伸缩性。例如,memcached缓存常用的数据库查询。

4.避免在HTML中调整图像大小

如果图像原本的尺寸为1280x900px,但您需要将其设置为400x280px,则应使用Photoshop之类的图像编辑器(而不是使用HTML width和height属性<img width="400" height="280" src="myimage.jpg" />)来调整图像大小并重新保存图像。这是因为,自然地,大图像的文件大小总是比小图像的大。

与其使用HTML调整图像大小,不如使用Photoshop等图像编辑器调整图像大小,然后将其另存为新文件。

5.停止使用图像显示文本

不仅屏幕阅读器无法访问图像中的文本,而且对于SEO完全没有用,而且使用图像显示文本还可以增加网页的加载时间,因为更多的图像意味着网页更重。

如果您需要在网站中使用大量自定义字体,请了解CSS @ font-face,以更有效地显示具有自定义字体的文本。不用说,您必须确定提供字体文件是否比提供图像更好。

6.通过使用正确的文件格式来优化图像大小

通过选择正确的图像格式,可以优化文件大小而不会降低图像质量。例如,除非您需要PNG格式必须提供的图像透明度(alpha层),否则JPG格式通常会以较小的文件大小显示照片图像。

 

要了解有关如何在JPG,PNG和GIF之间进行选择的更多信息,请阅读以下指南:

  • 网络保存图像综合指南

  • Web设计人员PNG图像格式指南

  • JPEG 101:JPEG速成班指南

 

此外,您可以使用许多工具来进一步减轻图像的文件权重。查看此工具列表,以优化图像。

7.优化编写代码的方式

看看您的源代码。您是否真的需要使用的所有标签,或者可以使用CSS在显示屏上提供帮助?例如,代替使用<h1><em>Your heading</em></h1>,您可以轻松地使用CSS使用该font-style属性将标题设为斜体。有效地编写代码不仅可以减少HTML和CSS文档的文件大小,而且还使其易于维护。

8.在文档末尾加载JavaScript

最好在页面末尾而不是开始时加载脚本。它允许浏览器在开始使用JavaScript之前呈现所有内容。这使您的网页具有更高的响应速度,因为JavaScript的工作方式是阻止其下方的任何内容呈现,直到完成下载为止。如果可能,<body>请在HTML文档的结束标记之前引用JavaScript 。要了解更多信息,请阅读有关延迟JavaScript加载的信息。

9.使用内容传送网络(CDN)

用户位置相对于Web服务器的位置,极大地影响了网站的速度。它们离得越远,传输的数据就必须越走越远。将您的内容缓存在多个有战略意义的地理位置上有助于解决此问题。一个CDN往往会使你的经营成本高一点,但你绝对获得速度加成。签出MaxCDN或Amazon Simple Storage Service(Amazon S3)。

10.优化Web缓存

与使用缓存系统一起,您应该创建尽可能利用Web缓存的网站。Web缓存是指Web浏览器缓存文件以供以后使用时。浏览器可以缓存的内容包括CSS文件,JavaScript文件和图像。

除了基础知识(例如将在多个页面中使用的CSS和JavaScript代码放入外部文件)外,还有许多方法可以确保以最有效的方式缓存文件。

例如,您可以设置HTTP响应标头,例如Expires和,Last-Modified以减少当用户返回您的站点时重新下载某些文件的需要。要了解更多信息,请阅读有关HTTP缓存和利用浏览器缓存的信息。

[声明]本网转载网络媒体稿件是为了传播更多的信息,此类稿件不代表本网观点,本网不承担此类稿件侵权行为的连带责任。故此,如果您发现本网站的内容侵犯了您的版权,请您的相关内容发至此邮箱【wukongclouds@163.com】,我们在确认后,会立即删除,保证您的版权。