Navigation menu

0755-82192581
  • Contact us
  • 0755-82192581
  • 深圳市罗湖区人民南路国际商业大厦20楼(地铁1号线国贸站E出口既是)

    szniego@126.com


    © 2007-2020 All Rights Reserved.
  • 策略型高端网站设计公司

    Strategic advanced website design company

    View More
  • 优化网站设计速度的五个技巧

    时间:2020-08-12  作者:Angle  来源:www.niegoweb.com
    网站设计的速度和性能对于用户体验非常重要。如果您的网站速度太慢,您不仅会失去访问者,还会失去潜在的客户。像Google这样的搜索引擎会在搜索排名中考虑网站的速度,因此在优化网站速度时,您应该考虑所有因素。每毫秒都很重要。

    本期深圳网站设计公司Angle给大家讲解一些用于改善网站性能和速度的常规网站优化技巧。


    网站设计



    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的核心是页面缓存功能。

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

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

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

    不仅屏幕阅读器无法访问图像中的文本,而且对于SEO完全没有用,而且使用图像显示文本还会增加网页的加载时间,因为更多的图像意味着网页更重。如果您需要在网站中使用大量自定义字体,请了解CSS @ font-face,以更有效地显示带有自定义字体的文本。不用说,您必须确定提供字体文件是否比提供图像更好。


    以上就是优化网站设计速度的五大技巧,希望可以帮助到有需要的设计师。本期深圳网站设计公司Angle就为大家分享到这里。

    相关标签

    相关案例

    OTHER CASE