free consultation
From this article you will learn what affects the loading speed of a website. How to optimize Wordpress and slim down from unnecessary lines of code and plugins. How images, database for Wordpress should be optimized to make the loading speed satisfactory for the user and for the new Google Core Web Vitals algorithm.
Spis treści:
A website's load time is one of the first elements of a website that a user perceives. Even the best designed and functional website will be of no use if the viewer, discouraged by the long loading time, simply leaves.
It's worth taking at least a few basic steps that you can do on your own to feel the difference on speed and for websites made on Wordpress to perform much better in analytics tests.
Conversion decline and website optimization
A decrease in conversions will be noted for mobile devices and will be felt indirectly on Google's organic search results if the page takes too long to load.
In order for a user to find our site at all, it must be ranked high enough in Google search results. Correct optimization, ensuring that the site loads and runs quickly, is also important here, since page loading speed is one of the criteria for calculating search engine rankings. Therefore, when creating and managing a site, we should pay great attention to its speed.
The time that elapses from typing in a page URL or clicking a link to displaying the finished page to the user can be measured by several key indicators.
They are:
We provide care and administration of your website in convenient and flexible hourly packages.
More about wordpress care service
There are different possibilities of writing / coding / the same graphic design. You can make a wordpress template readable with a minimal amount of JavaScript and CSS code, and there may be too much of it (often in ready-made templates), which overtaxes the way the page reads and renders.
In addition to the HTML code of the site itself, an important part of the site is all the static resources that are linked. On a typical site, these include CSS style sheets, webfont files and JavaScript scripts.
Resources blocking rendering
The file types listed above are render-blocking resources. If these resources are too large, they cause the DOM tree to load longer, resulting in slow page display.
See Wordpress website development, implemented at our digital agency.
In this article, we will focus on the technical side of doing template coding for Wordpress.
Important. Before the planned work, it is a good idea to make a backup of the site and wordpress in advance.
Before we start optimizing and trying to speed up the site, we need to identify the factors that have the greatest impact on its slow loading. When analyzing a completed site or a site that needs to be optimized, the first thing to do is to check it with analytics programs to see how the HTML coding was done and the Wordpress implementation itself.
The most important, for SEO reasons, website testing tool. It shows both the aggregate score for mobile and desktop devices, as well as individual component parameters, along with information on which ones need improvement. The results of the google tool have a direct impact on SEO ranking, so it makes sense to focus on the highest possible score.
It shows key tips that will make it easier to eliminate the biggest factors contributing to a slow loading site. It also allows you to analyze the so-called waterfall, which is a graph of how individual resources load over time, which can be helpful in finding those that may be taking too long to load.
It allows us to evaluate the DNS speed and TTFB value from different locations around the world, which can be useful, especially when we target our site to audiences in different countries.
Allows you to accurately analyze the order and loading speed of all resources requested by the site, along with a breakdown of the components of these times. It also allows you to quickly catch oversized image files, scripts and styles, as well as emulate different Internet speeds (such as 3G or slow LTE). The Performance tab also displays all Web Vitals indicators with information on whether their values are normal or too high. For advanced users, there are also features such as "Coverage," which allows you to find unused CSS and JavaScript code.
If our only task is to manage the content itself from wordpress, we can affect the page load time in the following ways:
That is, wordpress optimization with a plugin.
What is the best plugin for wordpress optimization?
One of the most popular plugins used for caching and broadly optimizing Wordpress is W3 Total Cache. W3C speeds up your site by generating static files instead of dynamically created content fetched from the database, which dramatically reduces page load time.
Due to the number of features it offers, its first configuration can be problematic for new users. The most important settings to configure are described below:
General tab allows you to quickly enable and disable modules configured in other tabs.
Bookmark Page Cache - Here we can change advanced settings and conditions for the page cache:
Bookmark Browser Cache
Leave the other options on the other tabs as they are set by default.
After changing each option, it is a good idea to check the correct operation of the site in another browser, where we are not logged into wordpress. You can also wait a while and check the effect of the changed settings on the speed of the site and Google PageSpeed or GTMetrix results.
If you're creating your own Wordpress template from scratch (and we usually implement this solution), it's a good idea to keep in mind a few best practices to reduce page load time.
Remember that JS scripts should be loaded in the footer of the page, so as not to block the loading of the page content. We should load scripts in Wordpress using the built-in function wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false ), for which we should specify in the last argument that the script should be loaded before the closing </body> tag.
When creating extended pages, it can be a good idea to divide CSS and JS files into modules corresponding to individual subpages. In conjunction with page templates, we can then use conditional statements, for example, loading the resources responsible for the contact sub-page only on it:
wp_enqueue_style(‘common’);
wp_enqueue_script(‘common’);
if( is_page_template(‘contact.php’) ){
wp_enqueue_style(‘contact’);
wp_enqueue_script(‘contact’;
}
The same principle can be used to disable unnecessary loading of styles and scripts provided by plugins. For example, if we know that the only page where contact-form-7 will be embedded is the "Contact Us" template, we can opt out of loading the resources of this plugin on other pages:
if( ! is_page_template(‘contact.php’) ){
wp_dequeue_style(‘contact-form-7’);
wp_dequeue_script(‘contact-form-7’);
}
However, we should remember to thoroughly test the site after such procedures, as it happens that selective removal of resources of a particular plugin can cause JavaScript errors.
Separating out the styles responsible for the sections visible immediately upon entering the page and loading them immediately, inline, using the <style> tag in the <head> section can improve the FCP / LCP metrics described in the first part of the article. Once these key elements are loaded, the rest of the styles can be loaded later, using lazy-load. This approach, however, requires a good layout of the CSS structure at the beginning of its creation, so that extracting these styles themselves is as seamless as possible.
As with CSS sheets, lazy-loading can result in significant savings when it comes to first page load time. When using this method, images will be recharged as the user scrolls through the page, not taking up time and resources as soon as the site opens. However, remember not to use it for banners placed at the top of the site, as any delay in their loading will worsen FCP / LCP times.
For loading images added by the administrator in the content of Wordpress posts, we can use the following script, which will automatically set the attributes under the lazy-load plugin:
// Lazy Load
function prepare_lazyload_src($attr) {
$attr['data-src'] = $attr['src'];
$attr['src'] = '';
$attr['class'] .= ' lazyload';
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'prepare_lazyload_src');
If we know that the main recipients of our site will be visiting it, for example, from Poland, it is worthwhile when choosing a server also to be guided by its physical location. The distance between the computer from which the queries are sent and the server serving them does not have a big impact on the speed of data transfer, but the large number of hops through which the packets must pass can cause delays perceptible by the user.
In the event that we don't have the option of choosing a server with a convenient location or we want the site to run quickly regardless of where it is loaded from, we can consider using a so-called CDN (content delivery network). Such systems consist of an extensive network of servers scattered around the world, which store copies of static files loaded by our site. When a request is made to a server, the CDN system sends back the requested resources from the point closest to the user, significantly reducing latency.
Until now, in the HTTP 1.1 protocol, each requested resource was loaded using a separate request to the server. This caused a significant part of the time needed to load the page to be used just for handling these requests, and the files themselves could not be downloaded simultaneously.
This approach changed with the introduction of the HTTP/2 standard, in which the browser establishes only one connection to the server - this is maintained until the page is closed, and resources are loaded simultaneously, usually with a single request.
source: https://blog.cloudflare.com/http-2-for-web-developers/
If our provider allows it, we should definitely enable HTTP/2 support on the server. In this case, we should also abandon plug-ins that combine CSS sheets and JS scripts into aggregate files, because such an operation not only will no longer bring any benefit, but may even do harm - in the case of a minor change in, for example, a CSS sheet, the browser will only download for itself a new version of the changed file, and load the rest from the cache. If the files were merged, we would have to reload all the styles required by the site from scratch.
Regardless of the protocol used on our server, it is a good idea to implement proper caching support in the browser. This will result in the browser not having to fetch resources from the server when visiting the site again, but will load them from its own local cache. For example, for the Apache server, you can add the following directives in the .htaccess file:
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
# Video
ExpiresByType video/webm "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
# Fonts
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType application/font-woff "access plus 1 year"
# CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
# Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>
In case there is a need to force an update of some file, you can always use an additional parameter specifying its version.
An example of using such parameters for loading script, style and image might look like the following:
wp_enqueue_script('main', get_template_directory_uri() . '/js/app.js', array('jquery'), filemtime( get_template_directory() . '/js/app.js' ), true);
// automatic version update based on file modification date
wp_enqueue_style('main', get_template_directory_uri() . '/css/main.css', array(), filemtime( get_template_directory() . '/css/main.css' ), 'all');
// automatic version update based on file modification date
<img src=”<?php echo get_template_directory_uri();?>/assets/img/logo.png?v=2.0”>
There are many methods to improve the loading speed and performance of wordpress pages, and we should tailor each of them to our specific case, type of site and server configuration. However, speed is one of the most important criteria for how a site is perceived by both the user and SEO algorithms. Let's remember to regularly test the health of our site and perform wordpress database optimization work.
If we want the user to open our site efficiently and navigate through it, it is worth taking care to choose solutions that will not put too much load on the server and browser. See how to design a site on Wordpress.
Instead of choosing a template with a multipurpose option, i.e. one that gives you the ability to configure multiple layouts and layouts for the main page and subpages, let's choose a simpler theme that doesn't give you that choice, and thus doesn't come with too much JS and CSS code.
It is often difficult or not as feasible as a dedicated implementation made under specific design and functional assumptions. Usually ready-made solutions are based on builders such as Divi, Elementor. They provide great opportunities, but at the expense of the quality of the code, which must be prepared for all possibilities, hence there is often simply too much of it, and the actual amount used is 30-40%.
Speed optimization and the number of database queries and code overloaded with various types of shortcodes loading the relevant elements into sections is sometimes so large that it is technically impossible to optimize this solution.
Often plug-ins used in a ready-made Wordpress template do not have active licenses, making it impossible to update them. Failure to update often leads after time to the site being hacked or becoming infected.
The way the functions and operations are implemented may be less intuitive or cumbersome to actively run the site.
See also WordPress - what it is. Guide and description of the panel
That is, how to take and optimize photos in Wordpress ? How Wordpress handles image handling mechanisms and how to prepare images for Wordpress.
WordPress comes with one collection / directory / for managing files and graphics, which is accessible from the side menu under the name 'media'. This is where all media files like images, videos, mp3s, pdfs are stored. The library allows you to manage, edit or delete files from all over wordpress.
It also allows you to edit the alt description and title of the photo, and the 'Edit Image' button allows you to perform basic simple transformations like cropping, rotating, mirroring or scaling the original image. This type of photo editing can be done from within the added photo to the post by right-clicking on it and selecting the edit option from the pop-up menu.
WordPress automatically converts uploaded images to particular defined sizes. Therefore, if you upload large photos, there is no need for additional formatting into smaller sizes (if you do not want dedicated graphics under resolutions such as: 480px)
Wordpress has several basic formats for generating images from a base photo. These sizes are generated during automatic photo processing and depend on your media library settings. The variant of the photo that will be used in the post depends on the option selected when adding the photo to the post, which can of course be changed when editing the photo.
Image formats in wordpress - thumbnail, medium, large
The sizes of each version of the photo can be adjusted in the "Media Settings" tab. More advanced users can also make their own sizes by creating new markings using the add_image_size() function;
Image formats jpg and png
The proper format of the photo on the website is important. The available and popular formats are jpg and png. However, each has its own use and is subject to optimization.
PNG format
Used in graphics as a non-background. Ideal for presenting content where it is difficult to establish a uniform background.
JPEG format
Basic format for photos and classic graphics that can be further compressed reducing the weight
If you do not know whether to embed a given graphic in png and or jpg format, decide on the format that ultimately has less weight.
Webp format
A format developed by Google to further reduce the weight of an image while maintaining maximum quality. In version 5.8, Wordpress also just supports the WebP format.
In case of uploading photos to wordpress library above the weight of 1-2mb, it is a good idea to shrink them beforehand to, for example, 1920px width as they will be automatically reformatted to the set wordpress dimensions. The uploaded photo will only take up space on the server.
When adding photos of high weight but already in the target size to an entry or, for example, to a banner, it is worth considering compressing them in advance with external programs such as: compressor.io giving great results when compressing jpg formats but also png.
That is, dynamically retargeting images as you scroll the page.
Lazy-load functionality for images causes them to load dynamically. The whole process is designed to speed up page loading without having to load all the graphics across the page below the first scroll. This greatly optimizes the resources needed to show the page to the user and gives the page better performance in analytics tools.
Digital Agency Hauerpower
Copyrights 2010-2022
