In previous articles such as mobile, redirects, javascript and site auditing, we've seen that all these themes have something in common: site speed! For all of these themes, if the speed of a site is not optimized, these themes will not work fully. The speed of a website is therefore inherent in all of them, and has a huge impact on Google's organic search results. In this article we're going to look at the essential techniques for having excellent site speed, such as checking images, the DOM, cache and the vital signs of the site
Site Speed
Gzip
Images
Caching
DOM
Web Vitals (page speed)
Core Web Vitals are speed metrics used to measure the user's experience on the site's pages. The metrics measure loading with:
- Largest Contentful Paint (LCP): this should occur within 2.5 seconds of the page starting to load;
- Visual stability with Cumulative Layout Shift (CLS): pages must maintain a CLS of 0.1 or less;
- Interactivity with First Input Delay (FID): pages must have a FID of 100 milliseconds or less.
Think With Google found that a slow load time of up to 5 seconds increases the likelihood of the user giving up on the website by 90%. Core Web Vitals can be viewed in real time, monitored and resolved using PageSpeed Insights or Gtmetrix.
To improve the speed of a page there are a few techniques to be carried out, namely compressing the files sent by the server (Gzip), reducing the size of the images on the page, eliminating superfluous characters from the HTML, CSS and Javascript codes, creating AMPs (mobile) and optimizing the browser's cache.
Images
There is SEO work behind every image, as they can be heavy and slow down the site, web images carry information that will be provided to Google. The file size of an image is decisive for the ranking of the page and the image itself, it must be light. For this you can use some compression tools such as "Optimus", "Tinypng" or Photoshop. The most advanced image formats that maintain quality are JPEG 2000, JPEG XR and WebP. You can use the "WebP Express" or "Optimole" plugins to optimize your images to the desired format in a simpler way in wordpress.
SEOs should also take care to place images of the right size on the site, so that the site doesn't have to redirect. There are also images that are below the fold of the page (they don't appear to the user) that can have their loading delayed, in which case you should use the lazy load feature, via the "Lazy Load" plugin for WordPress. This way, the images are only loaded when the user reaches them.
Gzip
Gzip is a website file compression format. In other words, it reduces the size of the files sent by your server and the transfer time, with compression rates of up to 90% for larger files. This is one of the most efficient measures for reducing page load times. All current browsers are compatible with this format and process compression automatically when the user accesses a site. Some servers do this automatically, but if not, there are several WordPress caching plugins that enable Gzip compression. One of them is "WP Fastest Cache", which shows a simple checkbox with everything you can configure, including Gzip compression.
Website caching
A website cache is a temporary storage system designed to make websites run faster. It works by saving static files in your local computer's memory. This reduces the number of requests sent to the internet server containing the actual files. Thus, by caching elements such as HTML, CSS, JS and images, the browser drastically reduces loading times and resource usage. Clearing the browser's cache removes all the data held in temporary storage.
As a result, after accessing a website for the first time after clearing the cache, it will take longer for the site itself or the page to load. In addition, outdated resources in the cache can cause you to see incorrect content. For example, you may have trouble seeing new changes or updates made to a site or page. Therefore, clearing your browser's cache from time to time can help avoid these setbacks.
Minifique o HTML, CSS, Javacript
Utilizando o cache como solução para minificar os códigos HTML, CSS e Javascript, estes retiram o código que não interessa, isto é, eliminam quebras de linha, espaços em branco e comentários. Existem plugins gratuitos para isso no wordpress: “W3 Total Cache” e “Autoptimize”. Se trabalhar com um site feito apenas em programação terá de verificar as páginas manualmente. Também terá de eliminar recursos que impedem a renderização do site, o CSS e o Javascript atrasam o HTML para entregar ao utilizador as páginas interativas. Para resolver isso, pode determinar que os recursos Javascript e CSS carreguem de forma assincrona, isto pode ser feito através dos plugins: “Async Javascript” e “Speed Booster Pack”.
DOM
Dom stands for "Document Object Model" and is the structure of objects that the browser generates every time it loads a page. It's a hierarchical structure in which there are different objects that depend on each other, there's the main object that then branches off to other more secondary objects, like a flowchart. DOM represents the HTML structure of the page made up of a series of tags. The DOM affects the performance of a page if it is excessive, as it includes HTML elements that are not visible the first time the user loads the page, which increases data consumption and slows down loading. If it is excessive, execution performance also decreases, as users and scripts interact with a page, the browser continually recalculates the position and style of the html tags, and so may need more memory to process the pages.
So that the DOM doesn't negatively affect the pages on your site, you should remove all unnecessary HTML elements from it:
- Google recommends that when developing a site, pages should contain less than 1,500 DOM nodes, the design of the pages should not be too complex, contain too much scroll or have too many images and heavy.
· Para reduzir o DOM no wordpress têm de segmentar as páginas grandes em várias páginas (menos scroll) e se tiver muito conteúdo diferente como formulários, postagens, produtos, etc, é melhor classificar todos esses elementos em páginas diferentes e vinculá-las através de um menu de navegação. Pode e deve ativar o plugin de carregamento lento, por exemplo: “WP-Rocket” ou “Lazy Load”. Também é essencial limitar o número de posts ou produtos por página, 10 é o razoável.
· Remova itens desnecessários que estão no tema padrão do wordpress ou wix, como o botão “adicionar ao carrinho”, “data da publicação”, “informações do autor”, etc.
· Use temas de páginas bem codificados como o “Astra” ou o “GeneratePress”, aqui dê atenção as tags <div>, para que não sejam muitas, pode usar soluções como o “Oxygen Builders”.
· Utilize ferramentas como o “HotJAr”, que permite ver o que os utilizadores estão a usar e o que não está a funcionar no seu site para eles.
Conclusion
Site speed is extremely important for an SEO professional because it impacts the whole site, and if it's faulty, it will affect the whole site's performance and traffic. Without a working site speed, search engines won't crawl or index your site properly in search engines.
Nowadays, many companies need immediate results, but the truth is that they can't afford to implement SEO internally while leveraging the priority focus of their business. If you still can't manage these steps or don't have the time to put them into practice, Bringlink SEO will make sure you get the visibility and brand growth you deserve.
Talk to us, send an email to bringlinkseo@gmail.com.
ReferENCES
Fandangoseio - https://www.fandangoseo.com/blog/dom-size/