This is a experimental project, which is about getting a 512K version of the Blogpocket.com website, with light pages. Below, we describe the steps to achieve a super performance-optimized WordPress site with light pages and the mechanism to automatically clone posts without affecting the SEO of the original site.
You can see the site in operation at: 512k.blogpocket.com
Of course, what really matters is how to create a minimalist and lightweight website, performance optimized (WPO), secure and legally prepared; and of course, ready to work no matter what purpose you want to give it.
1. Creation of the subdomain
The first thing is to create the 512K.blogpocket.com subdomain in our GreenGeeks account. To do this, go to cPanel > Domains > Domains. [More info] Note that subdomain creation will likely be done within domain creation directly.
2. Creation of the SSL certificate
The certificate is required for the website to work under the HTTPS protocol. Let’s Encrypt is a free certificate that is very easy to obtain at GreenGesk. Always perform this task before creating FTP accounts associated with the domain (main or additional) or subdomain and installing WordPress. To do this, go to the main control panel of your GreenGeeks account and click on Security. [More info] Keep in mind that the creation of SSLs for additional domains and subdomains has probably been unified. The free SSL certificate is installed automatically by default.
3. WordPress instalation
To install WordPress you just have to go to the corresponding section of cPanel (Softwaer > WordPress Management by GreenGeeks), fill out a form with the main data and the system will do the rest. That way, you will have a WordPress ready to use, with one of the default themes active, and two plugins ready to be configured: Loginizer (basic security) and LiteSpeed Cache (performance optimization). You will have another plugin installed but not activated: Akismet (anti spam). [More info]
4. General settings
There are a few settings that need to be made from the WordPress admin. [More info] You must study whether you want your website to be crawled by search engines or not.
5. Search engine tracking
If you want to hide your site from search engines, go to Settings > Reading Settings and activate the option “Ask search engines not to index this site.” But it is up to the search engines to accept that request or not. So the best thing, if you want to hide your site from search engines, is to make sure that all your pages have the following instructions:
<meta name='robots' content='noindex, nofollow' />You also have the option when creating your new site on GreenGeeks or you can consider installing the plugin Yoast SEO, Preparation for SEO is carried out using this plugin. This plugin includes an SEO writing assistant and the automatic generation of the sitemap.xml file (information for Google about the content of your website). [More info]
You can also do it through the robots.txt file There are tools to create the robots.txt file (information for Google about what should be indexed) but the most useful and quickest thing is to create it manually within the “public_html” folder (or the corresponding to your subdomain or addon domain) using the File Manager. [More info]
6. Akismet Configuration
The three plugins that you will have prepared, ready to configure, after installing WordPress are Loginizer, LiteSpeed Cache and Akismet. Loginizer serves to protect access to the login page against brute force attacks. It is a temporary security measure while you start the project and install a more complete plugin like Wordfence. LiteSpeed Cache is the plugin corresponding to the GreenGeeks caching system (LiteSpeed) – we will see it later – and Akismet will help you combat spam in comments. To activate the latter you must obtain an API key on the Akismet page. Akismet is the traditional WordPress solution to combat spam in your blog comments. The plugin must be installed, activated and configured even if you do not implement the WordPress comment system. [More info]
7. Wordfence
Wordfence is one of the quintessential security plugins in WordPress and this lesson explains how to configure it. First, we will remove and delete the Loginizer plugin. [More info]
8. Wordfence Extended Firewall
Wordfence has a firewall (extended firewall) that needs to be enabled once the plugin is installed and active. Wordfence Extended Firewall is an excellent plugin to complete intrusion protection for a WordPress installation. [More info]
9. LiteSpeed Cache plugin configuration
To optimize website performance you must configure the LiteSpeed Cache plugin. On an initial WordPress website (a site empty of content, with only the default theme and the starter plugins – Lite Speed, Wordfence and Akismet -) the optimization level can reach 100%. [More info] The series of presets can be applied directly by going to LiteSpeed Cache > Presets and choosing the “Advanced” preset (recommended).
10. Site Editor: Replace Blog Home Page with Home Page
The “Home” template displays the home page of your site, whether it is configured to show the latest posts or is a static page. The home page template takes priority over all templates. In the Twenty-Twenty Four theme, the “Home Page” template is not created, the “Blog Home” template is displayed by default. In order to customize the home to our liking, we must first create the template, in the site editor, “Home Page”.
11. Customizing the “Home Page” Template
What we want is to show the latest blog posts on the home page – in a super minimalist way – so we will add a spartan query loop (as spartan as possible) along with the Header and Footer template parts. We will also reduce these template parts as much as possible.
12. Customization of the rest of the templates (individual entries, etc.)
The rest of the templates are customized in the same way, maintaining the same header and footer (template parts).
13. Font change
To reduce the weight of the pages as much as possible, it is essential to use one of the system’s standard fonts, such as System Sans Serif. This will depend on the active theme. But using the plugin Create Block Theme It is possible to manage the font library in order to eliminate all those that are not used. This way we will reduce the weight in KBs of the pages. In future versions of WordPress (we are now in 6.4) this function of managing the font library will come native in the core.
14. Serve images in WebP format
The premise for having a WordPress website with a weight of less than 512KB is not to use images. If we have margin, we could use them as long as we optimize them and serve them in the latest generation WebP format. We can easily do this by installing the plugin Converter for Media. We will see that if you want to import content from a feed, the images will have the link to the original ones, so it will be on the original site where they must be served in WebP format. This will unload the site where the content is imported.
15. Legal issues: Adapt GDPR and Complianz (cookie banner)
In principle, we are not going to implement a statistics system, so the cookie banner will only be necessary if we show videos, since there will be no other third-party resources. To implement this, we will use the Complianz plugin and in order to develop legal documents, the Adapta GDPR plugin.
The first step to legally adapt your website is to generate the legal documents: Legal Notice, Privacy Policy and Cookies Policy. Regardless of whether said legal adaptation is reviewed by an expert in Internet laws and data privacy, the Adapta GDPR plugin generally solves the problem well and is frequently updated. [More info]
Loading cookies without the user expressing explicit consent violates the GDPR. In addition, you must notify your users of the existence of non-necessary cookies, save consents and establish a simple mechanism to modify preferences. There is a resource that does all of this automatically, including detecting cookies that are loaded on your website. [More info]
An adjustment needs to be made, at the CSS level, to the Complianz button that remains when you click “Save Preferences”. To do this, we will go to the site edition > Styles > 3 vertical ellipses > Additional CSS and paste the following code:
cmplz-manage-consent::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "Cookies";
display: inline-block;
vertical-align: middle;
margin-left: 1px;
color: white; /* change color if needed */
}
#cmplz-manage-consent .cmplz-manage-consent {
bottom: 5%!important;
right: 4%important;
height: 6%!important;
width: auto!important;
border-radius: 0%!important;
color: #333!important;
background: #333!important;
padding: 15px 15px 15px 15px!important;
min-width:unset!important;
}16. Automatically import content from Blogpocket.com feed
Finally, we will use the plugin WPeMatico to import the content from the Blogpocket.com feed (or feeds).
We will create two campaigns, one for the normal feed and one for the feed with the podcast posts. And we will configure them for a daily execution of our own cron, leaving the titles with the links to the copy site and the internal links (no follow) to the pages of the original site.
Entries will be published directly to preserve time and date; but they will be susceptible to editing in order to eliminate widgets and elements that are unnecessary and irrelevant. Thus achieving better performance and even lower page weight.
Final thoughts
The key points to get a site with pages of less than 512 KBs in WordPress are:
- Minimalist theme (cf. Twenty-Twenty Four)
- “Advanced” configuration of the LiteSpeed Cache plugin.
- Leave system fonts, removing Google Fonts.
- Install and activate only essential plugins.
- Images optimized to the maximum or WebP format.
- Minimize the use of widgets and third-party resources as much as possible. For example, Google statistics, social media buttons, etc.
Below are screenshots of the Digital Beacon and GTmetrix measurement tools, the home page and the first imported post.
Leave a Reply