When performance problems, poor SEO results, low conversion rates and a poor user experience come together, the signs often point to website relaunch. But this does not always have to be done from 0 to 100.
Before a website relaunch, the following question should always be asked: Does it all have to be thrown away or can something be saved?
Because a complete rebuild is not always necessary. In particular, when internal resources are heavily occupied and there is not enough budget available to rebuild the entire website from 0 to 100, a “rebuild from the inside” can be useful.
In this post we are already discussing which questions should be resolved before a website relaunch and when it makes sense to get external support on board.
In short: There is no perfect procedure, but a relaunch should always adapt to the business situation. There are two options:
- If the website is to be rebuild both technically and in terms of design AND if you have time and budget, it makes sense to throw the old website in the trash and start the new one from scratch. This automatically eliminates legacy issues but during the relaunch phase, there can sometimes be minor stutters in day-to-day business. Problems such as missing redirects, dead links or interruptions in the accessibility of the website may occur. Although these can be absolutely minimized, they usually cannot be completely avoided.
- If the above requirements are not met, a rebuild from within makes sense. This involves gradually rebuilding the old website and publishing interim results directly. This can be an advantage, as high-priority sub-pages can be rebuilt relatively quickly and less important pages are tackled afterwards. This approach usually takes a little longer over the entire duration of the relaunch, but is more resource-efficient and more compatible with day-to-day business.
This article is intended to be about variant 2, as this option is often neglected but has great potential.
Step by step through the rebuild from the inside
1. Preparing the rebuild
Once the decision to rebuild from within has been made, it is important to prepare everything. The first step should be to define the goals against which the success of the rebuild can be measured. Performance goals such as a conversion rate increase or a higher page speed are just as conceivable here as more subjective goals (e.g. giving the website a new look).
Once the goals have been defined, the most important step is to define work packages and prioritize them. Since the rebuild should be carried out step by step, it is clear in which order what will be done after prioritization. A useful prioritization is, for example:
Priority 1: Low Hanging Fruits
By low hanging fruits, we mean optimization options that can be carried out very quickly and without much effort. Since these are quick, it makes sense to do them first and feel the effects of them as you continue working.
Prio 2: Product pages, career pages and blog + blog post
These pages have the biggest impact on most websites and are starting points for many user journeys. For this reason, these pages are edited together in the first package and relaunched first. Another advantage of optimizing pages with lots of traffic first is that they can already go live while other pages are still being rebuilt. The pages are then already working towards the goals, although the relaunch has not yet been completed.
Prio 3: Home and About Us
The homepage of a website is often overrated. Often, the majority of traffic comes from sub-pages and only a fraction of this traffic even reaches the homepage in their journey. Therefore, this and all pages that could be included in “About Us” can easily be deprioritized. Important: Please remember that this is an example. If you get the most traffic from your homepage, it should definitely be rebuild first.
Prio 4: Other pages and legal pages
Depending on the website, there are a variety of other sub-pages. These often contain very specific content that is not relevant to most visitors. For this reason, these pages and legal pages belong to the lowest category.
Of course, in addition to prioritizing page packages, it is also important to prioritize serious errors and assign them to the above work packages. For example, bugs, responsiveness errors and, for example, non-working forms are also extremely important and should be integrated into the rebuild process accordingly.
If there are also pages that should no longer exist after the rebuild (because they are deleted or combined with others), it is also essential to note down the URLs. In this way, correct 301 redirects can be set and there are no dead links.
2. Implementation of the rebuild
Once the rebuild is planned, it is time to implement the individual work packages. As a quick preparation, a backup of the entire page should be created and specifically named. This means that it is always possible to access this status or undo changes at a later point in time.
Once the backup is done, it makes sense in the first step to pick up the low hanging fruits. This step should be repeated again at the end of the rebuild because some potential is only revealed during the process. Low-hanging fruits are:
- Clean up CSS using the clean-up function (Select the style panel in the Webflow Designer and click on the small broom at the top right). This deletes all CSS classes that are still stored in the CSS but are not used at all.
- Delete unused animations (Open Interactions panel and click “Clean Up”). This deletes all animations that are loaded with every page load even though they are no longer in use.
- Compress HTML, CSS, JS. This compresses the code and loads the page faster. Go to /Publishing in Site Settings
- Set unused pages to “no-index”. In this way, pages with old content or serious errors are excluded from the Google index and do not appear in the search. Then activate the automatically generated sitemap (Site Settings/SEO) and transfer it to the Google Search Console. This will improve your chances of being found.
- Set Global Canonical URL. In the same tab as the automatic site map, you can enter the GCURL. This should be the same as your main URL and signals to search engines which URL is the right one. This is how you avoid duplicate content.
- Eliminate unused scripts. If you have integrated external scripts via custom code, now is the time to throw out all scripts that are no longer being used. Because: When in doubt, every script loads external content that has a negative effect on the loading speed of your website.
- Optimize font set. There is a lot of optimization potential in the Site Settings/Fonts tab. First, you should delete all font weights that are not being used at all. In the second step, the font weights that are used should be compressed to the WOFF2 format to maximize the page load speed.
Once the low-hanging fruits have been grazed, the second step is to wireframe the new pages. This step is only necessary if the rebuild is also accompanied by a redesign. If this is not the case, you can proceed directly to step 4. In wireframing the new page is conceptualized and it is defined what the rough layout of the page is. Only in the following third step the whole thing is then designed. Faster iterations save a lot of time in wireframing by keeping the graphical depth of the layout very low. Only when the layout is ready the process moves to the UI/web design phase. In this, the defined layouts are then being designed with pixel accuracy and prepared for development. To avoid surprises and mistakes, it also makes sense to create a mobile design. In this way, nothing is left to chance in the next phase.
In the fourth step one should implement a CSS style guide which is then being used consistently afterwards. Old code can thus be removed step by step and in the end, the website only uses new CSS.
The benefits of a style guide are:
- Consistent styles for all elements
- Clean and therefore faster code
- Easy handling and transfer to devs
There are some Webflow style guides that are really good. In practice the Client-First CSS Style Guide by Finsweet is one of the most advanced ones and is designed for end-users such as you. It is based on an easy-to-understand class system that stands out due to the clear naming of the classes. The Style Guide is freely available as a cloneable and can be used directly as a starting point for the rebuild. If Client First is used in combination with the components of the Relume Library (a component library for Webflow), it makes sense to use the modified form of the Relume Style Guide.
Are all styles included in the style guide, the fifth step is all about implementation in Webflow. Care should be taken to ensure that only the new classes are used in order to get the maximum performance out of the website in the end. Once the pages of a work package have been developed, made responsive and optimized for page speed and SEO, the entire badge of pages can be published.
We always recommend intensive testing of new pages on different devices and browsers. This allows to avoid simple mistakes so that the pages make a great impression right after the relaunch.
As a result of the gradual renewal, the newly published pages are already working for the previously defined goals from this point on and you don't have to wait until everything is ready at once.
3. Post-Optimization
One of the most important things about a website: A website is never finished. Texts should be kept up to date, images should be regularly adapted to the status quo and new content pieces such as blog posts should be published. This is the only way a website remains consistently relevant for visitors and search engines and can bring in new customers.
When the starting point for new content is missing, user feedback is often a goldmine. On the one hand, specific questions from customers or potential customers can be addressed in specific blog posts and, on the other hand, surveys provide good insights into possible optimization options that still exist even after the rebuild.
In addition to continuous development, it is recommended to review the performance of your own site again. If SEO and page speed results are still not satisfactory, here are important Webflow SEO tips for beginners, here SEO tips for advanced users and here Page speed tips for beginners and here for advanced users.