Code Quality and Performance Best Practices

This article provides insights into enhancing code quality and optimising performance for your Insites Instance. We share our experience, including best practices, examples of common mistakes to avoid, and recommendations for useful tools.

High-quality code is clean, readable, consistent, and offers several benefits. It enhances understandability, maintainability, and extensibility. Well-designed software with reduced code complexity is easier to test, more robust, and more secure. These factors minimise technical debt and increase long-term cost-efficiency.

Code performance is also crucial for retaining visitors, delivering an optimal user experience, and achieving higher search result rankings. Research conducted by Google and SOASTA in 2017 reveals that as page load time increases from 1 second to 3 seconds, the likelihood of bounce increases by 32%. This trend continues with further increases in page load time, as demonstrated in the same research findings.

An increase in page load time has a significant impact on bounce probability:

• Going from 1s to 3s increases bounce probability by 32%
• Going from 1s to 5s increases bounce probability by 90%
• Going from 1s to 6s increases bounce probability by 106%
• Going from 1s to 10s increases bounce probability by 123%

Code quality

Consider these factors when improving code quality:

• Maintainability: Strive for simplicity and readability.
• Naming: Use consistent and logical naming conventions for easier code understanding and collaboration.
• Utilise hash/object data structures: Opt for a few well-organised hashes instead of excessive variables to improve code organisation.
• Implement version control: Employ a version control system for better code management and collaboration.

Front-end

Let's delve into the front-end factors that impact code quality, performance, security, and considerations such as SEO and accessibility.

Code quality

Incorporate modern front-end development techniques in your workflow:

• Adopt a mobile-first approach.
• Implement progressive enhancement and graceful degradation strategies.
• Design responsive websites using responsive web design principles.
• Leverage progressive web apps to enhance user experiences.
• Utilise web components for modular and reusable code.
• Make use of SVG for scalable and interactive graphics.
• Utilise code splitting to optimise delivery via HTTP/2 on content delivery networks (CDNs).
• Consider end-to-end testing for comprehensive testing and prevention of regressions. Using a tool such as TestCafe for testing purposes is highly recommended.

Performance

Contrary to a common myth, highly dynamic pages requiring frequent content updates can achieve high benchmark speeds. Developers building on top of Insites have successfully implemented such functionality on client sites, including dynamic content for User Profiles, Products, Project Status Changes, and Activity Count Summing, all on a single page. These sites consistently achieve Google Page speed scores of 99/100.

To achieve exceptional performance, Insites is built to employ caching techniques, eliminate queries, optimise query performance, and utilise aggregation for summing on highly data-driven, dynamically generated pages. Additionally, lazy loading is implemented, and the system only loads the necessary database data for immediate viewer consumption.

Utilise PageSpeed Insights to assess your website's performance. For new projects, aim for a minimum score of 75 for mobile and desktop, while projects already launched to production should target a score of 85 or higher. Addressing recommendations from PageSpeed Insights and optimising long-running server-side code are crucial steps to building high-performance websites.

In addition to automated checks, manually interact with the page by clicking, scrolling, and implementing the necessary changes to achieve smooth and jank-free performance.

Security

Avoid incorporating third-party JavaScript code due to potential risks such as data leaks, Man-in-the-Middle (MiTM) attacks, and other vulnerabilities. Tag managers, like Google Tag Manager, can be problematic as they grant, for example, marketing personnel the ability to inject content without technical expertise. Unfortunately, this often leads to negative consequences for both performance and user experience, making it important to exercise caution when utilising such tools.

Other aspects

Consider the following factors when building with a focus on high performance and security:

• To achieve optimal mobile usability, test your site on a mobile device. Prioritise delivering a satisfactory user experience on mobile devices, even if clients do not explicitly request responsive design. After all, embracing a mobile-first approach to enhance compatibility across devices is recommended when designing a website's CSS.
• Include basic SEO tags and OpenGraph metadata for optimisation purposes for social media (rich media). Use HTML tags, especially headings, properly.
• Implement an asset-build process to incorporate many of the recommendations described in the previous bullet points.
• See that your page complies with minimum WCAG 2.0 guidelines at the AA level and has no issues in Lighthouse (page insights) in the accessibility section.

Back-end

Now, let's discuss back-end factors that impact code quality and performance.

Code quality

Use the following development techniques:

• To enhance code organisation, structure your code in a modular manner. This technique involves grouping code into modules based on individual features or groups of related features.
• Pay attention to the indentation in your files. is an awesome universal tool to keep files consistent across all team members.
• Ensure your codebase contains no 'dead' or active debugging code. This step is particularly crucial for logging, as logging operations consume CPU resources and occupy database space.
• Avoid retaining commented code in your codebase. Remove any commented-out code, as it can clutter the codebase and make it harder to maintain. Instead, rely on your version control system to access any previously commented code.

Performance

Use the following development techniques for enhanced website performance:

• Maximise caching opportunities for improved performance by caching as much as possible, including pages and fragments. Leverage the robust caching tools offered by Insites to enhance the speed of your web pages. With Insites, you have extensive flexibility, allowing you to experiment and fully capitalise on caching capabilities.
• Implement lazy-loading techniques to prevent a page from being blocked for an extended period during the Time to First Byte (TTFB) phase. Utilise front-end techniques such as AJAX and back-end techniques involving separate pages to mitigate the impact of long-running blocks of code. This approach allows you to effectively address and optimise these blocks without hindering overall page performance.
• Harness the power of asynchronous calls by leveraging our background jobs mechanisms, such as async callbacks or API call notifications. By utilising these features, you can execute actions in the background without blocking the main thread (HTTP request → response flow), thus enabling a more performant architecture for your application. This asynchronous paradigm offers significant advantages over the standard synchronous approach regarding performance and scalability.
• Eliminate issues by closely monitoring your database queries. Utilise profilers, logs, and the filter to measure the execution timing of your code blocks and identify potential bottlenecks. In Insites, you can use the related database items functionality to simplify resolving problems. Leverage this feature to enhance the efficiency of your code and optimise query performance.
• Improve efficiency by utilising GraphQL to retrieve only the necessary data from the database, avoiding unnecessary data retrieval. Keep your queries concise and focused on fetching precisely what is required. This approach helps maintain tidy queries and facilitates easier implementation of partial caching as a beneficial side effect.