Redesigning the New Layout of TheMaverickSpirit
We were unaware of many facts when we designed our website just like any other blogger.
In our first design, we used a slider, plugins for subscriber’s form, contact form, mega menu and everything else that was necessary.
Everything was working perfectly, but with time we came to realize speed and performance issues.
The problem was not in the layout or theme, but in the add-ons, we have used to increase our website’s performance. Eventually, they decreased it.
Haha.. Irony! Isn’t it?
I know it’s pretty unusual to change the website layout for the one who has not yet completed a year of blogging!
But we did it!
Eventually, I’ve pretty strong points to justify our decision but before discussing that let’s begin with a little recap of the older version –
Table of Contents
Recap of the Old Layout of TheMaverickSpirit
Here you will find all the elements and plugins that we had in the previous version of TMS along with the reasons for having them.
1. Slider on the homepage
We wanted our layout to be user interactive instead of a static dead template. That’s why we decided to include a slider in a layout unlike other bloggers to feature the latest blog post released.
2. Simple, neat and clean blog layout
No animations were placed on the site. We decided to do this in order to improve website loading speed and avoid additional JavaScript and CSS codes.
Coz doing so made Google load these files which stops loading the layout and hence effects the user experience too.
3. Background Image on the footer (a rare thing for a blog to use)
The background image on the footer made the widgets, headings, and text more visible and attractive.
Somewhere, it was not good as stated in image optimization for seo post.
4. Used various plugins that performed multiple responsibilities
- Contact Form 7
- MailChimp
- Max Mega Menu
- SocialWarfare social sharing WordPress plugin
- WP Smush
- ShortPixel Image Optimizer
- Animations in blog
- Background Image in the breadcrumb section
- Banners in the sidebar and after the post
..and much more.
What’s New In The Maverick Version 2
Here, you will find five categories under which we have added and removed certain elements from the old layout of TheMaverickSpirit.
We did this to provide better user experience, minimum website loading speed and to have fewer performance issues.
1. Brand Asset Decision – A Logo (Finally)
We always wanted to include an animal in our logo and ended up with a panda (duh…).
We attempted a number of revisions for a meaningful logo which can convey our way of thinking but nothing satisfied us.The logo was good! Although as you can see in the image there was no visibility of the brand name written on the board held by panda.
We reanalyzed and finally got inspiration for our logo. A logo that reflects the fire we have inside us to do something big no matter how many times we get down we learn from our mistakes and rises back!! 🙂
The Maverick Spirit with a Phoenix.
2. Performance Improvement Decisions
Website’s speed and performance was the major reason that forced us to redesign and rebuild the website.
We felt we could make a lot of improvements regarding speed and performance. Over the past months, we have researched and analyzed a lot of scenarios about the website’s speed and performance.
This research has shown that we’ve not yet implemented 100% of website optimization.
Till date, we have made some decent improvement which increased our Google Page Insights score from –
- 48% to 77% on Desktop
- & 46% to 64% on Mobile
1. A Slider Free Layout
We’ve dropped slider because of the following reasons –
- It was slowing down the site by loading extra CSS and JS file.
- It had no value for SEO.
- Low conversion rate.
- Users were skipping valuable content as it sounded like advertisements to users.
- It was confusing users, because of throwing multiple posts at once.
2. Cut Down All The Plugin Strings
- MailChimp
- Max Mega Menu
- Social Warfare
- WP Smush
- ShortPixel Image Optimizer
We have removed all these plugins from our new layout as they were making –
- Site Slow –
Almost every plugin was loading its own CSS & JS file which was increasing the HTTP requests and slowing down the website speed. - Risk Of Getting Hacked –
Sometimes plugin’s code has bugs which make it vulnerable and hackers get the chance to hack your website. Wherein there is no fault of yours!
3. Reduced HTTP Requests
For those who aren’t aware of –
What is HTTP Request? Browser sends a request for each CSS, JS and image file (included in the HTML of the page) in order to display or use them. Server responds for every request with the appropriate result.
This process is done by HTTP protocol and the request is known as an HTTP request.
Why we’ve reduced HTTP requests in order to increase site’s speed?
- The answer is pretty simple,
..More CSS, JS, and images you have, the more time it will take to load your website.
- So if you want your website to load faster, reduce the number of HTTP requests!
How I Reduced HTTP Requests?
- Removed plugins as they are adding their CSS and JS files.
- Removed MailChimp and wrote code for the subscribers form along with the MailChimp API integration.
- Removed Max Mega Menu and hardcoded the menu.
- Removed Pinterest JS and wrote code for displaying button on content images.
- Combined all the CSS into one to make a single request for all the styles.
- Combined all the JS into one to make a single request for all the scripts.
4. Pinterest Button On Images Without Plugin
We have used 2 methods for PinIt button on images in our old layout –
- We used a plugin that added an extra JS code that made website slow.
- We included JS provided by Pinterest, but again the extra JS problem occurred.
So in the new layout, we’ve hard-coded the Pinterest button that eliminated extra JS code or extra file inclusion.
5. HTML, CSS & JS Minified
First let’s clear out –
What is Minification? The process of removing redundant or unnecessary data without affecting its functionality is generally known as minification.
When you minify any HTML, CSS or JS file, it will remove unused code, comments and formatting etc.
What Are The Benefits Of Minification?
- Minification reduces the file size by removing unwanted elements like commented code etc.
- When a browser requests the file from the server, it takes less time to fetch the file when compared to unminimized file.
- Hence, site loads faster in the user’s browser.
6. Reduced Site’s Loading Time –
Different things that we have done to reduce site’s loading time include –
- Minified HTML, CSS & JS files
- Caching
- Removed indirect callings of Google Font which ultimately saved time
- Optimized Images
- Fixed Render blocking CSS & JS Files
7. CSS & JS Render Blocking –
What is Render Blocking? Each WordPress theme and plugin adds its own CSS & JS files. When a website loads in the browser, it has to load each and every CSS & JS before loading rest of the HTML.
The browser has to wait until the server responds with all the CSS & JS files. These CSS & JS files (because of which HTML loading halts) are considered as render blocking CSS & JS.
How we have fixed render blocking of CSS & JS!
- We’ve opted separate process for each of them. Made every JS deferred,
..i.e. each JS file will be loaded after the HTML loading completes.
- On the other end, we only loaded a part of CSS which is necessary for the rendering of the page in the head section.
..rest of the CSS was made to load after complete HTML loaded.
8. Google Font Calling Improved –
If your WordPress theme is using Google Fonts, then it surely is calling/requesting it from the Google Fonts Directory/CDN (which is an open source directory of about 800+ web fonts).
- I’ve used Roboto & Open Sans in The Maverick Spirit theme..
..It does make an external request to fonts.googleapis.com.
- Fonts.googleapis.com further makes an external request to fonts.gstatic.com to fetch the WOFF version of fonts..
..that means I was calling new request just to fetch fonts.
- So I added the content of fonts.googleapis.com directly into my CSS to reduce the requests.
3. SEO Improvement Decisions
1. Scheme.org Integrated
What is Schema? A schema is a type of microdata that makes it easier for search engines to parse and interpret the information on your web pages more effectively so they can serve relevant results to users based on search queries.
- Schema.org is the collaborative initiative by Google, Bing, Yandex, and Yahoo in order to..
..create a common data vocabulary on the web.
It makes easier for search engines to understand the content of the web page and serving more significant results according to the user’s search query.
- We’ve integrated schema.org in our new layout which improved our SEO.
2. Srcset Added For Images
WordPress introduced responsive image support by adding srcset & sizes attributes to the image tag in WordPress version 4.4.
You can read more about Responsive images in WordPress 4.4.
- Srcset automatically creates images uploaded to the media library..
..Default sizes for srcset are 300w, 768w & 1024w.
But What’s The Benefit Of Using SRCSET Anyway?
Browsers can now choose which version of the image to download according to the screen size and landscape, while rest images will be ignored.
It increases loading speed by choosing appropriate image.
3. Improved Heading Hierarchy –
Heading Structure plays a very crucial role in the SEO of a web page. It helps search engine to understand significant parts of a web page.
Every page has its own heading structure. And every web page should follow some heading hierarchy rules.
We’ve improved our heading hierarchy in each page and prioritize our significant content for search engines to achieve better SEO.
4. Monetization Decisions
1. Deals & Discount Section
We are dealing with many services specialized in different niches to get an awesome offers, discounts, coupon codes and much more just for our site users. 🙂
In order to save your money we have seaparated out the deals and discounts into a dedicated category. In this category, you will find amazing deals from various services.
Things are further categorized to give ease of access to pick your best deals!
5. Design Decisions
Designing the website structure took a lot of efforts! Our main focus was to provide a neat and clean design that is easy to navigate, locate our services, feature our strong points, our story and much more.
1. Why We Chose Sectional Layout?
Sectional layout (also known as grid layout) is the important decisions we made for our new design.
We’ve opted sectional layout because of the following reasons –
- To make content to be more scannable, by creating dedicated sections.
- Kept all the highlights in front of the user whether its categories, blogs, services or deals.
- Provides flexibility in case of any changes. Say if in future we planned to integrate something else, we just have to add another section to the layout.
- It made design simple and easy to navigate for the user.
- We’ve increased the user interactivity.
2. New & Effective Widgets –
- Categories
- Services
- Subscriber Form
We have created new and effective widgets that will increase conversion rates.
3. New Header
We always wanted to keep a banner and a search bar in our header section but never found enough space in the old layout.
But now we’ve designed the header in such a way that it has everything a marketing platform should showcase.
- A banner space
- Search box
- Menu items
4. A Brand New About Page
A more creative and clean about page which now highlights our –
- Main motive behind the launch of TheMaverickSpirit,
- Our struggle story,
- What working in a corporate world taught us,
- Capabilities we have to fulfill not only ours but also of those who are struggling somewhere inspite of having the spirit to do something great!
and much more. Read out Ankita’s, Mayank’s story behind the launch of our website.
5. Inclusion Of Service and Archive Pages
We were having these pages before but under wrong names and bad layout. Well, we have got them under correct names and right layout.
Head out and scan them yourself –
6. Related Post Added
To make related content visible to our audiences we sticked them at the end of the blog post.
Doing so helps our users to discover more amazing tips, tricks, guides, services or tools they were browsing for!
7. Author Avatar In Blog’s Author Meta
When a person clicks on the author name he get redirected to a page where all the post written by that specific author appears.
Well, in case if anyone wants to connect with that author he can easily follow him via social profiles displayed on top of the page.
Conclusion
So these are the things we have optimized for our new layout of TheMaverickSpirit.
With time we will keep tweaking the things on our website to know what works best and what not! We will update this post time to time to present our A/B testing results with the site.
If you need any custom codes made by us, then contact us!
Does your website need a new and optimized layout that could grab more and more people to your service? Let us know in the comments below or check out the services we offer that suit your needs.
We will get back to you with appropriate solutions. 🙂
