Technical task for a programmer

for website «Skill to Start» optimization

1. Site Structure

Currently, the site structure is inconvenient for both users and search engine robots. To make the site as user-friendly as possible and further promote it in search engines, I recommend implementing the following structure:

https://docs.google.com/spreadsheets/d/1da3p3XgNR39RpxhSeen-vKzRbWGDbtrq61ePZ65DnRs/edit#gid=0

2. Duplicate Pages

At the moment, the site has a large number of page duplicates with a response code of 200:

  1. https://www.skilltostart.eu/en///////         
  2. https://www.skilltostart.eu/en/ 
  3. https://www.skilltostart.eu/en/home 
  4. https://www.skilltostart.eu/en/about///////                 
  5. https://www.skilltostart.eu/en/about/                  
  6. https://www.skilltostart.eu/en/about/index.php         
  7. https://www.skilltostart.eu/en/about/home.php                         
  8. https://www.skilltostart.eu/en/about/index.html                 
  9. https://www.skilltostart.eu/en/about/home.html                 
  10. https://www.skilltostart.eu/en/about/index.htm                 
  11. https://www.skilltostart.eu/en/about/home.htm                 
  12. https://www.skilltostart.eu/en/about/home                 
  13. https://www.skilltostart.eu/en/about/nNNK                 
  14. https://www.skilltostart.eu/en/about/*                  
  15. https://www.skilltostart.eu/en/about/556                 
  16. https://www.skilltostart.eu/en///////about 

We need to check EACH page for duplicate content with a response code of 200 and set up a 301 redirect to the corresponding main page.

3. Site map generation

The site map contains a complete list of pages on the site for redistributing weight to pages that are rarely indexed (HTML site map) and submitting pages for indexing to search engines (XML site map).

3.1. Generating an HTML site map

An HTML sitemap serves as a directory of all the links on a website, helping both users and search engines find the desired page on the site. The sitemap helps reduce the level of document nesting and improve indexing of pages that are deep within the site's structure.

An HTML sitemap must meet the following requirements:

  • Links to pages in the sitemap are arranged in a logical form, in accordance with the hierarchy of pages: homepage, section pages, and subsection pages.
  • Links to all pages on the site that are open for indexing are listed, excluding pages of specific articles or posts if their quantity dominates the site's structure (more than 90% of all pages), as well as pagination pages.
  • If the sitemap includes more than 150 links, it should be implemented on a multi-page basis (no more than 150 links per page).

The link to the HTML sitemap should be placed on ALL pages in the site footer.

3.2. Generating an XML image sitemap

Currently, the website does not have a sitemap-images.xml file.

To create the sitemap-images.xml file that meets the Sitemaps requirements for images, it should:

  • Specify the IMAGE namespace as follows: xmlns:image="http://www.google.com/schemas/sitemap-image/1.1";
  • Use all the mandatory tags <urlset>, <url>, <loc>, image:image, and image:loc;
  • Contain only canonical pages that are open for indexing and crawling, returning a 200 response code;
  • Use the UTF-8 encoding;
  • Contain no more than 50,000 URLs;
  • Contain no more than 1,000 images for each URL;
  • Only include full-size images without thumbnails;
  • Not exceed 50 MB in size.

Add the sitemap-images.xml file to the robots.txt file.

The sitemap should update automatically after adding a new image to the site.

4. Website loading speed optimization

Website loading speed affects not only whether the visitor will wait for your site to load, but also the ranking of the site in search engines. The faster your site loads, the more visitors you can get from search engines, and therefore, the more potential customers.

Currently, the indicator of website loading speed on desktop devices is 84

On mobile devices — 45

To enter the "green zone" (90 and above) on ALL devices, you must follow these recommendations.

4.1. Remove unused JavaScript code

To reduce traffic, remove unused JavaScript code and defer the loading of scripts until they are needed. Learn more about removing unused JavaScript code.

If you are not using server-side rendering, use the React.lazy() method to split JavaScript bundles. You can also split code with a third-party library, such as loadable-components.

4.2. Do not send outdated JavaScript code to modern browsers

Polyfills and transformations allow working with new JavaScript capabilities in outdated browsers. However, most of them are not required for modern browsers. Use a new strategy for deploying script packages in JavaScript. Detection of modular and non-modular functions will reduce the code volume in modern browsers and provide support for outdated browsers. Learn more about using the new strategy for working with JavaScript.

4.3. Configure text rendering during web font loading

Use the CSS descriptor font-display to allow users to see text while web fonts are loading. Learn more about font-display.

4.4. Reduce the impact of third-party code

Third-party code can significantly slow down website loading times. I recommend only using essential third-party resources and ensuring they load after the main elements of the document. Learn more about minimizing the impact of third-party code.

4.5. Minimize main thread work

It is recommended to reduce the time for analyzing, compiling, and executing JS scripts. To do this, you can break down the JS code into smaller fragments. Learn more about minimizing work in the main thread.