When we talk about web development then we cannot leave out WordPress which is one of the most widely used content management systems (CMS) by more than 60 million websites across the globe. Our team works extensively on the WordPress platform and have the expertise to build websites operating at scale.
The problem
Here, we want to share our experience in one of our projects with a client. This client operates in the media industry and came to us with the website which had loads of content and features but it was marred with many issues. Some of the primary concerns were slow page load speeds, the website use to crash as soon as the traffic increased a bit and the overall design language of the website.
We took a structured approach in resolving all issues faced by the client and we want to share the same with you so that you could plan your next website or optimize your existing high traffic site using some insights.
Our approach
Choosing the right theme
We found that the existing design of the website failed to utilize the full functionality of the theme in use, leading to redundancy of code. Our experts worked closely with the client, to ensure that the requirements are well understood and that the design addresses them to the T.
Brand styles, business priorities, vision and ambitions, audience and geographies, personal likes and dislikes were discussed at length, and translated into wireframes and photoshop designs that scored approvals! What followed was a website that was loved by our client and their clients alike!
Some of the advantages of having a custom wordpress theme are given below.
- When we create a custom theme then we include only that functionality which is required unlike a premium wordpress theme in which they are trying to give you every feature that a user would want and thus resulting in the site slowing down.
- A custom theme is more customizable according to the business needs and easy to update as well. This also makes it more scalable whenever the need be and in our case this was an issue that was bothering the client a lot.
Another important aspect of purchasing a theme is the support. A good question to ask yourself is what kind of support I can expect when I paid $ 30 to $50. When you engage an IT company what you get is dedicated resources providing ongoing support. Comes at a cost, which is worth it, when the business evolves and the stakes are higher!
Number of plugins
When we first had a look at the WordPress backend of the existing site we saw that they were using 78 plugins. Surprised, we dug deeper to find that almost every feature was using a plugin. This is not a good practice at all as all it means that you end up using more plugins.
So, what did we do? We made a matrix of the plugins and highlighted them into categories and the action to be taken for each category – essential plugins, Dormant plugins and plugins that could easily be replaced by custom code
In our brainstorming sessions we found a couple of plugins which were using a lot of server
resources to execute. We used tools and plugins to analyze the server and database performance and researched which queries were taking maximum time to execute.
- Multilingual Plugin: This plugin was using a lot of system resources. The solution that we opted for was having the main website in English and creating subdomains for the other languages. Voila!
- History Plugin: This plugin was being used to maintain the history/log of most important events. As there were many users working on the admin panel generating content on a daily basis so this plugin was making the database size bigger each passing day.
We also removed the existing cache plugin which was causing issues and replaced it WP Fastest Cache.
We also identified the plugins for which we could create custom code so that we could further reduce the number of plugins being used on the website.
- Auto scroll plugin: This plugin was used to load content when the user scrolls down. We created custom functionality for the same.
- Ads plugin:
- Category post list
What did we achieve? We reduced the number of plugins being used from 75 to 25!
Correcting page load issues
While our development team was identifying and tackling the backend issues, our design team was working on the UI part of the site. As we were completely redesigning the website we had several detailed discussions with the client. Once we had clarity on the design we made sure that the UI was clean and organized and that the navigation of the website was intuitive. Since this was a content-heavy website, we made sure that we were not showcasing everything everywhere just for the sake of displaying the content. We found interesting ways of serving the content smartly and timely.
We followed the best practices for implementing CSS and HTML. Some of the important pointers that we always follow in our projects are given below.
- Avoid using inline styles
- Load JavaScript at the end of the body
- Using proper naming conventions
- Organizing the stylesheets
- Minifying CSS files
- Using comments properly
- Reduce DOM size so as to reduce TTFB, render time and memory usage
We used various tools to make sure that our page load speeds were optimum. We always use a few tools to make sure that we were on the right track. These tools are Google PageSpeed Insights, Gtmetrix and Pingdom.
Optimizing the images
Another important area where the site had issues was the use of unoptimized images. In today’s times images are used extensively in a website. Also the images used are clean and have good aesthetic value. This means that the size of the images will be bigger. Hence if a site is using a lot of images, like in case of our client’s website, it would definitely affect the page load speeds. Hence we make sure that we use optimized images in the sites.
- Used the Tiny Png plugin to optimize all the images and also advised the client to do the same whenever uploading images.
Using caching and CDN’s
Caching helps in improving the page load times by saving some of the static files on the user’s device for a specified period of time. The earlier cache plugin being used was not helping to improve the site performance. We tried different plugins and at last found to give us the best results.
Content Delivery Networks (CDN) help in delivering the site’s content from a server nearest to the user. Using caching along with CDN really helps in optimizing the site.
Value created for the client
It has now been around 3 years since we have been maintaining the website on a regular basis. Our team is in constant communication with the client to update the site and also to create new functionality and features in the website.
- The number of daily users on the site has gone up from 5,000 to 45,000, without compromising on page load speed.
- The server resources being used by the client has decreased even though the website content and user-base have increased.
- Improved site stability. In the past 3 years the site has not crashed even once.
- The page load speeds of the site have increased tremendously across devices.
- The admin and the backend section which is used by several users for updating content has also become much more responsive.
It has been a win-win situation for the client as well as the Excelgens team. Our team was not only able to solve the existing issues of the client but was also able to implement the vision of the client in a way which has resulted in more user engagement and hence increased revenue generation.