这是一个关于帮助、改进和优化前端技术的故事,这对前端人员来说是一个非常有用的知识。主要内容包括清理代码、压缩图片、压缩外部资源等方法。这些方法将显著提高您的网站的速度和整体性能。
一、清理HTML文档。
HTML,即超文本标记语言,几乎是所有网站的支柱。HTML将标题、子标题、列表等文档结构格式带到网页上。图表甚至可以在最近更新的HTML5中创建。
HTML很容易被网络爬虫识别,所以搜索引擎可以根据网站的内容在一定程度上实时更新。写HTML的时候,要尽量简洁有效。此外,在HTML文档中引用外部资源时,还需要遵循一些最佳的实践方法。
1.适当放置CSS。
Web设计师喜欢在创建风格表之前在网页上建立主要的HTML骨架。这样,网页中的风格表通常放在HTML后面,接近文档的结尾。然而,建议将CSS放在HTML的上部和文档头中,以确保正常的渲染过程。
该策略不能提高网站的加载速度,但它不会让访问者长时间观看空白屏幕或无格式文本(FOUT)。如果网页上的大部分可见元素已经加载,访问者更有可能等待加载整个页面,从而带来前端的优化效果。这就是知觉性能。
2.正确放置Javascript。
另一方面,如果JavaScript放置在head标签或HTML文档的上部,则会阻止HTML和CSS元素的加载过程。这种错误会增加页面加载时间,增加用户的等待时间,让人感到不耐烦,放弃访问网站。但是,您可以将JavaScript属性放置在HTML底部,以避免此问题。
此外,使用JavaScript时,人们通常喜欢用异步脚本加载。这将阻止HTML中script>标签的呈现过程,如文档中间的情况。
虽然HTML是网页设计师最值得使用的工具之一,但它通常与CSS和JavaScript一起使用,这可能会减慢网页浏览速度。虽然CSS和JavaScript有利于网页优化,但使用时也要注意一些问题。使用CSS和JavaScript时,避免嵌入代码。因为当您嵌入代码时,将CSS放置在样式标记中,并在脚本标记中使用JavaScript,这将增加每次刷新网页时必须加载的HTML代码量。
二、优化CSS性能。
CSS,即级联风格表,可以从HTML描述的内容生成专业整洁的文件。很多CSS需要通过HTTP请求(除非使用内联CSS)引入,所以要努力去除繁琐的CSS文件,但要注意保持其重要特征。
如果使用CSS将插件和布局风格保存在不同的文件中,访问者的浏览器每次访问都会加载大量的文件。虽然HTTP/2的存在减少了这个问题,但加载外部资源仍然需要很长时间。要了解如何减少HTTP请求以大大缩短加载时间,请阅读WordPress性能。
此外,许多网站管理员错误地使用@import指令在网页上引入外部风格表。这是一种过时的方法,可以阻止浏览并平行下载。link标签是最好的选择,它也可以提高网站的前端性能。更重要的是,通过link标签要求加载的外部风格表不会阻止并行下载。
三、减少外部HTTP请求。
在许多情况下,网站的大部分加载时间来自外部HTTP请求。外部资源的加载速度因主机提供商的服务器架构和位置而异。减少外部请求的第一步是简要检查网站。研究您网站的每个组成部分,以消除任何影响访问者体验的组成部分。这些组件可能是:
1.不必要的图片。
2.JavaScript代码无用。
3.css过多。
4.多余的插件。
去除这些多余的成分后,整理剩余的内容,如压缩工具、CDN服务和预获取(prefetching),这些都是管理HTTP请求的最佳选择。此外,减少DNS路由搜索教程将教你如何逐步减少外部HTTP请求。
事实上,我们似乎需要大量的精力来进行前端优化。我相信这个应用程序指南中的一些技巧可以帮助你大大提高网站的加载速度。一般来说,网站加载得越快,用户体验就越好。因此,提高网站速度是前端优化的必要工作内容。