技术控

    今日:126| 主题:49390
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Front End Optimization – 9 Tips to Improve Web Performance

[复制链接]
唇齿相陪 发表于 6 天前
78 2

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
In today’s digital world, there are millions of websites accessed every day for a variety of reasons. Unfortunately, many of these websites are clunky and bothersome to use. Poorly optimized websites are plagued with a variety of issues including slow loading times, being non-mobile ready, browser incompatibilities, and so on.
   This post will go over useful techniques you can use to help improve your front end optimization . By focusing on clean code, compressing images, minimizing external requests, implementing a CDN, and a few other methods, you can dramatically increase the speed and overall performance of your website.
     Contents
   
       
  • 1. Clean up the HTML Document   
  • 2. Optimize CSS Performance   
  • 3. Reduce External HTTP Requests   
  • 4. Minify CSS, JS and HTML   
  • 5. Enable Prefetching   
  • 6. Increase Speed With a CDN and Caching   
  • 7. Compress Your Files   
  • 8. Optimize Your Images   
  • 9. Use a Minimalistic Framework   
    1. Clean up the HTML Document

  HTML, or hypertext markup language, is the backbone of nearly every website. HTML allows you to format webpages with headings, subheadings, lists, and other useful text-organizing features. With the most recent updates in HTML5, you can also create attractive graphics.
   HTML can be easily read byweb crawlers, so search engines can be updated with your website’s content in a timely manner. When dealing with HTML, you should strive to write in a manner that is both concise and effective . Additionally, when it comes to referencing other resources within your HTML document there are a few best practices you should follow.
  Proper CSS Placement

   Web designers tend to create CSS stylesheets after the main HTML skeleton of a webpage has been created. As such, CSS components are sometimes placed near the bottom of the document. However, it is recommended toput CSS at the top of your HTML document’s header in order to ensure progressive rendering.
  [code]

[/code]   This strategy will not improve the loading speeds of your website, but it will keep your visitors from waiting on blank screens or seeing a flash of unstyled text ( FOUT ). If most of your webpage’s visual elements are already loaded, visitors will be more likely to wait for the entire page to load, thus improving your front end optimization. This goes hand-in-hand with perceived performance .
  Proper Javascript Placement

   On the other hand, if you place JavaScript attributes within the head tag or near the top of the HTML document, you will block the loading process of HTML and CSS elements. This mistake can cause visitors wait on a blank page, and therefore may impatiently abandon your site. You can avoid this issue by placing JavaScript attributes at thebottom of your HTML.
   Additionally, when using JavaScript you should always prefer async script loading . This will prevent any 友荐云推荐




上一篇:Async / Await Warm Up
下一篇:Deep Learning: What, Why and Applications
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

mn来吧 发表于 6 天前
老天,你让夏天和冬天同房了吧?生出这鬼天气!  
回复 支持 反对

使用道具 举报

一点财气 发表于 6 天前
好好学习唇齿相陪的帖子!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.