Data provided by https://gtmetrix.com
Putting up a website using content management systems (CMS) like WordPress is a breeze since almost everything is already set up for you. For starters, you have themes that you can select as a starting point so you won’t have to create a website from scratch and plug-ins that you can install in order to make content creation convenient and add additional functions to your website such as site visit tracking analytics, migration tools, etc…
After completing the content that I would like to show for my website, all I need to do was to point my domain name to the WordPress installation directory so that the content I created will be available for all to see.
Typing my domain name (https://louisechan.ca) to display my website in a web browser worked but I noticed one glaring problem. The website load time is really slow even to the point of occasionally timing out. At best, the home page will load within 4 seconds but for a webpage that does not contain extensive graphics, the load time is still too slow compared to other webpages with similar content size.
After searching the web and my hosting provider‘s support page, I found out that using WordPress appears to introduce load time issues with my host provider’s server due to it being inefficient and insecure (see discussion here and here). The support team recommended two options:
- Create a new website using a different CMS (e.g. Joomla)
- Convert WordPress website into static webpages
In my case, I don’t want to recreate my website content using another CMS so I chose the second option and converted my WP site into static web pages. Fortunately, WordPress has a plug-in suited for this task called Simply Static Plugin and using this plug-in is quick and easy as detailed in this article.
I’m planning to serve my static web pages at my root location of my domain name so the default settings of the plug-in will work for me.
Default settings of the Simply Static plug-in
After downloading the zip archive that contain web pages generated by the plug-in, I uploaded and extracted the zip archive to the public html folder of my host provider account and extracted its contents within the folder. Typing in my domain name in the web browser will allow my host provider to serve these web pages.
Red rectangles show missing functions on the converted static home web page
The conversion worked quite well and the static web pages are now loading much faster compared to the original WordPress dynamic web pages except for two issues that I noticed while testing the optimized web pages:
- The social media icons located right on top of the recent posts window of the home page are now missing!
- Clicking the ‘Home’ menu item from other web pages (Blog, Portfolio, Education, etc…) to return to the home page won’t work.
After looking into the generated static web pages, I noticed that the reason why the social media icons in the home page are not displayed is due to my plug-in not copying the assets that are used for the WordPress theme that I was using for the web page. A simple copy-paste operation of the files and folders used by the website theme is all that is needed to be performed fix this issue. This can be done by going into my host provider account’s cPanel page and launching the File Manager utility so that I can perform the copy and paste operation of the website theme folder from the WordPress installation folder’s theme directory (i.e. <WordPress-installation-folder>/wp-content/themes/<theme-folder-to-copy>) to the public_html folder of my host provider’s account.
The website’s theme folder (wp-indigo) is copied into the themes folder of the generated files.
As for the second issue, I need to look into the generated static web pages to determine why the ‘Home’ page link is not functional. Looking into one of the static pages that shows the Home link (i.e. /blog/index.html), I found out that the plug-in was not able to properly generate an ‘href’ link for the Home menu link.
Highlighted in red is the reason why the Home page link won’t work
To fix this issue, each of the static web pages that will contain the Home menu link must be updated so that the enclosing <a> tag for the Home link must also contain an href attribute that will point to the root directory of the domain name. This can be achieved by editing each html file containing the Home menu link so that the html file will now contain the following code:
<a href="/">Home</a>This change can be applied to all affected files the painful way (opening and editing each affected file from within the public_html folder) or can be applied the less painful way by using a text editor’s ‘search and replace in files’ function in the local copy of the generated files and replacing each instance of <a>Home</a> to <a href=”/”>Home</a>.
After applying these changes, clicking on the Home menu link in each of the static web pages will now redirect back to the Home web page.
Optimized website with fixes applied
The animated gif image shows the optimized Home page with the social media links now visible and working as well as a Home menu link that is now functional for all static web pages.
The results of using the Simply Static plug-in to generate static web pages for different WordPress sites may vary depending on the WordPress version installed or the contents of the website itself. I have read that other users are able to convert their WordPress pages to static web pages without mentioning any issues. But in case you would encounter similar problems that I have observed in my use case, I hope the workarounds that I have mentioned in this post will be able to help you fix them.
Update #1: As of Oct. 4, 2021, I’ve already migrated my website to a different host provider and noticed that my WordPress web pages are now able to load at reasonable speeds. Hmmm… this makes me think that the page load issues I was encountering before might be due to how my past host provider is configuring their server (which I have no control on) and may not be related to the WordPress installation at all. With this recent development, the contents of this post will not apply to my website anymore but will serve as a reference to those would wish to convert their WordPress pages into static web pages.
Update #2: Since my website will now be able to serve dynamic WordPress content, certain features such as the “Leave a comment” section of my posts are now re-enabled.