LearnRepeat Academy
LearnRepeat Academy is a blog based on continuous learning, books, and productivity. The design, graphics, and website theme were created from scratch using Adobe XD (prototyping), Adobe Illustrator (featured images and infographics), HTML, CSS, JavaScript, and WordPress.
Right from the start the motive of the website was to replicate parts of an affiliate marketing website. This included adding product review snippets and product comparisons (which could lead to better conversions), combining email sign-up using ConvertKit to connect with other interested readers, integrating Google Analytics, Google Search Console, and Google Tag Manager to understand user behavior to eventually build a website that is SEO optimized. In order to improve SEO, LearnRepeat Academy was optimized using keyword research, schema support, and automatic table of contents for better visibility on SERPs.
The Responsive Custom WordPress Theme
Obviously, this was primarily a learning opportunity which is why I decided to build my own custom theme for the whole website. This gave the website its own personality while being highly customizable to adapt to future changes. Also, in my experience the themes out there never function how you want them to. I wanted a theme that would bend to my will, so I created one.
A heavy theme with too many bells and whistles slows down overall website performance. The idea from the start was to build a minimal and simple theme without burdening the website with too many plugins or scripts. I started by prototyping the layout and the theme in Adobe XD. The theme was later built using WordPress using HTML and CSS. The code was kept DRY with reusable templates across various page types. Additional bits of JavaScript were added to the website later.
Product Review and Comparison Snippets
The product review snippets on this WordPress website was built using PHP, vanilla JavaScript, HTML, and CSS. The snippets can be added to a post using shortcodes.
Schema support is built in automatically with values that are populated dynamically for better SERPs.
The product comparison snippet is an optimized table created using TablePress with additional CSS and JavaScript which is also added to a post using a shortcode.
Custom-made Graphics
Many blogs use royalty-free images they find online to use on their blog. However, this leads to repetition across different blogs. One way to truly make your content stand out is to use your own graphics. This includes your own feature images and also other images like infographics to explain the content better. In the interest of standing out, I will not use an overused quote that quantifies how much a picture is worth in terms of words (see what I did there?).
I use Adobe Illustrator extensively to brush up my Illustrator skills. Besides creating the feature images for each post, I also create infographics and other images to improve content flow and to explain ideas better.
Google Analytics, Search Console, and Tag Manager
Understanding user behavior and search behavior is important to improve existing and future content.
The Google Analytics script tag is quite useful but it can also reduce the loading time of the website. I used the CAOS plugin to load Google Analytics locally which improved loading time.
Caching and Other Optimizations
Even with all the careful considerations above, the website can be further optimized to load faster and improve UX. Page Speed is an important part of SEO and UX. LearnRepeat Academy loads in under 1 second and also uses lazy loading for media to reduce initial page size.
Caching
Caching goes a long way in reducing load time. Instead of requesting data from the server over and over, with caching, a static version of the website is stored. I used CloudFlare to cache LearnRepeat Academy. I also minified HTML, CSS, and JavaScript to improve loading time.
You are reading this on a blog built using Nuxt and Ghost. Nuxt comes with a built-in option to prerender pages which is how you are reading this post. The constant requests to the server are eliminated which also reduces/eliminates costs to maintain a backend.
Lazy Loading Media
Downloading images and videos are a huge time suck especially when the images are not even in the viewing window. Additionally, media files also have meta data which increase the file size. After creating a graphic in illustrator, I remove the meta data and add the stripped down pictures to the posts. The images are lazy loaded using the WPRocket plugin.