Alf’s Cycle (Small Business Website) – Critical Analysis & Enhancement

This blog critically analyses Alf’s Cycle (small business website) developed in two stages. The initial version primarily focused on visual design and meeting the core site requirements, with limited consideration for areas such as SEO, performance optimisation, dynamic functionality, and accessibility. The second version revisits the project and introduces significant improvements across these areas to enhance the overall quality, usability, and maintainability of the website.

Initial version

The initial version was primarily developed to meet the core project requirements, with a strong emphasis on visual design and maintaining a simple codebase. While it successfully achieved these objectives, the site still required improvements in several key areas.

Key areas for improvement included:

Accessibility: The site achieved an average AIM score of 9.5/10 according to automated testing via https://wave.webaim.org/. However, while running automated evaluations using ARC Toolkit and AXE DevTools, along with manual testing, multiple issues were revealed, including several critical accessibility barriers. Key problems included the absence of a “Skip to Content” link, which limits keyboard navigation efficiency. Structural accessibility issues were also identified, such as improper exposure of decorative SVGs to screen readers. In addition, the site did not consistently include a level-one heading on pages (or within frames), which is essential for clearly defining the primary topic and supporting a logical content hierarchy.

SEO:Each page on the website was missing a properly defined H1 heading, which is a critical structural element for both accessibility and search engine optimization. In addition, the pages did not include meta descriptions and keywords, which reduces visibility in search engine results and weakens click-through potential.Furthermore, the site lacked important SEO configuration files such as robots.txt and sitemap.xml. The absence of a robots.txt file means search engine crawlers are not being guided on how to interact with the site, while the missing sitemap.xml file prevents search engines from efficiently discovering and indexing all available pages. Overall, these issues collectively limit the site’s search engine discoverability, structure, and indexing efficiency.

Caching Strategy: The caching behavior observed on the site is controlled by the default configuration of the hosting environment used through cPanel (LiteSpeed server). No custom caching rules are defined in .htaccess or server-level settings, the hosting provider automatically applies a standard caching policy to static assets such as images and CSS. In this version, a default cache duration of 7 days (max-age=604800) is assigned, allowing the browser to store and reuse assets one week before checking the server for updates.The Date and Expires headers confirm that the cache is valid for only one week. This is an acceptable default setting, as it provides a balance between performance and content freshness, although it could be further improved with longer caching strategies for better optimization.

Areas Requiring Improvement: The project was built using only HTML and CSS, which limited the implementation of more reusable and shared code structures. The codebase did not consistently follow the DRY (Don’t Repeat Yourself) principle, and the file and folder structure could have been organised in a more logical and maintainable way. In addition, the opening hours were statically defined rather than dynamically generated. The contact page also contained duplicated shop details, the website lacked a favicon, and the navigation did not include an active state to indicate the current page. Furthermore, the site did not include a dedicated 404 error page to handle invalid or broken routes.

Revisited Version

This version included many improvements. The following is a list of the fixes and enhancements that were implemented.

Accessibility Fixes:

1. Added a “Skip to Content” link and implemented the recommended :focus-visible styling with a highly visible and distinctive design. The skip link improves accessibility by allowing keyboard and screen reader users to bypass repeated navigation and directly access the main content, reducing navigation time and improving overall usability.

2. The heading hierarchy was properly maintained across all pages, ensuring a clear and logical content structure that improves readability and helps assistive technologies accurately interpret the page layout.

3. Fixed the improper exposure of decorative SVG elements by applying focusable="false" and aria-hidden="true". These attributes ensure that decorative graphics are ignored by assistive technologies and are not focusable via keyboard navigation, improving accessibility and preventing unnecessary screen reader clutter.

4. Added an Accessibility Statement to communicate the website’s commitment to inclusive design and equal access for all users, including those using assistive technologies.

SEO Fixes:

1. Added appropriate page titles, meta descriptions, and relevant keywords to improve search engine visibility and ensure each page is accurately represented in search results. These elements were necessary because they help search engines understand the content of the page, improve indexing, and increase the likelihood of users finding the website through relevant search queries.

2. Added sitemap.xml file to the website to list all important pages in a structured format. This was necessary because it helps search engines efficiently crawl and index the site, ensuring that all key pages are discovered and improving overall SEO performance and visibility in search results.

3. Added a robots.txt file with rules for search engine crawlers, including restrictions on accessing /layout/, /assets/, and 404.php, along with a reference to the site’s sitemap. This was necessary to guide search engine bots on which parts of the website should or should not be crawled, helping to improve crawl efficiency, protect non-content or utility files from indexing, and support better overall SEO structure.

4. Strengthened geolocation SEO by embedding structured location data, geographic coordinates, and business identity signals into every page of the website. It ensures search engines can accurately associate the website with a real-world UK location (Folkestone, Kent), improving local search relevance, map visibility, and overall trust in the business entity.

5. Integrated Google Search Console to monitor website performance in search results. However, it may take a few days for data to appear in the dashboard as Google needs time to crawl and index the site and begin collecting search analytics.

Improved Caching Mechanism:Implemented browser caching rules for static assets using the .htaccess file by configuring both mod_expires and mod_headers. This setup defines how long different file types such as images, fonts, CSS, and JavaScript should be stored in the user’s browser cache. Images and fonts are set to be cached for up to one year, while CSS and JavaScript files are cached for one month to balance performance and content updates. Additionally, a Cache-Control header with public, max-age=31536000, immutable was applied to image and font files to instruct the browser that these resources will not change during the caching period and do not need to be revalidated. This was necessary to improve website performance by reducing repeated server requests, decreasing load times, and ensuring faster page rendering through efficient client-side caching of static assets.

Further enhancements

1. Migrated the project to PHP and reorganised the folder structure into a more logical and maintainable order. This was necessary to improve code organisation, separate concerns more clearly, and make the project easier to navigate, maintain, and scale in future development.

2. Created shared header and footer components to eliminate redundant code across multiple pages. This was necessary to improve maintainability, ensure consistency throughout the site, and follow the DRY (Don’t Repeat Yourself) principle, making future updates faster and less error-prone.

3. Implemented a custom error page and configured it via the .htaccess file to handle broken or non-existent URLs in a user-friendly way. This was necessary to improve user experience by providing clear feedback when 404 error occur, reduce user frustration, and maintain consistent site branding instead of displaying generic server error messages.

4. Implemented server-side logic for displaying opening hours, ensuring the information is rendered dynamically. This was necessary so that users can still view accurate opening hours even when JavaScript is disabled, improving accessibility and reliability. The system was also configured with a UK locale to align with the target audience and ensure time and regional formatting are appropriate for users in the United Kingdom.

5. Minor UI fixes – Shop details were repeated on contact page.

Repeated shop details were fixed also, the now the navigation menu has active state.

Added favicon.ico in the title for branding of the site. Although, design could have been much better.

Artificial Intelligence (AI) tools were used during the development of this project and while writing this blog to enhance contextual clarity, present information more clearly and professionally, assist with code refactoring, and help identify and handle potential edge cases. All AI-generated suggestions, code, and written content were carefully reviewed, refined, and validated to ensure accuracy, relevance, and alignment with the project requirements.

https://github.com/season-shrestha-university/alfs-cycle-php