Env*_*nve 50
在此处测试您的页面PageSpeed Insights - Google Developers,您将看到有关提高网站速度的所有建议.
Sud*_*dav 28
以下是一些可以提高网站速度的基本内容:
example.com,以com1.example.com和com2.example.com.这允许您最大化并行下载.不要保留超过两到四个域,否则会给你DNS查询惩罚.AMD*_*AMD 24
以下是您可以测试网页的列表:
另外,为了加快页面速度,您可以使用:
1.优化您的图像
知道何时为图像使用适当的文件格式.更改为不同的文件格式可以显着减少图像的文件大小.
查看这些资源以了解有关优化图像的更多信息:
为了减少图像尺寸,我建议使用TinyPNG
2.不要缩小图像
避免使用比您需要的更大的图像,因为您可以在HTML中设置元素width和height属性<img>.
*如果您需要100x100px图像且图像尺寸为700x700像素,请使用Photoshop等图像编辑器或其中一个基于Web的图像编辑器将图像调整为所需尺寸.这会降低图像的文件大小,从而有助于减少页面加载时间.
3.压缩和优化您的内容
压缩网站内容的任务可能会对减少加载时间产生巨大影响.使用HTTP压缩时,所有网页数据都在一个较小的文件中发送,而不是一个包含许多不同文件的请求.有关更多信息,请参阅有关HTTP压缩的 Wikipedia文章.
您还可以通过组合它们并缩小源代码来优化和压缩JavaScript和CSS文件.
4.将样式表引用放在顶部
将样式表引用移动到<head>HTML文档的引用可以帮助您的页面感觉加载速度更快,因为这样可以让您的页面逐步呈现样式.此外,W3C标准并没有受到伤害.
5.将脚本引用放在底部
浏览器每个主机名只能同时下载两个组件.如果您将脚本添加到顶部,它将在页面的初始加载时阻止其下面的任何其他内容.这使得感觉页面加载速度变慢.
要避免这种情况,请将脚本引用尽可能放在HTML文档的下方,最好是在结束<body>标记之前.
6.将JavaScript和CSS放在外部文件中
如果您的JavaScript和CSS直接在HTML文档中,则每次请求HTML文档时都会下载它们.然后,这不利用浏览器缓存并增加HTML文档的大小.
始终将CSS和JavaScript放在外部文件中; 这是一种最佳做法,使您的网站更易于维护和更新.
7.最小化HTTP请求
访问新网页时,大部分页面加载时间都花在下载该页面的组件上(例如图像,样式表和脚本).
通过最小化网页需要的请求数量,它将加载更快.要减少对图像的HTTP请求,您可以做的一件事是使用CSS精灵来组合多个图像.
如果您有多个样式表和JavaScript库,请考虑将它们组合以减少HTTP请求的数量.
8.缓存您的网页
如果您使用动态生成网页的内容管理系统,则应静态缓存网页和数据库查询,以便减轻服务器的压力并加快页面呈现速度.
9.减少301重定向
每次使用301重定向时,它都会强制浏览器使用新的URL,从而增加页面加载时间.如果可能,请避免使用301重定向.
这里的其他答案很好地详细说明了性能调试工具和提高加载时间的技巧,所以我不再重复了.
您的主要问题是,在向访问者显示主页之前,您绝对会在网站中加载所有内容.这是不必要的,并且是导致您的网站加载缓慢的主要原因.
我可以理解你想要尽可能多地预加载,这样当访问者浏览你的网站时,一切似乎都会立即加载.但是,您所做的只是将每个部分的小加载时间转移到一个巨大的前期加载时间.如果访问者只能浏览您网站的某个区域,他们仍然会支付整个网站的加载时间,而不仅仅是他们访问的部分.
实现较小加载时间的最简单方法是将每个部分拆分为自己的页面,然后仅加载您在该页面上显示的内容.Javascript和CSS等资源通常很好地缓存,因此您通常不必担心其加载时间会影响除主页之外的任何内容.
或者,假设您希望将整个站点保留在一个页面上,则需要使用Javascript动态添加各个子部分,一旦主页所需的所有内容都已加载并且进度条已被隐藏.是的,如果访问者快速点击子部分,他们将看到其内容被加载,但如果他们只对您的"与我联系"部分感兴趣,他们将能够更快地获得他们需要的信息.甚至没有注意到其他部分还没有完全装满.
那,并且不要使用巨大的背景图像.可以升级较低分辨率的图像以填充屏幕,并提高JPEG压缩级别以减小文件大小.这是一个背景图片,不应该成为焦点 - 为您的投资组合留下高分辨率图像.:)
将FireBug插件安装到FireFox中,然后在FireBug中打开NET选项卡的情况下加载您的站点.您可以查看每个资源加载所需的时间.
看起来有两个背景图像,每个加载时间超过20秒.
我没有什么建议可以改善加载时间:
所以:是的,你真的需要修复你的网站.人们不会等到加载网站,特别是个人/专业网站.我在您的网站上看到的最大的事情是几乎不存在图像压缩/优化.以下是一些指导原则:
将JPEG用于照片和渐变.将PNG(或GIF)用于艺术线条或文字.这与用于每种类型图像的压缩算法有关.
通常,对于网络上的大多数图像,JPEG压缩率为80%都是相当不错的,包括所有缩略图/图库照片.例如,这里的JPEG:http://www.jj-triggs.com/images/page4_img3.jpg是25k.25K!这是巨大的,你在页面上有15个!在80%的压缩率(7k的图像大小)下,我可以检测到一些压缩伪像,但我也是一名专业设计师,我正在寻找它.即使在85%时,图像尺寸也降至约8k.
同样你的背景图像.bg_img1.jpg的时间约为900k; bg_img2.jpg是1.5 MB.这太疯狂了!特别是因为城市景观已经部分模糊 - 没有任何细节可以保证完全没有JPEG压缩.我将bg_img2.jpg上的压缩率降低到60%,文件大小<200k,质量差异几乎没有:https ://d3vv6lp55qjaqc.cloudfront.net/items/1y3V2B2r0S1W0T1i081n/cityscape-compressed.jpg?X- CloudApp-Visitor-Id = 695722fcc5cecec10f09e16181dbdf5f&v = 3cf18008.
有时候,当图像是内容/网站的焦点时,它可以大而且压缩程度较低.但是你背景和画廊中的这些图像并不重要:它们是背景图像.他们不打算学习.画廊图像同上; 他们只是让用户知道他们在下次点击时会得到什么.
使用选择性JPEG压缩.Adobe Fireworks提供此功能 - 如果您有一个大图像,其中部分图像清晰且对焦但其余部分模糊或将被内容覆盖,您可以选择一个您想要更高JPEG压缩率的区域(例如85%)并将图像的其余部分调低至50%或其他任何值.例如,这里是选择性JPEG选择的城市景观https://d3vv6lp55qjaqc.cloudfront.net/items/2V1I1o0B1H0v2O141w1R/cityscape-compressed-selective.jpg?X-CloudApp-Visitor-Id=695722fcc5cecec10f09e16181dbdf5f&v=375e11ed.对焦部分为75%; 其余的是50%,打开平滑.
不要将图形用于文本.在TypeKit,Google Webfonts的这一天,以及通过CSS进行合理的排版控制,几乎没有必要.
减少需要传输的文件数量.除下载时间外,每个图像,JavaScript文件,CSS文件等都需要自己的HTTP请求.
以下是一些关于图像压缩和下载时间的文章:
这是一个很长的回复...但我觉得它提供了一些基本方法来提高网站性能的足够细节.以下答案也适用于几乎所有网站.以下提供的任何具体示例可能适用于http://www.jj-triggs.com/的当前版本
在下面的几点中,我指的是在Firefox中使用Net Panel of Firebug插件,但其他浏览器也有类似的工具,几乎与我提到的方法相同.
在Firefox上安装Firebug并打开您的网站.为您的站点启用Firebug(F12).启用Firebug的Net面板(如果尚未启用).
您的网站:http://www.jj-triggs.com/ - 我的系统需要5-6秒才能重复访问(对于这个答案,我没有提到改进方法) - 但第一次访问大约需要60秒.(以下几点着重于如何改进)下面提到的大多数要点将改善您的网站的第一次加载(或新的重新加载)
在已经加载页面后,为了测试新负载,您可以使用Ctrl + F5,Ctrl + R,Ctrl + Shift + R(取决于浏览器).在页面加载时监视Firebug的Net Panel.
- The speed of the site host server (seems OK, nothing much to do for now)
- Visitor's connection speed (cannot do anything for it)
- Everything else (where you need to fix many things).
The important approaches to resolve them are listed below:
- Serve the user files with less size but same content:
- Approach:
Enable gzip on files which contain text contents (*.js, *.css, *.html etc) (currently your site does not use gzip)
- How to identify:
In Net panel, expand the HTTP request details for a file, in the Headers tab of the expanded details, Content-Encoding field should show the value gzip.
- Solution:
It might need you to modify .htaccess file (or some other approach based on the server)
Search on Google or StackOverflow to see how to enable it.
- Approach:
Use minified JS and CSS files
- How to identify:
In Net panel, expand the HTTP request details for a JS/CSS file, in the Response tab of the expanded details, the code should be a minified version (no whitespace characters) of the file.
- Solution:
Use either the minified JS/CSS files as provided by the library.
Or you can minify them yourself by using tools like "JSMin" or "YUI (CSS and JS) Compressor"
- Approach:
- Serve the user optimum images, i.e., less size with good enough quality
- How to identify:
- In Net Panel, go to Images tab > Sort by size
- Generally the size of the images should be ... 1kb to 30kb for simple icons and logos and 20kb to 250kb for photos and large backgrounds.
- Solution:
- Compress the large images with softwares like GIMP (free) or Photoshop.
- Approach:
- Load the files from a CDN if possible
- eg: Load jQuery, jQuery UI etc from popular but still free CDN
- Advantage even for first visit: If the user has visited any other site which refers to the same path, it would be fetched from the cache itself
- How to identify:
- Check the Net panel's "Domain" column for popular libraries like jQuery, jQuery UI etc.
They should be getting loaded from a popular CDN such as Google.
- Solution:
- Include JS and CSS from (Google) CDN if available.
- Approach:
- Load CSS before JS
- It may not necessarily help much with faster loading completion,
but it usually gives a faster feeling of load because your CSS gets applied as soon as possible.
- How to identify:
- Check the Timeline column in Net panel. Usually CSS files should be the getting loaded before JS.
- Solution:
- Move the <script> tags towards the bottom of the page.
- Approach:
- Wherever possible, load third-party components like Google Maps dynamically after the page load has completed
- How to identify:
- Check the Timeline column in Net panel. The 3rd-party components should usually begin loading after almost all the other code for the site has loaded.
- Solution:
- The solution would depend on the third-party component and might be a bit tricky.
Generally, loading the 3rd-party JavaScript after a small delay (using window.setTimeout and code to dynamically add script tags) would provide you better performance compared to loading the 3rd-party JS using plain HTML.
我相信修复这些提到的问题可能会使您的首次加载时间减少到目前所需时间的10-30%.
| 归档时间： |
|
| 查看次数： |
2495 次 |
| 最近记录： |