Optimization and Loading Speed
TO RISE IN GOOGLE SEARCHES AND KEEP INTERNET INTERNET INTERESTED, YOUR WORDPRESS SITE NEEDS TO LOAD FASTER
The speed of a web page has become an essential requirement for a web positioning and therefore for SEO optimization, especially mobile web speed on Google.
It is not enough to have excellent texts. For this reason, we leave you a brief guide on how to improve it.
The key to having a fast website is to limit the number of files that are downloaded (requests), in addition to their weight.
It is also important to maintain a good internal structure of the DOM, both in the use of the different HTML tags and in the number of nodes and sublevels.
Is Your Website Fast?
Checking if our website is fast is very easy thanks to a large number of tools at our disposal:
● PageSpeed Insights
● Gtmetrix
● Pingdom
● webpagetest
In the case of PageSpeed, it can be very demanding and in recent times, it is constantly changing, and its results can vary quite a bit.
Once the point of origin has been determined, what do we do to optimize our website?
Choose the right topic
It is of the utmost importance to choose a light theme. Each WordPress theme, in addition to adding fantastic design and structure options, will define the minimum number of files that a website will need, in addition to its internal structure.
This is very important because WordPress tends to use heavy libraries and especially HTML layouts with lots of nodes.
We highly recommend Astra. Generate Press and Neve are not bad options either. If you require a visual builder, Divi may still be the perfect recommendation, but it will inevitably make the website heavier and with the Gutenberg builder, built-in with WordPress, the use of these tools is less necessary.
Plugins, less is more
When we have a website, it is easy to be tempted to add endless functions in the form of WordPress plugins, the truth is that the less we have, the better.
Why limit the number of plugins?
Each plugin adds a series of CSS and JavaScript files to our website, adding more weight and requests.
As if that were not enough, they increase the chances of suffering incompatibilities or security attacks, since each plugin, like each theme that we have on our server, even if it is not active, is another door through which to enter.
The ideal would be to have no more than 10 or 11.
Which plugins to choose?
The idea is to find light plugins and at the same time, they are capable of covering several functions, avoiding depending on several more.
Depending on the type of website, it may always be advisable to have a plugin for cookies, forms, and, above all, optimization and caching.
It is also necessary to check that these plugins receive constant updates to avoid incompatibilities and security flaws.
These are the plugins that we recommend from Yogeta:
➔ Mapplic: Allows you to customize maps.
➔ WP Rocket: The most complete web optimization tool.
➔ Yoast SEO: Without a doubt the best plugin to improve SEO
➔ WPForms: To be able to create forms.
Web Archives
Once you have chosen a good theme and an acceptable number of plugins, the next step is to supply all the code as best as possible, one of the most important steps for web optimization. The main points are:
● Compress and unify as much as possible, the Javascript and CSS code. Here lies the importance of having light elements. We must avoid the total of each one weighing more than 200kb, if possible.
● Create a critical CSS, which is preloaded before the rest of the elements.
● Preload the fonts and any other resources that we use in the viewport (the part that we see of the web when we access it). With this, we will improve our First Contentful Paint.
● Activate and configure the cache, to speed up access to a website when it has been accessed previously.
Unfortunately, applying many of these changes correctly is not easy, and our website can generate many errors.
That is why we recommend applying the changes one by one and checking if our website continues to work correctly in incognito mode, to prevent the cache from hiding any errors.
It will not always be possible to compress and unify all the CSS and JavaScript code, especially if our website has a large number of elements.
Text Fonts
Another important point that should not be forgotten is the number of sources, as well as the weight of each one. It is advisable not to have more than 5 or 6 text fonts and styles.
The format used is usually WOFF2, but the use of variable fonts has also recently become popular, which are those that do not have a single defined style (bold, light, regular), but rather allow their thickness to be modified according to our needs.
Allowing multiple styles without the need to load multiple styles or heavy fonts. It is recommended to avoid OTF or TTF formats, as they are uncompressed formats.
Another option is to use the Google Fonts repository. In this case, it will be necessary to make a connection to reduce time, in addition to only loading the styles that we use.
Several plugins will allow us to do this preloading, as is the case with WP Rocket or Host Google Fonts Locally.
Images and Videos
The images that accompany our website should not be numerous, especially in the case of the home page, since if our website is an eCommerce, it will be inevitable that there will be a large number of them on some of the pages.
In weight, it is preferable that they do not exceed 100kb each, like Yogeta’s advanced wordpress hosting makes it easier.
Choose a Good Format
The options are multiple and not all formats are the best for each occasion:
➔ JPG: It is perfect for images with blurred backgrounds or without much detail.
➔ PNG: Gives very good results only with small images with transparency.
➔ PNG-8: It is perfect for logos and clip art, where flat colors and text abound.
➔ SVG: It is the format par excellence, maximum quality. It is animatable, and with almost no weight in general.
➔ Webp: It is the new format promoted by Google. It gives excellent results on images with quite a bit of detail, although it is generally better than JPG. It also supports transparency and animations.
➔ AVIF: Allows even better results than with Webp but is still poorly supported.
And how to further optimize the use of images?
Many optimization plugins have the option to activate Lazy load, which allows you to dilute the loading of images as they are required and not all at once.
Here the biggest enemies will be the use of images as background and sliders, which generally load all images as background, preventing lazy loading.
We also recommend Imagify, a plugin that allows you to optimize images and convert them to Webp format automatically.
If you don’t want to go through all of this, with Yogeta WordPress Hosting & you’ll get the advanced image compression system
What About the Videos?
In this case, our recommendation is to launch them from a platform like YouTube, to save space on the server.
If it is necessary to upload to the server, we will have to choose one that preferably has the smallest possible size, duration, and weight.
Most of the websites are seen from mobile, where we do not require a high resolution, in addition, mobile users hate videos because they quickly consume their data download.
Optimize the Web Server
It is useless to have the lightest web if it is supplied from a slow or poorly located server. Here it is essential to have a suitable server, which can supply us with the correct power to load our website.
Location is important. Although the internet seems omnipresent to us, the truth is that it still has some limitations and delays, especially when there are great distances.
The speed of your website will not be the same if the server is also hosted in a nearby country, as if it is in the American continent.
Another option that may be recommended according to our needs is the use of CDN, to serve our website and content quickly. Ideal when our target audience can be in different parts of the globe.
It will also be necessary to have various options that we can activate to further improve web speed, such as enabling GZIP compression or the HTTP/2 protocol.
Other Essential Recommendations
Having a design that is as clean as possible, without depending on a large number of images with high resolution or a number of animations, can be highly recommended, in addition to surely improving the UX (User experience) of our website.
