Тупой, говоришь? Я не знаю, смогу ли я сделать это тупо.
Первое, что я замечаю, это мучительно медленная загрузка страницы. 4,4 мегабайта — это неприемлемо много, даже с учетом относительно приличных 20 отдельных файлов. Похоже, у вас там какая-то скриптовая программа с отложенной загрузкой, из-за которой это занимает больше времени, чем следовало бы. На самом деле, вам, вероятно, не понадобилась бы большая часть этой чуши, если бы у вас была обычная страница вместо того, чтобы писать на нее смешные 1,4 мегабайта CSS и столь же абсурдный мегабайт JavaScript.
Нет никаких оправданий тому, что законному веб-сайту требуется более 48 КБ CSS в ОДНОМ файле для ВСЕГО САЙТА... и я не вижу, чтобы на этом сайте делалось что-либо, что даже гарантировало бы наличие JavaScript!
Я не знаю, что вы использовали для создания этого сайта, но ни один человек не стал бы писать HTML таким образом. Здесь нет ничего, отдаленно напоминающего семантику, логическую структуру документа, отделение представления от содержания, изящную деградацию или доступность. Это по колено статические сценарии в разметке, статический стиль в разметке (напрашивается вопрос, что вообще делают мегабайты внешнего идиотизма?!?), бесконечные бессмысленные DIV просто так, бесконечные бессмысленные классы просто так - серьезно, если вы это не сделаете. Я не знаю, что не так с ЭТОЙ крушением поезда:
(перенос строки добавлен, чтобы показать, насколько это глупо!) Код:
<body id="collection-588b7c05be65945291169c0c" class="tweak-social-icons-style-regular tweak-social-icons-shape-square
tweak-site-width-option-full-background tweak-icon-weight-light tweak-site-ajax-loading-bar-show
ancillary-header-top-left-layout-horizontal ancillary-header-top-center-layout-horizontal
ancillary-header-top-right-layout-horizontal ancillary-header-bottom-left-layout-horizontal
ancillary-header-bottom-center-layout-horizontal ancillary-header-bottom-right-layout-horizontal
ancillary-header-branding-position-top-left ancillary-header-tagline-position-hide
ancillary-header-primary-nav-position-bottom-left ancillary-header-secondary-nav-position-top-right
ancillary-header-social-position-top-right ancillary-header-search-position-top-right
ancillary-header-cart-position-top-right tweak-header-primary-nav-hover-style-spotlight
tweak-header-primary-nav-button-style-solid tweak-header-primary-nav-button-shape-square
tweak-header-secondary-nav-inherit-styles tweak-header-secondary-nav-hover-style-spotlight
tweak-header-secondary-nav-button-style-solid tweak-header-secondary-nav-button-shape-square
tweak-header-search-style-underlined tweak-header-cart-style-text tweak-overlay-parallax-enabled
tweak-index-page-fullscreen-none tweak-index-page-scroll-indicator-none
tweak-index-page-scroll-indicator-icon-arrow tweak-index-page-scroll-indicator-icon-weight-hairline
tweak-index-gallery-layout-packed tweak-index-gallery-hover-style-fade
tweak-index-gallery-content-position-top-left tweak-index-gallery-content-text-alignment-left
tweak-footer-layout-stacked tweak-footer-stacked-alignment-center tweak-mobile-bar-top-fixed
ancillary-mobile-bar-branding-position-top-left ancillary-mobile-bar-menu-icon-position-top-right
ancillary-mobile-bar-search-icon-position-hide ancillary-mobile-bar-cart-position-bottom-center
tweak-mobile-bar-cart-style-cart tweak-mobile-overlay-slide-origin-left
tweak-mobile-overlay-close-show tweak-mobile-overlay-menu-primary-button-style-solid
tweak-mobile-overlay-menu-primary-button-shape-square
tweak-mobile-overlay-menu-secondary-button-style-solid
tweak-mobile-overlay-menu-secondary-button-shape-square tweak-quote-block-alignment-left
tweak-blog-meta-primary-date tweak-blog-meta-secondary-none tweak-blog-list-style-grid
tweak-blog-list-separator-show tweak-blog-list-alignment-left tweak-blog-list-item-image-show
tweak-blog-list-item-image-aspect-ratio-grid-11-square
tweak-blog-list-item-image-aspect-ratio-stacked-11-square tweak-blog-list-item-title-show
tweak-blog-list-item-excerpt-show tweak-blog-list-item-body-show
tweak-blog-list-item-readmore-inline tweak-blog-list-item-meta-position-above-title
tweak-blog-list-pagination-link-label-show tweak-blog-list-pagination-link-icon-weight-light
tweak-blog-item-alignment-center tweak-blog-item-meta-position-above-title
tweak-blog-item-share-position-below-content tweak-blog-item-pagination-link-label-show
tweak-blog-item-pagination-link-title-show tweak-blog-item-pagination-link-meta-hide
tweak-blog-item-pagination-link-icon-weight-light event-thumbnails
event-thumbnail-size-32-standard event-date-label event-list-show-cats event-list-date
event-list-time event-list-address event-excerpts event-item-back-link
gallery-design-slideshow aspect-ratio-auto lightbox-style-dark gallery-navigation-bullets
gallery-info-overlay-show-on-hover gallery-aspect-ratio-32-standard
gallery-arrow-style-no-background gallery-transitions-fade gallery-show-arrows gallery-auto-crop
tweak-product-list-image-aspect-ratio-11-square
tweak-product-list-item-hover-behavior-show-alternate-image tweak-product-list-meta-position-under
tweak-product-list-mobile-meta-position-under tweak-product-list-meta-alignment-under-center
tweak-product-list-meta-alignment-overlay-center-center tweak-product-list-show-title
tweak-product-list-show-price tweak-product-list-filter-display-top
tweak-product-list-filter-alignment-center tweak-product-item-nav-show-breadcrumb-and-pagination
tweak-product-item-nav-pagination-style-previousnext
tweak-product-item-nav-breadcrumb-alignment-left tweak-product-item-nav-pagination-alignment-split
tweak-product-item-gallery-position-left tweak-product-item-gallery-design-stacked
tweak-product-item-gallery-aspect-ratio-11-square
tweak-product-item-gallery-thumbnail-alignment-left tweak-product-item-details-alignment-left
tweak-product-item-details-show-title tweak-product-item-details-show-price
tweak-product-item-details-show-excerpt tweak-product-item-details-excerpt-position-below-price
tweak-product-item-details-show-share-buttons tweak-product-item-details-show-variants
tweak-product-item-details-show-quantity tweak-product-item-details-options-style-square
tweak-product-item-details-show-add-to-cart-button
tweak-product-item-details-add-to-cart-button-style-outline
tweak-product-item-details-add-to-cart-button-shape-square
tweak-product-item-details-add-to-cart-button-padding-medium
tweak-product-item-image-zoom-behavior-click tweak-product-item-lightbox-enabled
tweak-product-badge-style-none tweak-product-badge-position-top-right
tweak-product-badge-inset-floating newsletter-style-dark hide-opentable-icons opentable-style-dark
small-button-style-outline small-button-shape-square medium-button-style-outline
medium-button-shape-rounded large-button-style-outline large-button-shape-rounded
image-block-poster-contextual-font-sizing image-block-poster-scroll-animation-fade-in
image-block-card-contextual-font-sizing image-block-card-scroll-animation-fade-in
image-block-overlap-contextual-font-sizing image-block-overlap-scroll-animation-slide-in
image-block-collage-contextual-font-sizing
image-block-collage-scroll-animation-slide-inimage-block-stack-scroll-animation-fade-in
button-style-outline button-corner-style-rounded tweak-product-quick-view-button-style-docked
tweak-product-quick-view-button-position-center
tweak-product-quick-view-lightbox-excerpt-display-truncate
tweak-product-quick-view-lightbox-show-arrows tweak-product-quick-view-lightbox-show-close-button
tweak-product-quick-view-lightbox-controls-weight-light tweak-share-buttons-style-outline
tweak-share-buttons-icons-show tweak-share-buttons-counts-show
tweak-share-buttons-standard-icon-color tweak-share-buttons-standard-background-color
native-currency-code-usd collection-type-index collection-layout-default
collection-588b7c05be65945291169c0c homepage view-list mobile-style-available has-site-title
has-social has-parallax-images has-parallax-images enable-load-effects has-primary-nav
has-footer-nav" data-controller="SiteLoader, MobileClassname">
Код (разметка): Сделайте миру одолжение, уберите **** с клавиатуры и займитесь чем-нибудь менее детализированным, например макраме.
... и это еще до того, как мы поговорим об эпопее /FAIL/ со стороны дизайна, со шрифтами с засечками на экране, абсурдно маленькими шрифтами с фиксированной метрикой (измеренными в пикселях), неразборчивыми цветовыми контрастами (например, белым текстом над изображением мраморных шариков). , светло-серый на белом).
Есть нечто, называемое «Руководство по обеспечению доступности веб-контента», WCAG. Возможно, вы захотите узнать об этом. В HTML также есть теги, которые ОЗНАЧАЮТ вещи, возможно, вы захотите научиться ПРАВИЛЬНО использовать HTML... и действительно отойдите от сценариев, пока не сможете СНАЧАЛА создать работающий сайт без JavaScript!
Я бы предложил перетащить весь этот беспорядок «за дровяной сарай» с .30-06, приставить ствол к виску и потянуть. Это единственный гуманный поступок.
