Tuesday, 8 January, 2019 UTC

Front end Optimization – 9 tips to improve Performance

Front end Optimization – 9 tips to improve Performance

Summary

In today’s digital world, there are millions of reasons to access the web every day. However, not all websites are easy to use and load quickly. Websites that have not been optimized often encounter problems such as slow load times, not mobile friendly (Responsive), incompatible with some browsers, etc.This article will guide you to improve the front end, you can significantly increase your website’s overall speed and performance by focusing on clean code, image compression, minimizing external requests, deploy a CDN and several other methods.
1. Clean up HTML document
HTML or Hyper Text Markup Language is the backbone of almost every website. HTML allows you to format web pages with headings, subheadings, lists and other useful word sorting features. You can also create attractive graphics with the latest HTML5 version. HTML can be easily read by web crawlers, so search engines can update your website content in a timely manner. When working with HTML, you should try to write in a way that is both concise and effective. In addition, when referring to sources other than HTML document, there will be some practical knowledge that you should follow.

Appropriate CSS position

Web designs often create CSS stylesheet when creating the main HTML slopes. Thus, CSS elements are usually placed at the end of the document. However, we should place the CSS at the top of the HTML document to ensure the render progress.


<head>

<link href='https://yourwebsite.com/css/style.css' rel='stylesheet' type='text/css'>

</head>
This strategy may not improve page loading speed, but it can keep viewers of your site away from viewing a white screen or an unedited text. That helps the visitor to your site will accept to wait for the page to load. So improve your front end optimization.
Suitable Javascript location

On the other hand, if you put Javascript attributes on the head tag or near the top of the HTML document, you will lock the loading process of the HTML and CSS components. This may cause many visitors to your site to wait on a blank page and therefore lose patience to abandon your site. You can avoid this problem by setting the Javascript properties below HTML. In addition, when using Javascript, you should download async script more. This will prevent any <script> tag from the HTML rendering process eg in case it accidentally skips the middle of the text (?).
While HTML is one of the most valuable tools for web designers often used with CSS and Javascript attributes can slow down your website. CSS and Javascript properties can convert your website better, but you should use it appropriately and have a special interest. A practical example with CSS and Javascript is to avoid embedding code. When you embed code, you put CSS into a tag style, and use Javascrpit in a tag script. This causes an increase in the amount of HTML code to load each time you refresh the page.

Combine files? Do not worried!
In the past you might have to regularly use the used CSS scripts into a single file (separate file) to easily reference a file in HTML code instead of multiple files. This will be a reasonable thing when using the HTTP1.1 protocol, however, this is no longer necessary. Thanks to HTTP / 2, you can now use multiplexing to send and receive HTTP requests and asynchronous responses through a single TCP connection.
This means you will never have to combine scripts into a single file again.

2. Optimize CSS Performance

CSS or cascading style sheet is used to convert HTML-based content into a clean and professional document. Many CSS options require HTTP requests (except when using inline CSS), so you should try to minimize cumbersome CSS without removing important features. If your banner, plugin, and layout are placed in a separate CSS file, this will force your site visitors to load countless files at once. This also leads to a longer page load if these files are loaded from an external source, although there are now fewer problems thanks to HTTP / 2. In addition, any webmaster who uses the import directive to bundle external stylesheets on a web page is an outdated method and it prevents parallel downloading. Link tag is your best option and will also improve your website’s front end performance. Furthermore, external stylesheets are required with the link tag also not blocking parallel downloads

3. Cut down external HTTP requests

In many cases, a large amount of website load time comes from external HTTP requests. The speed of loading external resources depends very much on the infrastructure of the server provider, address, etc. The first goal when reducing external HTTP requests is to verify your website with a minimalist view. Research every element of your site and remove any features that affect the user experience. These features may be:
  • Images are not needed
  • Javascript is not required
  • CSS too much
  • Plugin is not required
After removing the diluting elements, you must find a way to make the remaining content become tidy and tidy. Compression tools, CDN services and Prefectching that will be explained below are the best options for managing HTTP requests. In addition, check out the tutorial on how to reduce DNS search along with reducing external HTTP requests.

4. Minimal CSS, JS and HTML

Minimalistic skills can help you remove unnecessary features in the file. When you write code, you often indent and write notes – this will make your code clean and readable but also inadvertently add capacity to your code file.
For example, here is the code before applying the minimalist method.


    .entry-content p { 

        font-size:14px !important; 

    } 



    .entry-content ul li { 

        font-size:14px !important; 

    } 



    .product_item p a { 

        color:#000; 

        padding:10px 0 0 0; 

        margin-bottom:5px; 

        border-bottom:none;

    }
And this is the code after applying the minimalist method.


.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 reduce the size in CSS, JS and HTML files using minimal tools.

5. Turn on prefetching (Prefetching)

The prefetch feature can improve the visitor’s browsing experience by preloading necessary sources and data before they need it. There are 3 main types of pre-search feature:
  • Pre-load Link
  • Pre-load DNS
  • Prerendering
With pre-fetch, URLs, CSS, images, and JS are aggregated for each link even before you leave the current site. This will ensure that site visitors can use links to navigate between pages with the minimum page load time. Luckily, the prefetch feature is not difficult to activate. Depending on what kind of fetch you want to enable, you can easily add
rel="prefetch"
,
rel="dns-prefetch"
rel="prerender"
tags, or
rel="prerender"
tags to properties in your website.

6. Speed ​​up with a CDN and Caching

You can completely improve website speed and performance by using a content transfer system. When you use a CDN, you link static content to a worldwide server expansion system. This is especially important if your website is targeted at an audience worldwide. CDN allows your website visitors to load data from the nearest server. If you use a CDN, the files will automatically compress to deliver faster in global scope.
CDN is one of caching methods that can help you significantly improve asset transfer time, but there are many other caching methods you can implement – one of which is to upgrade the browser cache. The browser’s set up cache allows the browser to contain multiple files in its cache for faster delivery. The implementation of this method can be completed directly in the original server configuration file.

7. Compress files

While many CDN services will automatically compress files for you, if you do not use CDN, you should consider compressing files by another method in the source server to optimiaztion front end. Compressing files will make your website content more compact and easier to manage. One of the most popular methods is Gzip. This is one of the excellent methods for shrinking documents, audio files, PNG images and some other bulky uncompressed files.
Brotli is a new file compression algorithm, but it is becoming more and more popular. This open source algorithm is often updated by software engineers from Google and other organizations. It has proven itself that file compression is much better than existing methods. Although it is limited, it will definitely become the default compression algorithm.

8. Optimize images

For those unfamiliar with front end optimization, images can be killer websites, large photo albums and high-resolution images can be annoying for the rendering process. High-definition images that have not been optimized can weigh up to several megabytes. Therefore, optimizing these files will allow you to improve the front end performance of your website. Each image contains dozens of information that are not really related to the image. With JPEG images, the image file contains both dates, locations, specifications and some other irrelevant information. You can sort the length of the file loading process by deleting unnecessary image information with the optimizing tools like Optimus. Optimus uses smart compression features using compressed PNG images.
On the other hand, Optimus uses lightweight compression features for JPEG files. Although compression preserves the removal of additional information of the image, Optimus is installed to compress at the level that the user will not see the image degraded. This allows users to save large amounts of space while maintaining high image quality.

9. Use a minimalist framework

Unless you build a website with just your code knowledge, you can avoid many front end optimization errors by using a good frontend framework. Although there are some more famous, larger frameworks with more features and more options, your web may not be necessary. That is why it is necessary to determine the features that your website needs and start with a framework that provides all those features while still being light. Some recent frameworks use HTML, CSS, and JS code quite briefly. This is one of the few minimalist frameworks that make web pages load quickly:
  • Pure
  • Skeleton
  • Miligram
A framework does not completely replace web design, programming, and maintenance. Simply put, imagine the framework is a new home. This house is clean and spacious but it is also quite empty, when you buy more furniture, household items and decorations, your responsibility is to make sure the house does not become messy. Meanwhile, you must also make sure that the framework is not undermined by excessive code, large images and excessive HTTP requests.

Summary

Frontend optimize is considered the same as intimidating endeavors, but you can improve your website loading speed by applying the principles of this tutorial. Remember, the faster the website loads, the higher the user experience will be. Therefore, your interests and site visitors are the same.
Source: https://techtalk.vn/front-end-optimization-9-tips-de-cai-thien-web-performance.html

Share This:

The post Front end Optimization – 9 tips to improve Performance appeared first on FrontNet Blog.

... more @ frontnet.eu

frontnet.eu