Welcome to the Ultimate Performance Guide for Static and WordPress websites. There are several points to consider when building static or WordPress websites. This performance guide focuses on using the FLATsite engine to export WordPress websites to static websites. Using FLATsite will make your work tonnes lighter.
Let’s get started!
Understanding your Hosting Server
First thing’s first, how does the user see the content on the page? By simply using the browser, the user requests the URL of the page and receives the content.
You might utilize a hosting company that sets up DNS and has access to multiple locations for the server location. This means that clients or users must have an internet connection. Location is also a necessary consideration because latency rises as the user is far away from the website which he requests.
A perfect solution for this is hosting a brand at the center of your location. Enjoy lower hosting costs, and be sure that your page will be highly available from anywhere in the world.
Server configuration
If you use shared hosting, from time to time you may realize the page is loading slowly. If you would like to have high availability you must consider scaling up to a VPS or even a dedicated server with preconfigured settings. The solution to this problem is the cache, however, the issue may occur because of the heavy load on the server.
Web server, Apache, Nginx, and Microsoft IIS, are the most popular web servers. The version of a server you use matters. The newer the version the faster it is because it gets updated. You can update your WordPress to benefit from security and performance patches. This has a huge impact on serving static content or using WordPress.
Configuration of the web server matters also. Additionally, caching is an option that should be enabled. It compresses the content of files sent by the webserver. It can save a lot of Kbytes. It is a configuration of a web server, unfortunately, you may not be able to turn it on. If this is the case, how about asking your hosting provider? If not, you can do it by using a web interface such as Cpanel or Plesk
Focus on Frontend
HTML, CSS, and JS, are not programming languages but are still considered while people are building their pages or using resources from 3rd parties.
First, a bit of explanation before we dive in:
Each page is presented as a frame with a primary thread that manages the paths for users to complete their displays on their websites. Therefore, when a client makes a request on google.com, he gets all data from the server, then sets up all handlers -> parse HTML -> restyle styling -> setup layout -> display user their websites.
As you can see, there are some points to be considered and problems that might occur.
Let’s stick with HTML
- If the content on the website is too big it can be divided into sub-pages or load only content when needed, using Lazy loading.
- Regarding images, formats, and size, there are various optimization websites or plugins you can use. It would be safer to optimize each image yourself rather than allowing a feature to do the job for you.
- Use only HTML5 standards syntax.
- Too much depth of DOM, if this happens it’s not a big problem but if it occurs and is getting bigger by adding a single image on a page you should consider using another theme or site builder. The reason behind this is that it might generate an overwhelming amount of HTML elements which will block parse HTML and render time.
- Compress the text, if you already have a configuration on your server you do not need to worry about that.
CSS
CSS versions allow us to save restyle time, however, we must use the right styles in the right situations. Sometimes the modern theme and site builders use an old-fashioned approach which yields bad results.
Before using any Theme or site builder you must read about the performance of the theme or site builder to make sure it is suitable for your website. This is especially important for static content because you have more flexibility.
If you’re building your website and you want to stick with the theme and site builder you need to find places where you can cut out some pieces that may result in an error.
This is because the single CSS file is on all pages.
Always use a minified version of the external code and minify them if they are yours.
Javascript (Where Execution Matters)
The misuse of a Javascript code may cause a block of an interface, resulting in downtime of loading or even crashing the current page that the user is viewing. The majority of the time errors come from javascript code.
If possible, always use a minified version of the library or script.
To minify, you can look for popular libraries or frameworks. To build your own minified version of the script you can use the Webpack tool.
Because parsing and executing scripts takes time, you may find yourself relying on 3rd-party code that has been tested and minified.
Let’s Wrap it Up
We hope this performance guide was informative and inciteful. At FLATsite we are passionate about our clients and the experiences that we can create for them. Whether it’s building and managing your Static and WordPress websites or providing security and maximum performance for your websites we’ve got you covered! Start FLATsite’s premium plan and get the ultimate performance booster for your WordPress sites. Take the first step, book a consultation to talk with an expert plus get a free FLATsite tour.
