技术控

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

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

[复制链接]
唇齿相陪 发表于 2016-12-2 06:50:06
187 3

立即注册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.
  1. <head>
  2. <link href='https://yourwebsite.com/css/style.css' rel='stylesheet' type='text/css'>
  3. </head>
复制代码
  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 <script> tags from blocking the HTML rendering process in the event that it does come across one in the middle of the document for instance.
   While HTML is one of the most valuable tools available to web designers, it is often used with CSS and JavaScript attributes that can slow down your webpage. CSS and JavaScript attributes can transform your webpages for the better, but you should take special care and use them appropriately. A good practice with CSS and JavaScript is to avoid embedding the code. When you embed code, you place CSS in a style tag, and you use JavaScript in script tags. This increases the amount of HTML code that must be loaded each time your webpage is refreshed.
  Combining Files? Don’t Bother

   In the past, you may have combined frequently used CSS scripts into a single file so that you could simply reference one file within your HTML code instead of many. This was a sound practice when using the HTTP1.1 protocol , however is no longer necessary .
   Thanks toHTTP/2, you can now take advantage multiplexing to send and receive HTTP requests and responses asynchronously via a single TCP connection.
  

Front End Optimization – 9 Tips to Improve Web Performance

Front End Optimization – 9 Tips to Improve Web Performance
Img Src: qnimate.com

  This means that you no longer need to tediously combine scripts into a single file.
   2. Optimize CSS Performance

  CSS, or cascading style sheets, can be used to transform your HTML-based content into a clean and professional document. Many CSS options require HTTP requests (unless using inline CSS), so you should make an effort to minimize bloated CSS files without eliminating vital features.
   If your banner, plugin, and layout link styles are all located in separate CSS files, this will require your visitors’ browsers to load numerous files at once. Although now less of a problem thanks to HTTP/2, this can certainly still attribute to longer load times if the files are loaded from external sources. Read our WordPress Performance article to see how reducing HTTP requests improved loading times dramatically .
   Additionally, any webmasters mistakenly use the @import directive to include external stylesheets on a webpage. This is an outdated method, and it prevents browsers from performing parallel downloads. The link tag is your best option and will also improve the front end performance of your website. Furthermore, external stylesheets requested with the link tag do not block parallel downloads.
   3. Reduce External HTTP Requests

   In many cases, a large portion of a website’s load time comes from external HTTP requests. The speed at which an external resource loads can vary depending on the hosting provider’s server infrastructure, location, etc. Your first goal when reducing external HTTP requests should be to examine your website with a minimalist outlook. Study each component of your webpages, and eliminate any features that do not improve the experience of your visitors . These features may be:
  
       
  • Unnecessary images   
  • Unnecessary JavaScript   
  • Excessive CSS   
  • Unnecessary plugins  
   After you have eliminated the clutter, find ways to trim the weight of your remaining content. Compression tools, CDN services, and prefetching, as explained below are your best options for managing HTTP requests. Additionally, check out our guide on how toreduce DNS lookups which goes hand-in-hand with reducing external HTTP requests.
   4. Minify CSS, JS and HTML

   

Front End Optimization – 9 Tips to Improve Web Performance

Front End Optimization – 9 Tips to Improve Web Performance

   Minification techniques can help you eliminate unnecessary characters within a file. When you are writing code in an editor, you likely use indentations and notes. These methods certainly keep your code clean and readable, but they also add extra bytes to your document.
  For example, this is a code snippet before minification is applied.
  1. .entry-content p {
  2. font-size: 14px !important;
  3. }

  4. .entry-content ul li {
  5. font-size: 14px !important;
  6. }

  7. .product_item p a {
  8. color: #000;
  9. padding: 10px 0px 0px 0;
  10. margin-bottom: 5px;
  11. border-bottom: none;
  12. }
复制代码
And here is the same snippet after minification has been applied.
  1. .entry-content p,.entry-content ul li{font-size:14px!important}.product_item p a{color:#000;padding:10px 0 0;margin-bottom:5px;border-bottom:none}
复制代码
  You can easily trim the bytes in your CSS, JS, and HTML files by using a minification tool. For more information on minification, read out complete post How To Minify CSS, JS, and HTML .
   5. Enable Prefetching

   

Front End Optimization – 9 Tips to Improve Web Performance

Front End Optimization – 9 Tips to Improve Web Performance

   Prefetching can improve your visitors’ browsing experience by fetching necessary resources and related data before they are needed . There are 3 main types of prefetching:
  
       
  • Link Prefetching   
  • DNS Prefetching   
  • Prerendering  
  With prefetching, the URL, CSS, images, and JavaScript are gathered for each link before you even leave your current webpage. This ensures that visitors can use links to navigate between pages with minimal loading times.
   Fortunately, prefetching is easy to enable. Depending upon the type of prefetching you want to enable, you can simply add the rel="prefetch" , rel="dns-prefetch" , or rel="prerender" tag to your link attributes within your website’s HTML.
   6. Increase Speed With a CDN and Caching

   You can significantly improve the speed and performance of your website by using a content delivery network. When you use aCDN, you link your website’s static content to an extended network of servers across the globe. This is especially important if your website caters to a global audience. The CDN allows your site’s visitors to load data from their nearest server. If you use a CDN, your site’s files will automatically be compressed for rapid delivery across the globe.
   

Front End Optimization – 9 Tips to Improve Web Performance

Front End Optimization – 9 Tips to Improve Web Performance

   A CDN is one method of caching that can greatly help improve the delivery times of your assets, however, there are other caching techniques that you can implement as well – one of which is to leverage browser caching .
  Properly setting up browser caching allows your browser to store certain files within its own cache to be delivered faster. Configuring this method can be done directly within your origin server’s configuration file.
   Learn more about caching and different types of cache methods in ourcache definition article.
   7. Compress Your Files

   

Front End Optimization – 9 Tips to Improve Web Performance

Front End Optimization – 9 Tips to Improve Web Performance

   While many CDN services will compress your files for you, if you don’t use a CDN consider using a file compression method on your origin server to improve your front end optimization. File compression will make your site’s content light and easy to manage. One of the most commonly used file compression methods isGzip. This is an excellent method for shrinking documents, audio files, PNG images, and other bulky files that have not already been compressed.
   Brotli is another file compression algorithm that is still fairly new, however growing in popularity. This open-source algorithm is regularly updated by software engineers from Google and other organizations. It has proven itself to compress files at a much better ratio than other existing methods. Although support for this algorithm is still minimal it is well positioned to be the next default file compression algorithm.
   Read our complete article onBrotli compression to learn more.
   8. Optimize Your Images

  For people who are unaccustomed to the ways of front end optimization, images can be a website-killer. Massive photo albums and large high-resolution images on your site can jam the rendering process. High-definition images that are not optimized can weigh several megabytes. Therefore, properly optimizing these will allow you to improve your site’s front end performance.
   Each image file contains a trove of information that isn’t related to the actual photograph or picture. For JPEG photographs, the file contains dates, locations, camera specifications, and other irrelevant information. You can streamline an image’s lengthy loading process by deleting this extra image data with optimization tools such as Optimus . Since Optimus is a lossless image compression service, your images will not degrade in quality . Rather their size will be reduced by maintaining the same quality as the original image.
   

Front End Optimization – 9 Tips to Improve Web Performance

Front End Optimization – 9 Tips to Improve Web Performance

  On the other hand, if you want to further optimize an image, you can use lossy compression which actually removes additional data from the image and thus degrades its quality.
   

Front End Optimization – 9 Tips to Improve Web Performance

Front End Optimization – 9 Tips to Improve Web Performance

   To learn more about the difference between lossy vs lossless compression , read our complete guide.
   9. Use a Minimalistic Framework

   Unless you are building your website with solely your own coding knowledge, you can avoid many amateur front end optimization mistakes by using a goodfront end framework. Although some larger, more well-known, frameworks come with a bunch of additional features and options, your web project may not require them all .
  That’s why it’s important to determine what features your project requires and start with a framework that can provide those features while remaining lightweight. Some of the most recently designed frameworks use concise HTML, CSS, and JavaScript code.
  Here are a few examples of minimalist frameworks that provide fast loading times:
  
       
  • Pure   
  • Skeleton   
  • Milligram  
  A framework is not a replacement for careful web design, programming, and maintenance. For simplification, imagine that the framework is a new house. The house is clean and presentable, but it is also empty. When you add furniture, appliances, and decorations, it is your responsibility to ensure that the house does not become cluttered. Likewise, it is also your responsibility to make sure that the framework is not ruined by redundant codes, large images, and excessive HTTP requests.
  Front End Optimization – In Summary

  Front end optimization can seem like an intimidating endeavor, but you can greatly improve the loading speed of your website by applying the principles of this guide. Remember, the faster your website loads, the better user experience your visitors will have. Therefore, ultimately benefiting you and your visitors alike. Let us know in the comments section if you have any other great front end optimization tips.



上一篇:Async / Await Warm Up
下一篇:Deep Learning: What, Why and Applications
mn来吧 发表于 2016-12-2 08:05:07
老天,你让夏天和冬天同房了吧?生出这鬼天气!  
回复 支持 反对

使用道具 举报

一点财气 发表于 2016-12-2 11:53:17
好好学习唇齿相陪的帖子!
回复 支持 反对

使用道具 举报

泪痕づ 发表于 2016-12-9 10:13:22
下辈子要做男生,娶一个像我这样的女生。
回复 支持 反对

使用道具 举报

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

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

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

返回顶部 返回列表