Web Performance in the Software Development Life Cycle

TL;DR #

Integrate performance considerations at every phase of the SDLC: from initial planning and design to development and post-launch. Addressing performance early ensures a smoother, faster, and more efficient application, preventing costly fixes later on.

What is the SDLC? #

The Software Development Life Cycle (SDLC) is a process used by software developers to design, develop, test, and deploy high-quality software. It provides a structured approach to software development, ensuring all aspects of a project are addressed systematically. The purpose of using an SDLC is to improve the development process, enhance product quality, and reduce project risks and costs. The main phases of the SDLC are Planning, Design, Development, Testing, Deployment, and Post-Launch.

×

Software Development Life Cycle Stages

Planning Phase: laying the foundation #

Performance starts at the very beginning. During the planning phase, we need to:

• Investigate competitors: Analyse competitors' sites to understand industry standards and user expectations. This helps set performance benchmarks.
• Define performance goals: Establish clear, measurable performance goals that align with business objectives. For example, should we aim to pass the Core Web Vitals assessment? Do we aim to get the add-to-cart button visible within a certain time frame? These goals can all have a significant effect on design decisions.
• Choose the right platform: Selecting the appropriate platform is crucial. Decide on the frameworks to use and whether the application will be a Single Page Application (SPA) or a Multi-Page Application (MPA). These choices can significantly impact performance. Too often, framework choices are based on developer experience rather than the goals users have on your website. It's important that the platform aligns with user needs and objectives.
• Re-platforming considerations: If re-platforming, gather insights on the current platform. How fast is it? What are the current performance goals? Do we need to revise them?

Setting clear performance goals and understanding the competitive landscape at the planning stage ensures that all subsequent phases are aligned with these targets. It prevents last-minute surprises and ensures that performance is a key consideration from the very start.

Design phase: shaping user experience #

Design decisions significantly impact performance. In this phase, it’s crucial to:

• Design decisions: Select fonts, images, and videos with care. Engage in discussions with designers to explain the performance impacts of their design choices. Strive to find a balance between visual quality and load times, ensuring that the design elements do not compromise the website's performance.
• Prioritise simplicity: Avoid overly complex designs that can slow down loading times. Aim for a clean, efficient layout.
• Design with performance in mind: The performance goals set during the planning phase should influence design choices, ensuring that elements like key buttons and interactive features load quickly. As highlighted in Lara Hogan's book, Designing for Performance, "Design should not only look good but also load fast, balancing aesthetics with speed."
• Animations: Use animations judiciously, as they can impact performance. Ensure they are lightweight and enhance user experience without slowing down the site.

Design choices made early on can have lasting effects on performance. By focusing on performance during the design phase, you can avoid costly redesigns later and ensure that the user experience remains smooth and responsive.

Implementation phase: building for speed #

During development, performance optimisation should be a continuous process:

• Write efficient code: Developers should focus on writing clean, efficient code. This includes minimising the use of heavy libraries and frameworks.
• Implement best practices: Use best-practices like lazy loading, compression, caching, and minification to improve performance.
• Use the platform: Leverage new APIs available in browsers to replace heavy libraries, such as those for popovers, tooltips, carousels and other UI components.
• Regular testing: Perform regular performance testing to identify and address issues early. Integrate these tests into the build pipeline so developers receive notifications when performance regresses after adding new features. This proactive approach ensures that performance remains a priority throughout the development process, allowing for timely fixes and maintaining optimal performance as the application evolves. Regular testing helps catch potential issues before they impact the user experience.

Addressing performance during development ensures that the code is optimised from the start, reducing the need for major overhauls later. Continuous testing and use of platform-native solutions can significantly enhance application speed and responsiveness.

Testing Phase: catching issues early #

Testing isn't just about functionality. Performance testing is equally crucial:

• Synthetic tests: Setup synthetic testing to assess your site's performance on various devices and network conditions. This helps identify potential issues and optimize for a wider range of user experiences.
• Real User Monitoring: Use real user data to understand performance in real-world conditions. This can be tricky because staging environments often lack sufficient traffic. To mitigate this, consider setting up A/B testing where a specific number of users are directed to the new platform. This approach allows you to gather valuable performance data in real-world scenarios while minimising risk and ensuring a smoother transition.

Early identification of performance issues allows for timely fixes before they become major problems. This phase ensures that the application can handle real-world usage scenarios and maintain optimal performance under stress.

Deployment phase: ready for launch #

Before going live, double-check performance:

• Final Testing: Conduct a thorough performance review, addressing any last-minute issues. One solution is to implement a phased rollout, gradually releasing changes to a small percentage of users to monitor performance before a full-scale launch. This approach helps gather real-world data while minimising risk.
• Optimise Server Configuration: Ensure the server is configured for optimal performance, including proper scaling and load balancing. Make sure caching, compression, and other performance-enhancing techniques are working effectively. This setup helps reduce load times, handle traffic efficiently, and improve overall user experience. Proper server configuration is crucial to maintain the speed and reliability of your application, especially under varying traffic conditions.

Ensuring everything is optimised and tested before launch prevents performance issues from affecting users. Proper server configuration and final checks guarantee that the application can handle the anticipated load and provide a seamless experience from day one.

Maintenance phase: continuous improvement #

Even after launch, performance should remain a priority:

• Monitor performance: Use both Real User Monitoring & Synthetic testing to track performance in real-time.
• Gather feedback: Collect user feedback to identify and fix performance issues.
• Regular updates: Continuously update and optimise the website to maintain and improve performance. Regularly review and adjust performance budgets, focusing on areas such as load times, responsiveness, and visual stability. By identifying and targeting specific areas for improvement, you can ensure the site remains fast, providing a superior user experience even as new features, content and 3rd party tools are added.

Ongoing monitoring and optimisation ensure that the website continues to perform well as user expectations and technologies evolve. Regular updates and feedback loops help maintain a high-quality user experience and address any issues promptly.

Our experience: a common pitfall #

From our experience, We often get consulted when a site goes live or is just launched and performance issues become apparent. This is far too late in the process. By this stage, fixing performance problems can be costly and time-consuming. It’s much more effective to address performance throughout the SDLC. This proactive approach not only saves time and resources but also ensures a smoother, faster, and more reliable application from the get-go.

Conclusion #

Performance should never be an afterthought. By integrating performance considerations throughout the SDLC, from planning to post-launch, you ensure a smoother, faster, and more reliable application. This proactive approach not only enhances user experience but also saves time and resources in the long run.