If I go to the home page of a website on a computer with a fast connection, 和 after 5 seconds there are still large pieces of the page missing, 什么是错的. So in the interest of making the internet a better place for all, 尤其是那些没有闪电般快速连接的人, I've compiled a few tips you can use to speed up the viewing process of your website.

  1. 优化你的图片

    这是一个大问题. 通常如果一个网页需要很长时间来加载, I find the biggest b和width eater is a collection of images that haven't been compressed reasonably. When putting together your site's images, use appropriate compression. 如果你使用JPEG, which you 通常 should for photographs or other complex images, use the best compression (smallest file size) you can without making it look bad. A large featured graphic shouldn't be more than about 75k, 和 of course less if possible. 其他图像(背景, 按钮, 边界, 等) should be considerably 小; they can add up quickly. Tile when possible - a simple gradient for example can 通常 be one pixel wide or one pixel tall, 取决于梯度的方向. 您还应该仔细选择文件类型. 对于只有少量颜色的简单图形, 像一些按钮, GIF或PNG可以比JPEG小, 而且它们是无损的,颜色很少, meaning you don't get the blur that can happen on JPEGs. PNG还有两种类型. 其中一种使用多达256种颜色的调色板, 所谓的8位PNG, 还有一个使用RGBA频道, 被称为24位PNG. 24-bit PNG is the best way to have graphics that have partial transparency, 但如果这是不需要的,那么8位PNG 通常 小. Photoshop has a great feature called "Save for Web 和 Devices" that lets you compare a bunch of file types side-by-side. 最后,永远不要使用BMP文件. They have no compression whatsoever 和 take up huge amounts of space. If you need a totally lossless image, use 24-bit PNG, but use it sparingly. Another graphic option is the SVG (Scalable Vector Graphics) format. It uses an XML-based text format to describe how the image should appear. After optimization, an SVG file can be 14 or 15 times 小 than a PNG.

  2. 巩固你的文件

    A browser requesting data from a server uses the Hypertext Transfer Protocol (HTTP) Other protocols are in the works that may eventually largely replace HTTP, 但事实上, 数据被发送到请求每个文件的服务器, then information is sent back to the client about the file - file size, MIME类型, 等, 以及文件本身. The data sent back 和 forth in excess of the file itself is not a large amount, but it adds up if you're requesting a bunch of files. Therefore, it is often a good idea to put multiple images into one file when possible. 例如, 一个120像素* 30像素的按钮,带有默认图像, 一个盘旋的形象, 和 an active (clicked) image - you can create a 120 pixel by 90 pixel image, 将每个按钮样式放在图像上, 垂直排列的, 并使用CSS更改 位置 背景上的图像. 因为你的按钮是120x30, 它一次只会显示图片的三分之一, CSS可以告诉它显示哪三分之一. 将三张图片转换成一张图片是很好的,但是请考虑一下 这张图片 来自流行的jQuery JavaScript框架. If you're using all (or many) of those icons on one page, you're cutting down on a huge number of requests by putting them together. +, 通常, putting images together in one file results in a 小 file size overall than separate images. Scripts 和 stylesheets can also be consolidated to reduce requests.

  3. 缓存控制

    Setting long-term cache-control headings on files that aren't likely to change can save some traffic for repeat visitors. 可以通过服务器缓存来提高效果, if you have a heavy load of server-generated content that doesn't need to update frequently. 在这种情况下, you can use various methods to ensure that the content is only generated once in a while. Generally this means that every so often one visitor will have a slower loading experience. If you are able to set up a mechanism on your server that updates the content independently of web requests, you can eliminate that once-in-a-while problem as well.

  4. 最小化对插件的依赖

    其中最大的一个就是Flash. 虽然Flash可以很好地优化, 它通常不是, 和 a whole website made in Flash is almost always tacky 和 difficult to navigate (back 和 forward 按钮) anyway. + it can considerably slow down machines without good graphics or memory resources. Having Flash in some parts of your site is generally fine, although iPhone 和 iPad can't see it so you might consider alternatives for them. 使用 HTML5标签 is a great way to use built-in browser functions instead of bulky plugins. Of course, not everyone has a browser that supports HTML5, so again alternatives are a good idea.

  5. 控件何时加载数据

    This can be achieved in two basic, somewhat opposite, ways. 首先,延迟载入. If you have a page with tons of contents that don't display right away, 因为它们在手风琴布局中, you can save initial load time by using AJAX to load the contents of each section only when it's needed. The downside of this is that when you do need the data, it's not immediate - it has to be downloaded. This technique can be used with the next one for great effect, however. 另一种方法是预加载内容. 如果有几个连续的页面, having the client cache the next page (after the current one is completely loaded) can improve browsing speed. Simply use delayed AJAX to load up the following page, 它应该留在用户的缓存中, 所以当他们点击“下一步”时,它就已经下载了." The two techniques can be combined by having the page load only what's displayed originally, then systematically import the rest in sequence or as it's needed.

还有其他的事情可以做, notably using a server that supports sending GZip data, 但大多数服务器会自动完成此操作, 和 if yours doesn't you 通常 can't do much to fix it besides change hosts. 更快的服务器也会有所帮助, 但是再一次, if someone else is hosting your site you'll 通常 need to change providers or plans to get a better server.

Matcha Design is a full-service creative agency specializing in 网页设计打印身份品牌界面设计视频制作静止摄影 和 运动设计. 使用 our passion for excellence, multi-cultural background, 和 获奖 实践, 我们一贯提供高品质的, 自定义, innovative solutions to meet the diverse marketing needs of our clients. 欲了解更多信息,请访问 www.MatchaDesign.com.