Improving the registration form on the site (4 useful tips)
On the Internet, the registration procedure occurs to us as often as the authorization form on the sites. You have to do the following: in all kinds of web services…

Continue reading →

How to create a website that increases the awareness of your brand
If you want your website to become successful, just a good design will not be enough: it must first reflect the personality of your brand. When developing a design, you…

Continue reading →

Improving the registration form on the site (4 useful tips)
On the Internet, the registration procedure occurs to us as often as the authorization form on the sites. You have to do the following: in all kinds of web services…

Continue reading →

Typography for web
There are many books and articles on typography, but only some of them reveal the choice and combination of fonts. Due to the emerging opportunities and prospects for free use…

...

User Interface Performance Criteria for Web Designers and Front-End Developers

The basics. There are several performance-related issues that most likely are already known to all designers and front-end developers. These include recommendations for: performing the minimum possible number of requests; image optimization; Placing stylesheets directly in the source document, and more precisely in its element; the location of the scripts to the closing tag of the body of the document; minimizing javascript and css code; etc. Observing these basic principles you will already be on the right path to increasing the speed of interaction with your users, however, this is not all, not all. It is also very important to remember that despite all the headaches that browsers provide in our daily work activities, they are incredibly reasonable. They take on a huge part of your optimization work. For this reason, most of the knowledge of performance issues is related to understanding how the browser behaves in certain situations and why it does so. This knowledge will allow you to use the abilities of the browser with maximum efficiency. In principle, the lion’s share of the science of web performance comes down to a simple understanding, manipulating and exploiting what the browser is already doing for us. Styles on top, bottom scripts.

This is actually a fundamental rule, which is also very easy to follow in most cases. But why is this so important? Let us express it very briefly: CSS blocks content visualization, so you should put all the issues related to styles to the foreground (that is, put at the beginning of the document, into an element). JavaScript blocks the loading process, which means they need to be run last, in order to avoid any delays in processing other components of the page. The reason CSS may prevent a document from being displayed is that browsers follow a consistent rendering process. They display objects as they hit the input, that is, in order. And if the style elements are located somewhere in the bottom of the document, the browser will not be able to process them properly until it reaches them. The bottom line is that the browser cannot avoid style redrawing, if they change the appearance of a component of the page that was previously displayed. Therefore, the browser will not visualize the document until it receives all the relevant style information. And if you place the styles in the bottom of the document, you will force the browser to wait for this information to arrive, i.e. this will cause the rendering to block. So, this is understandable, you simply place your CSS settings at the top of the page, allowing the browser to process them first. JavaScript is an obstacle for downloading for several reasons (although here the browser also behaves rationally), but first let’s look at how resources are actually loaded in the browser. In simple terms, the browser can perform parallel loading of the maximum possible amount of resources from one domain. The more domains involved, the more resources can be loaded in parallel in a single period of time.

At the same time, JavaScript interrupts this process, blocking parallel loading from any and all domains involved in it, here are the following reasons: It is assumed that the launched script can cause certain changes in the document, which means that the browser should bring the script to the end before as he proceeds to his further actions. And since the likelihood that the script will make changes to the page is high, the browser interrupts all the downloads currently being performed and focuses solely on the script. Downloading scripts, as a rule, requires adherence to a specific sequence, which is determined by the order in which they are enabled. So, for example, the jQuery library should be loaded before using the plugin that uses it. When a script is detected, the browser blocks parallel loading, so simultaneous loading of the library and the plug-in is simply impossible. And even if the possibility of simultaneous loading of both resources was possible, it is quite obvious that your plugin would have been received earlier than the jQuery library itself. So, due to the fact that browsers stop all other downloads during the selection of JavaScript, it would be a good idea to take it as a rule to place scripts in a document as late as possible. I am sure that you have had to deal with empty areas of the page, the display of which depends on loaded third-party scripts that require enough time for this to get our attention. This is what the process of blocking the selection scripts and rendering the rest of the page content looks like. But modern browsers are no doubt more rational. Here I will give an excerpt from the message addressed to Andy Davies (Andy Davies), as he explains this somehow better than I do: Modern browsers perform JavaScript loading in parallel, blocking the rendering process only until the script is executed ( although it is quite obvious that it should also be loaded).

Often, the script is loaded by the pre-loader browser preloading module. While the browser is blocking the page rendering process (for example, while waiting for CSS loading or script execution), a speculative (or advanced) parser (pre-parser) scans the rest of the document for resources that can also be loaded. Some browsers (for example, Chrome) provide for the prioritization of downloadable resources. So, let’s say if a script and an image are waiting for downloads, then the script will be loaded first. Well, well thought out. Thus, in order for the page to start as quickly as possible, you need to place the styles at the top. And the second point, in order to avoid blocking the display process by scripts, allocate space for JavaScript at the very bottom of the document. Make fewer requests. Another, in fact, an obvious way to optimize performance is, in fact, reducing the number of downloads themselves. Each resource involved on the page requires a separate HTTP request, and the browser is distracted and retrieves from the network each such resource used in the displayed page. Not every request runs smoothly, it can trigger the process of resolving a domain name, redirect, the desired resource may simply be missing. Each HTTP request you initiate, for whatever purpose it is intended: loading a style sheet, image, font, JavaScript file, … name anything here, is a potentially costly operation. Minimizing the number of these requests is the fastest way to optimize performance, of all available to you. Returning to the parallelization mentioned above in browsers, we note that most of them will only load a limited amount of resources for each requested domain at a time, and as you already know, JavaScript will certainly prevent these downloads. Therefore, every HTTP request must be carefully considered by you, such decisions should not be made on the fly.

Make fewer requests. Another, in fact, an obvious way to optimize performance is, in fact, reducing the number of downloads themselves. Each resource involved on the page requires a separate HTTP request, and the browser is distracted and retrieves from the network each such resource used in the displayed page. Not every request runs smoothly, it can trigger the process of resolving a domain name, redirect, the desired resource may simply be missing. Each HTTP request you initiate, for whatever purpose it is intended: loading a style sheet, image, font, JavaScript file, … name anything here, is a potentially costly operation.

Minimizing the number of these requests is the fastest way to optimize performance, of all available to you. Returning to the parallelization mentioned above in browsers, we note that most of them will only load a limited amount of resources for each requested domain at a time, and as you already know, JavaScript will certainly prevent these downloads. Therefore, every HTTP request must be carefully considered by you, such decisions should not be made on the fly. Achieve maximum parallelization. In order to allow the browser to load more resources in parallel, you could provide them from different domains. If the browser can retrieve, say, only two objects at a time from each domain, then by placing content on two domains, you thereby allow the browser to load four resources at the same time, and using three domains for this purpose, perform six downloads at once. Many sites include static / resource domains. Take, for example, Twitter, which uses si0.twimg.com to download static resources: Facebook has fbstatic-a.akamaihd.net for this purpose: Using these static / resource domains, Twitter and Facebook can provide more resources in parallel, those. Items from twitter.com and si0.twimg.com can be downloaded together. This is really the simplest way to achieve the simultaneous downloads needed to fully present your page. An even greater effect can be achieved using this approach in conjunction with the currently relevant technology CDN (* Content Distribution Network), which reduces latency by placing the necessary resources on more preferred in terms of geographical location servers. Well, not bad, but later we will discuss with you how using subdomains for these purposes in some situations may actually have a negative impact on performance. So let’s highlight our performance fundamentals in a separate list: Place the style sheets at the top of the document. JavaScript must be placed below (where possible). Make as few HTTP requests as possible. Using multiple domains to provide document resources can increase the amount of resources that the browser loads in parallel. HTTP requests and domain name permissions. When requesting a sample of each object from any domain, the following happens: an HTTP request is sent containing the appropriate headers; it is delivered to the desired host; and after processing the request, a response is sent back. This, of course, is the most simplified description of the process, but at about this level you should imagine it, no more. This is how the HTTP request is executed and all the objects you requested must follow this path. It is these requests that are critical when it comes to performance, because, as we found out earlier, browsers are limited in the number of such requests executed in parallel. And this makes us think about the use of subdomains, which consequently will entail an increase in the number of requests that can be executed simultaneously. However, not everything is so smooth. The problem in this case is to enable the DNS service, which searches for the necessary domains. Each time (with an empty cache), when we refer to a new domain, the corresponding HTTP request implies the start of a time-consuming process of resolving the required domain name (the required time interval is in the area from 20 to 120 milliseconds) performed by the DNS system, whereby using outgoing Search for the real location of the requested resource. As you probably already know, this is due to the fact that on the Internet, the addressing of hosts is based on IP addresses, which, for ease of human perception, are represented using domain names, and the domain name service DNS manages the search for an IP address that corresponds to the required domain name. .

And if every domain you request obviously requires the DNS process to resolve the domain name, then you should be one hundred percent sure that it is really worth it. In the case of a non-large site (such as CSS Wizardry, for example), using a subdomain to load resources would be an unreasonable step. In all likelihood, the browser will be able to cope with this task more quickly by parallel downloading of several objects from one domain than by pre-initiating a DNS search with subsequent parallelization of downloads. If you have, say, a dozen objects, then when placing them you should consider using one subdomain, and in this case, the initialization of the process of searching for an additional domain in order to better parallelize the loading of the available amount of resources may be justified. If there are, say, forty objects, it is advisable to place them on two sub-domains, and the total number of DNS searches performed for the correct operation of your site will be three, which also makes sense in this case. Keep in mind that the resolution of a domain name is a very laborious process, and you should decide what is preferable for you: perform an additional DNS search or use one domain to provide the resources of the site. It is also important to remember that since the request for the HTML code was made, for example, from the foo.com domain, the search process for this domain name has already been completed and all subsequent requests for this domain no longer need to contact the DNS service.

Proactive domain name resolution. If you, like me, want to have a Twitter widget on your site, provide analytical information and perhaps use some web fonts, then in this case you will still have to connect to other domains, which will entail the use of the DNS service. My advice to you is to always carefully weigh the pros and cons before using any widget, first of all paying attention to the harm done by this performance widget. However, if you still find that some of them can not do, please note the following information. Since all such things are on third-party domains, this means that, for example, the required font will be loaded in parallel with your CSS code (which, in fact, initiates this download), which is to some extent a positive thing, but the scripts will still be block parallel downloads (at least if they are not asynchronous). To the maximum extent, the DNS lookup problem manifests itself when third-party domain names are enabled. Fortunately, there is a super fast and easy way to speed up this process: “DNS prefetching” (* pre-resolution of domain names). DNS prefetching does exactly what the term itself says of this process, and it is also incredibly easy to use.

If you need to select objects from, say, widget.foo.com, then it’s best to take advantage of the ability to pre-resolve DNS by simply adding the following code directly to an element of your page: … … By simply inserting a regular string, we inform the browser supporting this method start the process of proactive domain name resolution a few steps before it is really required. This means that the DNS search will already be done at the time when the browser encounters the element

 

Effective methods of split-screen design
One of the most notable trends in web design in 2017 can be called the division of the screen into two parts. More and more web projects use a similar…

...

Design as a means of storytelling
You, as a designer, need to be aware that the plot on which the content is based later appears before any other components of the site. Content can not be…

...

How to choose the right web design for a web site
Web design - this is how much "meet" | web design and web site Each web studio begins to create a web site with the development and selection of web…

...