How is pre-load blocks and when you need it?
What is it called?
For example, poor Internet, a person visits the site and sees the location of the blocks (photo from news website):
Designer, the designer needs to provide including the layout of the boot? When really justified this approach? How does it affect page speed?
For example, poor Internet, a person visits the site and sees the location of the blocks (photo from news website):
Designer, the designer needs to provide including the layout of the boot? When really justified this approach? How does it affect page speed?
asked June 8th 19 at 17:10
2 answers
answered on
Solution
1. This take is called is called Placeholder UI.
2. Yes, the designer should provide the layout with Placeholder UI if this functionality was decided to be implemented.
3. This approach is justified under certain conditions:
3.1 If the content is loaded dynamically and can not be a situation when the content is not.
For example: on the main page of a news site the content is always there. But on the search page, content may not be (could not find the article at the request of the user). In this case, the placeholder may confuse the user (when loading a placeholder will be shown, but in the end it will not boot - looks like a bug)
3.2 If you want to create the appearance of rapid loading and improve UX. The site is not completely downloaded, but the man already knows where to look. Especially true on a slow Internet.
4. This negatively affects the speed of the pages, because load markup and CSS to implement this technique. But this influence is not significant (any jQuery slider will affect 50 times more)
Note that on a static site implementation of this technique has virtually no meaning.
2. Yes, the designer should provide the layout with Placeholder UI if this functionality was decided to be implemented.
3. This approach is justified under certain conditions:
3.1 If the content is loaded dynamically and can not be a situation when the content is not.
For example: on the main page of a news site the content is always there. But on the search page, content may not be (could not find the article at the request of the user). In this case, the placeholder may confuse the user (when loading a placeholder will be shown, but in the end it will not boot - looks like a bug)
3.2 If you want to create the appearance of rapid loading and improve UX. The site is not completely downloaded, but the man already knows where to look. Especially true on a slow Internet.
4. This negatively affects the speed of the pages, because load markup and CSS to implement this technique. But this influence is not significant (any jQuery slider will affect 50 times more)
Note that on a static site implementation of this technique has virtually no meaning.
answered on
Solution
Approach with the UI placeholders justified when the content is ready the container for blocks loaded JS script after loading the main markup via AJAX in synchronous or asynchronous modes.
For example, the content is loaded using includeHTML.
So to make the holders: https://jsfiddle.net/d1pzay6k/
Further optimization:
1. Competent critical CSS inline in the code: you can create this
2. jQuery Lazy Load
3. Prepare placeholders for the UI in the SVG possible tracer: imagetracerjs.
For example, the content is loaded using includeHTML.
So to make the holders: https://jsfiddle.net/d1pzay6k/
Further optimization:
1. Competent critical CSS inline in the code: you can create this
2. jQuery Lazy Load
3. Prepare placeholders for the UI in the SVG possible tracer: imagetracerjs.
Find more questions by tags DesignLayoutUser interface