|
Google is obsessed with page speed. And it is officially used as a ranking factor, urging you to increase your page speed. But I think page speed is a UX element. In fact, users find slow mobile page speeds more frustrating than watching a horror movie. Ericsson ConsumerLab. Neurons Inc research (2015) Slow page speed is more stressful than watching a horror movie The problem with page speed these days is that it is measured mechanically. Concept of page speed based on user experience This is what happens when you translate user experience and performance standards. user experience Compatible technical standards Is the server running? FP (First Paint)/FCP (First Content Full Paint) Is the content being rendered for the user to engage with? FMP (First Meaningful Paint) ⇒Hero Element Is it ready to use now? TTI (Time to Interactive) Is it smooth? Was it a good experience? must be tackled in the long term Measure and optimize paint timing Measure and optimize paint timing #2 FP (First Paint) – The timing when the browser starts rendering something.
FCP (First Content Full Paint) - When the browser starts rendering the first element of text or images from the DOM. #5 FMP (First Meaningful Paint) - State where hero elements are loaded #6 TTI (Time to Interactive) - State ready for use by the user Critical rendering path Initial view and below the fold Initial view is more India Phone Number important to users than below-the-fold, which is invisible when the page first loads. CSSOM: CSS Object Model CSSOM CSSOM is as follows. CSSOM is a map of CSS styles found on a page. It is similar to DOM, but targets CSS instead of HTML.
CSSOM is used in conjunction with DOM to help browsers display web pages. Web browsers use CSSOM for rendering Web browsers use CSSOM for rendering Page loading is performed in the following steps. Web browser examines HTML and builds DOM Web browser examines CSS and builds CSSOM Combining DOM and CSSOM to build a rendering tree web browser displays page By the way, Google doesn't do GET requests for CSS. It is written inline.
|
|