We told you about behind-the-scenes improvements we’re doing to ensure your sites load quickly and rank well on Google.
The optimization process is an offline process that occurs once you publish or republish your site. This process can take up to two minutes, so if you want to run the Lighthouse speed text, wait a couple of minutes after publishing before you do so.
In addition to what we’re doing to speed up your sites, here are some tips on what you can do when you build your sites to ensure that they load as quickly as possible.
Keep the header clean
Content in the header is loaded immediately so it's best to have as little content as possible here, so sites load as quickly as possible.
Add minimal widgets at the top of the page
Widgets that are above the fold are initialized immediately, whereas widgets placed further down the page are loaded on demand. To support a quicker load time, minimize the number of widgets you have above the fold. This enables the site to load more quickly, which is important for keeping visitors engaged.
Place slow-loading widgets lower on the page
Widgets that rely on external scripts (for example, the “Facebook like” widget) have a big impact on site performance. If you include these types of widgets in your sites, place them low on the page.
Generally speaking, use as few widgets as you can
We only load CSS for widgets that are on the page. In the future, we’ll be doing this for JavaScript too. So, choose the widgets you add wisely.
Avoid custom code
There may be cases when you want to use custom code, but if possible, avoid it. If you must use it, use dmApi which has performance optimizations build-in (no <script src=xxx>).
Take advantage of ongoing improvements by republishing your sites
YDA is working on behind the scenes improvements on a continuous basis. This includes:
- Improving critical CSS and removing unused fonts: This has led to a 5% improvement in Lighthouse scores.
- Lazing loading of images below the fold: Images above the fold are fully loaded when a visitor lands on the page; other images are loaded after the page finishes loading, or as they come into view while scrolling.
- Lazing loading of CSS: CSS style sheets now load after the page loads, so the browser can prioritize new styles and determine when they should be loaded.
- Lazy loading of widgets: This is currently in effect for Facebook-based widgets, and will eventually extend to other widgets that rely on external scripts, such as the Map and Twitter widgets.
To make sure that your sites are benefiting from these ongoing updates, republish your sites. It’s an easy and immediate way to speed up your sites.