performance, accessibility, best practices and seo improvements (#17496)

| Q               | A
|-----------------|-----
| Branch?         | 2.0 
| Bug fix?        | no
| New feature?    | no
| BC breaks?      | no
| Deprecations?   | no
| Related tickets | -
| License         | MIT

src/Sylius/Bundle/ShopBundle/Resources/translations/messages.en.yml

@@ -60,3 +60,4 @@ sylius:
                 order_history: 'Order history'
                 personal_information: 'Personal information'
     top_bar: 'Sign up to our newsletter and grab -20% off'
+    meta_description: 'Explore the Sylius – a flexible e-commerce platform built on Symfony. Discover features to customize your online store and test its capabilities!'

src/Sylius/Bundle/ShopBundle/templates/homepage/banner.html.twig

@@ -1,7 +1,7 @@
 <div class="mb-6">
     <div class="overflow-hidden">
         <div class="d-flex justify-content-center align-items-center position-relative">
-            <img src="{{ asset('build/shop/images/homepage-banner.webp', 'shop') }}" class="img-fluid" alt="Home">
+            <img src="{{ asset('build/shop/images/homepage-banner.webp', 'shop') }}" width="1920" height="100%" class="img-fluid" alt="Home">
             <img src="{{ asset('build/shop/images/homepage-banner-logo.webp', 'shop') }}" class="position-absolute" style="max-width: 40vw" alt="New collection">
         </div>
     </div>

src/Sylius/Bundle/ShopBundle/templates/shared/components/header/cart.html.twig

@@ -5,11 +5,11 @@
 <div class="col-auto position-relative" {{ attributes }}>
     <div data-loading>
         <div class="sylius-shop-loader">
-            <img src="{{ asset('build/shop/images/loader.gif', 'shop') }}" alt="{{ 'sylius.ui.loading'|trans }}"/>
+            <img src="{{ asset('build/shop/images/loader.gif', 'shop') }}" alt="{{ 'sylius.ui.loading'|trans }}" loading="lazy"/>
         </div>
     </div>
     <div {{ sylius_test_html_attribute('cart-button') }}>
-        <button class="btn btn-icon btn-transparent px-0 position-relative" data-bs-toggle="offcanvas" data-bs-target="#offcanvasCart">
+        <button class="btn btn-icon btn-transparent px-0 position-relative" data-bs-toggle="offcanvas" data-bs-target="#offcanvasCart" aria-label="cart button">
             {{ ux_icon('tabler:shopping-bag') }}
             <span class="d-none d-lg-block ps-1" {{ sylius_test_html_attribute('cart-total') }}>
             {{- money.convertAndFormat(cart.itemsTotal) -}}

src/Sylius/Bundle/ShopBundle/templates/shared/components/main_image.html.twig

@@ -6,4 +6,4 @@
     {% set path = asset('build/shop/images/200x200.png', 'shop') %}
 {% endif %}
 
-<img {{ attributes.defaults({ class: 'img-fluid' }) }} src="{{ path }}" {{ sylius_test_html_attribute('main-image') }} alt="{{ product.name }}" />
+<img {{ attributes.defaults({ class: 'img-fluid' }) }} src="{{ path }}" {{ sylius_test_html_attribute('main-image') }} alt="{{ 'sylius.ui.product'|trans }} {{ product.name }} {{ 'sylius.ui.image'|trans }}" />

src/Sylius/Bundle/ShopBundle/templates/shared/layout/base.html.twig

@@ -10,9 +10,10 @@
 
         <title>{% block title %}{{ sylius.channel.name }}{% endblock %}</title>
 
-        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+        <meta content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes" name="viewport">
 
         {% block metatags %}
+            <meta name="description" content="{{ 'sylius.meta_description'|trans }}"/>
             {% hook '#metatags' with { _prefixes: prefixes } %}
         {% endblock %}
 

src/Sylius/Bundle/ShopBundle/templates/shared/layout/base/footer/content/copy.html.twig

@@ -1,5 +1,5 @@
 <div class="col-12 text-center col-md-6 order-md-3 text-md-start col-lg-3 order-lg-1">
-    <a href="{{ path('sylius_shop_homepage') }}" class="d-inline-block mb-4">
+    <a href="{{ path('sylius_shop_homepage') }}" class="d-inline-block mb-4" aria-label="sylius logo">
         <div style="width: 10rem">
             {% include '@SyliusShop/shared/logo.html.twig'%}
         </div>
@@ -7,6 +7,6 @@
 
     <div class="mb-3">
         &copy; {{ 'sylius.ui.your_store'|trans }}, {{ 'sylius.ui.powered_by'|trans }}
-        <a href="https://sylius.com" target="_blank" style="color: #1abb9c;">Sylius</a>.
+        <a href="https://sylius.com" target="_blank" style="color: #18816c;">Sylius</a>
     </div>
 </div>

src/Sylius/Bundle/ShopBundle/templates/shared/layout/base/footer/content/payment_methods.html.twig

@@ -4,24 +4,24 @@
     <div class="row g-2 mb-4">
         <div class="col-4">
             <a href="https://sylius.com/partner/paypal/" target="_blank" class="d-block border rounded p-2">
-                <img class="img-fluid" src="{{ asset('build/shop/images/paypal-logo.svg', 'shop') }}" alt="PayPal" />
+                <img class="img-fluid" src="{{ asset('build/shop/images/paypal-logo.svg', 'shop') }}" width="100%" height="100%" alt="PayPal" />
             </a>
         </div>
         <div class="col-4">
             <a href="https://sylius.com/partner/adyen/" target="_blank" class="d-block border rounded p-2">
-                <img class="img-fluid" src="{{ asset('build/shop/images/adyen-logo.svg', 'shop') }}" alt="Adyen" />
+                <img class="img-fluid" src="{{ asset('build/shop/images/adyen-logo.svg', 'shop') }}" width="100%" height="100%" alt="Adyen" />
             </a>
         </div>
         <div class="col-4">
             <a href="https://sylius.com/partner/mollie/" target="_blank" class="d-block border rounded p-2">
-                <img class="img-fluid" src="{{ asset('build/shop/images/mollie-logo.svg', 'shop') }}" alt="Mollie" />
+                <img class="img-fluid" src="{{ asset('build/shop/images/mollie-logo.svg', 'shop') }}" width="100%" height="100%" alt="Mollie" />
             </a>
         </div>
     </div>
 
     <div class="d-flex justify-content-center justify-content-md-start justify-content-lg-center gap-3 mb-5">
-        <a class="link-reset" href="#">{{ ux_icon('tabler:brand-instagram', { class: 'icon icon-md' }) }}</a>
+        <a class="link-reset" href="https://www.instagram.com/sylius.team/" target="_blank" aria-label="instagram logo">{{ ux_icon('tabler:brand-instagram', { class: 'icon icon-md' }) }}</a>
-        <a class="link-reset" href="#">{{ ux_icon('tabler:brand-facebook', { class: 'icon icon-md' }) }}</a>
+        <a class="link-reset" href="https://www.facebook.com/SyliusEcommerce/" target="_blank" aria-label="facebook logo">{{ ux_icon('tabler:brand-facebook', { class: 'icon icon-md' }) }}</a>
-        <a class="link-reset" href="#">{{ ux_icon('tabler:brand-x', { class: 'icon icon-md' }) }}</a>
+        <a class="link-reset" href="https://x.com/Sylius" target="_blank" aria-label="x logo">{{ ux_icon('tabler:brand-x', { class: 'icon icon-md' }) }}</a>
     </div>
 </div>

src/Sylius/Bundle/ShopBundle/templates/shared/layout/base/header/content/logo.html.twig

@@ -1,5 +1,5 @@
 <div class="col">
-    <a href="{{ path('sylius_shop_homepage') }}" class="d-inline-block py-lg-2" style="width: 10rem">
+    <a href="{{ path('sylius_shop_homepage') }}" class="d-inline-block py-lg-2" style="width: 10rem" aria-label="sylius logo">
         {% hook 'logo' %}
     </a>
 </div>

src/Sylius/Bundle/ShopBundle/templates/shared/layout/base/header/content/security/visitor/mobile.html.twig

@@ -1,5 +1,5 @@
 <div class="d-lg-none">
-    <a href="{{ path('sylius_shop_login') }}" class="btn btn-icon btn-transparent px-0">
+    <a href="{{ path('sylius_shop_login') }}" class="btn btn-icon btn-transparent px-0" aria-label="account button">
         {{ ux_icon('tabler:user') }}
     </a>
 </div>