Render first. JS second.
Let me start with the takeaway point: The key to creating a fast user experience in today’s web sites is to render the page as quickly as possible. To achieve this JavaScript loading and execution has to be deferred. I’m in the middle of several big projects so my blogging rate is down. But I got an email today about asynchronous JavaScript loading and execution. It took me months to research and write the “Loading Scripts Without Blocking” chapter from Even Faster Web Sites. The downside is – although web sites are doing a better job of downloading scripts without blocking, once those scripts arrive their execution still blocks the page from rendering. My #1 goal right now is to figure out ways that web sites can defer all JavaScript execution until after the page has rendered. JavaScript execution is too complex People point out that: “JavaScript is a powerful language and developers use it in weird, unexpected ways. the page content is actually generated by JS execution
Optimize Start Render Time - web page optimization of start rendering times
The start render time is the moment something first displays on the user's screen. The web page goes from a blank white screen and changes. It doesn't necessarily have to be content; a logo, or text, it could be a colored background or a search box. Human-computer interaction (HCI) guidelines recommend a 1-2 second start render time. Giving the user visual feedback that something is happening behind the screens shows the users that the site is responsive. The average web page has grown inexorably as bandwidth has increased.
Reduce the size of the above-the-fold content - PageSpeed Insights
This rule triggers when PageSpeed Insights detects that additional network round trips are required to render the above the fold content of the page. Overview If the amount of data required exceeds the initial congestion window (typically 14.6kB compressed), it will require additional round trips between your server and the user’s browser. Recommendations To make pages load faster, limit the size of the data (HTML markup, images, CSS, JavaScript) that is needed to render the above-the-fold content of your page. Structure your HTML to load the critical, above-the-fold content first Load the main content of your page first. Consider the following examples of how a site could be restructured to load faster: If your HTML loads third-party widgets before it loads the main content, change the order to load the main content first. Reduce the amount of data used by your resources
Page Loading and Rendering Optimizations
For an online shopping business of any size, time is quite literally money. For eBay, a delay of milliseconds is enough to make the difference between a purchase and a dissatisfied customer who abandoned a page that didn’t load as quickly as desired. Multiply that experience by eBay’s 100 million-plus active users, and you can see how even short delays can have significant financial impacts. In this blog post, I present some of the techniques that we use to optimize the presentation stack for the eBay Marketplaces web site. Measuring Above-the-Fold Time (AFT) AFT is the time that elapses between the first and the last pixel change in the part of the browser window that you see without scrolling. Here is JavaScript code you can use to calculate AFT, assuming that the first six images display above the fold. We’re using this technique to measure and optimize the AFT. Page rendering So many factors influence page rendering. JavaScript Treat CSS like a king and JavaScript like a slave. Images
Google says its latest PageSpeed modules help render pages up to 2x faster, particularly on mobile devices
As part of its mission to speed up the Web, Google today announced the latest beta versions of its mod_pagespeed and ngx_pagespeed modules add new optimizations that result in a big performance bump. The company says it is seeing pages rendering up to 2x faster, particularly on mobile devices. The jump comes thanks to new PageSpeed optimizations (the first two) and existing PageSpeed optimizations (the last two): prioritize_critical_css finds the CSS rules that are used to initially render your page.The critical image beacon identifies the images that appear on screen when your page is first rendered and uses this to guide lazyload_images and inline_preview_images.defer_javascript prevents scripts from running until the page has loaded.convert_jpeg_to_webp reduces the size of images that are downloaded by webp-capable browsers. Google has a test that shows you the improvement in real-time: As for ngx_pagespeed, install from the latest source and enable these filters in your configuration:
PageSpeed & above-the-fold JS render blocking? optimization help please for slow loading site. - Realmac Community Forums
A place for customers to chat about Realmac and its products - RapidWeaver, Clear and Ember! here's my google pagespeed analysis (also in image below): anyone have a moment to provide any insights into actions i might take to get this site loading faster? i've got a lot left to do, but i'm trying to build a template to make sure it works efficiently before i start concentrating on the actual content. is it too much to have the cycler slider inside the exposer stack in the middle of the page? i also have the entire site published twice into a responsive show/hide stack...one for mobile and one for web. could that cause issues? my site thanks!
Above-the-fold time (AFT): Useful, but not yet a substitute for user-centric analysis
It was great to see above-the-fold time (AFT) on the agenda at yesterday’s Velocity Online. It’s been pretty widely acknowledged, here and on other blogs, that load time and doc complete time don’t fully cut it as measurement numbers. Our industry needs a user-centered approach to measuring page performance, one that tells site owners when visitors are able to see and interact with a significant amount of page content. AFT is a promising concept. Coming up with a universal algorithm for such a nuanced measurement — an algorithm that can be applied to any site to consistently and accurately measure performance — is a gargantuan undertaking. Defining “Above the Fold” In yesterday’s session on above-the-fold time, led by Google’s Jake Brutlag, AFT was defined as the moment when content “above the fold” (aka “what you see in your browser window”) stops changing and reaches its final state. Put in its simplest terms, WebPagetest’s AFT algorithm performs the following calculations:
How to remove render-blocking javascripts
Above the fold means what a user sees initially on their screen. That screen might be a phone, ipad, desktop or whatever the user is using to see your webpage. This practice has long been used by people who are into pagespeed, but is new to the vast majority of webmasters and designers and can be a bit confusing, and may even seem impossible to do. Its not only possible, it is also required to be good web citizen and even if you you don't care about users with slow connections, you do care about your ranking in Google. Your ranking in Google is at risk if you don't optimize for this. Specifically, if Google sees that your webpage does not load well for certain devices (phones, ipads, etc.) they won't include you in the results because Google doesn't want to send users to slow pages or pages that cause the user to wait too long for the content. How to identify render-blocking javascripts You need to know what your page is loading. How to remove render-blocking javascripts True solution
