In a situation like the current one where users and Google prioritize the loading speed of web pages, you can not ignore this aspect. To do this you must optimize your website, also known as WPO, and ensure that it is the best possible for both users and Google. But how to achieve it?
In April of last year, the 1st edition of Pro Marketing Day was held, a digital marketing event organized by Aula CM, in which both experts from the digital field and practical cases with companies from the attendees were able to enjoy presentations. .
In this case, Ernesto G. Bustamante and Roberto Ortega, both professors of Aula CM, spoke to us about the importance of optimizing web pages or consultant email list. To do this, they used the optimization of the Aula CM website as an example and how they optimized those of three other companies Magic Events Madrid, Casa Jardín Oriental and Marketin.tv.
Here is the video of the presentation:
9 34What is the WPO and why should it be done?
We can define the WPO as the optimization of the web page oriented to the improvement of load times. What you are looking for is to reduce the time it takes the website to show all of its content to users and therefore improve their experience.
Why should you optimize your web page?
User experience: You have to offer users quick and fluid pages that allow you to browse the web looking for what you want to be as fast as possible, because if the page takes time to load, the user leaves.
SEO Positioning: Google takes into account, and increasingly, the loading speed of web pages and, in addition, the content to rank the web in better or worse position.
Optimizing your website will help you improve #SEO and your users’ experience
Click To Tweet
Web positioningWPO practical cases
The paper is based mainly on 4 practical cases of web optimization. On the one hand we have the case study of Classroom CM and on the other hand there are the optimizations of the other three companies that participated in the congress.
The tool used to know the status of web pages was GT Metrix, which is a professional tool, very useful to do WPO, based on the insights of Google Page Speed and Yahoo’s YSlow. With it you can obtain data such as the load time of the web page, the weight of it and the requests. In addition, evaluate the web page saying where the errors are so you can correct them and have the web optimized.
Optimization of images
Images can weigh the optimization of a web page by increasing the weight of the web. This optimization can be done directly when editing the photo in programs such as Photoshop, using pages such as Tinypng or plugins such as WP Smush in the case of having CMS as WordPress.
In the case of the optimization of the CM classroom website, the ImgOptimizer tool is used. This tool is typical of Web Hosting Company where Aula CM has hosted the web. This tool is very useful, since it makes a great optimization of the images.
Merge images with sprites
In the case of CM Classroom, the page has a megamenu and for each service there was a different icon. This caused the web to have a large number of requests to the server, which slowed down the load.
To solve it, all the icons in a png image were combined through a sprite. And then thanks to the use of CSS code the image was put as background and for each icon a scroll was added, also with CSS, so that it will be displayed correctly.
Thanks to this the page happened to have a request for each icon to make only one request, since all the icons had been grouped.
WPO – how to optimize a web page
Leverage Browser Caching: Cache URLs
Caching means saving a static copy of the web on the server that will serve the users so that they do not have to consult the database.
If the URLs to be cached are internal, you can use plugins such as WP Rocket or W3 Total Cache.
The difficulty lies in when these URLs are external, in order to optimize the web page you have to follow the following steps:
In the case of CM Classroom, the URLs that needed to be cached came from Analytics and Facebook Events, so we opted to upload the Analytics and FBEvents code locally in the hosting.
Then a script was created that executes a scheduled task every 4 hours and updated versions of the Analytics and FBEvents scripts are saved in a directory.
Finally, the header.php was edited and the URLs of both codes were changed to load from local.
In this way it was possible to improve the WPO of both the loading speed and the YSlow.Scaled images
Sometimes, images are used in smaller sizes than those with the image uploaded to the web. This as a result makes the page weigh more than you need and therefore it will be necessary to perform an optimization of the web or WPO.
You can use plugins like:
SVG Support: you can choose to use an SVG format in your images, which will make it weigh less even than PNG, and the images have an infinite quality.
Regenerate Thumbnails: With this plugin you can make a resizing of the images to a size that we fix. For the web to use the given size, you must use code.
Defer Parsing of Javascript
This happens when a large number of Javascript requests that block the fluency of the page are being made in the header of the website.
To optimize the Defer Parsing you can reduce the number of javascript files that are on the web, this way you get fewer calls. Two good plugins to eliminate this problem are:
The asynchronous load will make the files load in parallel, the files will be loaded when we need them
To perform the asynchronous loading of the web, we can use plugins such as:
Remove Query Strings
They refer to dynamic URLs that are created in some files and that can slow down the loading of the web page.
It can be solved with the Remove Query Strings or WP Rocket plugin.
You can also solve this problem through the code:
Lazy Loading – Lazy load
It consists in uploading the images of the web page in a progressive way, loading only the ones that the user sees.
To solve this problem you can use plugins such as:
Server cache
It consists in making a caching of the server. In this case it was done through the Magic Caché tool of Web Empresa, which reduced the loading time and improved the First Byte.
The First Byte is the time it takes for your server to serve the first byte of the web page
WPO – optimization of the CM Classroom page
Remove Query Strings
The easiest option would be to install the Remove Query Strings plugin and the problem is solved. But we wanted to improve even more, that’s why Speed Booster Pack was installed. With this last plugin it was achieved:
Resolved Query strings problem
Lazy load was added to the resources.
And finally a script was made to the footer, which means downloading the script to the footer.
Minify CSS and JS
CSS and JS files may contain blank spaces or page breaks. These are elements that we must optimize to improve the web. For this you can use two plugins that have a similar result:
Better WordPress minify
JS & CSS Script Optimizer
With these plugins what is achieved is to combine all the CSS and JS files in such a way that only one file of each is left.
Map of Google Maps
The Google Maps element generates many requests, so it is advisable not to have this map on the landings page.
To avoid these requests you can change the Google Maps element for a map capture. With this change, the requests made by the maps are avoided and the visual section is maintained.Studio 3: Oriental Garden House
Change of hosting
Having a good hosting can help improve the loading speed of a web page, since it does not need so much response time. In this case, changing from hosting to Web Company and loading speed improved by 1 second.
W3 Total Cache Plugin
It is a configurable plugin with which to cache the pages and get a great optimization of the web or WPO.
In this case the configurations of:
Page cache
Object cache
Database cache
Browser cache
This plugin must be configured little by little to see what effects it has and if it affects the performance of the web in a positive way or if we have any problems.
WPO – optimize web page
Studio 4: Marketin.Tv
Optimization of images
In this case the main problem of the web were the images and their optimizations. To solve it, plugins like ImgOptimizer or WP Smush have been used.
WPO – optimize web page
Conclusions
This paper aimed to teach what is the WPO and how to optimize a web page. Finally Ernesto G. Bustamante gave a checklist of things to take into account to optimize a web page:
Always optimize your images before uploading them to the web.
Use the correct size of the images, do not upload 1000 × 1000 images if you are going to use a smaller size.
Cache everything you can, with plugins like WP Rocket or W3 Caché to increase web performance.
Combines and minimizes files, reduces the amount of files within the web.
Reduce request requests using Lazy Loading.
It uses asynchronous loads and improves the performance of the web.
Take as many calls as possible from the header to the footer so as not to slow down the loads.
Use a quality hosting, having a good hosting is important.
Optimize and analyze your website constantly, do not let much time go by.
Are you one of those who are constantly optimizing your website or have you forgotten it? Do you know any other WPO technique?
Do you want to attend PRO Marketing DAY?
final promarketingday logos-07If you could not attend the meeting held in April 2017, be careful because we return with more papers, more practical exercises in real time and more online marketing strategies.
