Unit Testing: Deployed Heroku site very poor Google Lighthouse performance

[simonjvardy]

Describe the bug Deployed Heroku site very poor Google Lighthouse performance

To Reproduce Steps to reproduce the behavior:

1. Go to 'sportswear-online.herokuapp.com
2. Right-click on the page and select Inspect
3. Select Lighthouse from the DevTools menu
4. Run the desktop & mobile tests

Expected behavior The site pages should load quickly without too much load fetching the media files

Screenshots

Desktop (please complete the following information):

• OS: Windows10
• Browser: Chrome

[simonjvardy]

Site tested with lighthouse with a filtered view showing far less products than the "All Products" page and the performance is good.

The poor performance is related to the total number of media assets the various filtered views must load. The total number of products on the site needs to be re-assessed and trimmed down significantly to improve the overall site performance and useability.

[simonjvardy]

Django Paginator class tested (Django Pagination Documentation) with each page limited to 40 results per page and this worked successfully.

However, the products filtering was inadvertently disabled and couldn't find a way to incorporate both filtered views and pagination in the time available.

[simonjvardy]

Tried converting all image files from .jpg to .webp format to reduct the network payload by 50%.

However, to incorporate the webp version into the templates and maintain browser support, the <img> tags would need to be replaced with:

<picture>
    <source srcset="{{ product.image.url }}" type="image/webp">
    <source srcset="{{ product.image.url }}" type="image/jpeg">
    <img src=="{{ product.image.url }}" alt="{{ product.name }}"
</picture>

However, this wouldn't work as there would need to be a 2nd image url field on the products model to serve the webp image which would cause too much work at this late stage of the project.

[simonjvardy]

The current solution to this problem is to reduce the number of products from 370 down to 193 to improve the loading performance of the "All Products" page.

The best solution is still to add in pagination.