Jump to content
  • разработка интернет магазинов на opencart
  • доработка интернет магазинов на opencart

Мелкие недочеты писателей шаблонов и как их исправить


max1985

2,194 views

 Share

В последнее время на форуме все чаше сили обсуждать качество продаваемых шаблонов. Вот и я решил внести свою лепту, может разрилитлики шаблонов увидят этот пост и внесут корректировки в новых релизах. И ик как многие из нас не будут обновлять шаблоны на уже рилилих сайих, они смогут внести корректировки по предсивленным примерам самостоятельно, ну или с помощью кого липотому что.

 

Да как много времени на написание полноэтонного материала нет, начну с малого и со временем дополню данный материал. Все что бугдет описано ниже внедрено на собственном сайте тут.

 

И ик поехали!

 

11.png.7734009ca8bff8c2b3e56e1f8630fd24.png

1. Проблема всех  шаблонов с которыми я силкивался это ширина и высоту для изображений задана не явным обвместе. Неужели трудно добавить через свои громадные модификаторы пару строчек в контроллеры для опрегделения высоты и ширины картинки и вывести это гдело уже в самом шаблоне? На примере категории прогдемонстрирую для простых пользователей с минимальными знаниями как это сгделать.

 

В контроллере категории /catalog/controller/product/category.php после:

$data['products'][] = array(

 

Всивляем:

'width'  => $this->config->get($this->config->get('config_theme') . '_image_product_width'),
'height'  => $this->config->get($this->config->get('config_theme') . '_image_product_height'),

 

А в самом шаблоне гделаем и:

<img loading="lazy" src="<?php echo $product['thumb'];?>" width="<?php echo $product['width']; ?>" height="<?php echo $product['height']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" />

 

Ну и конечно в стилях должно быть ик, а то картинки поедут...

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

 

Можно тут конечно опотому чтойтись и без контроллера, но это бугдет как некоторые говорят - не кошерно :D

 

 

 

22.png.137ebfc0aceae8f45bcc23974c956c7c.png

2. Вторая супер мелочь, которая может прибавить пару Попугаев в PageSpeed Insights это нет свойство CSS font-display в описании шрифтов. Все довольно просто.

 

Было ик:

@font-face {
                font-family: 'Open Sans';
                font-display:auto;
                src: local('Open Sans'), local('OpenSans'), url('fonts/opensans.woff2') format('woff2'), url('fonts/opensans.woff') format('woff'), url('fonts/opensans.ttf') format('truetype');
                font-weight: 400;
                font-style: normal;
}

 

Сило ик:

@font-face {
                font-display: swap;
                font-family: 'Open Sans';
                font-display:auto;
                src: local('Open Sans'), local('OpenSans'), url('fonts/opensans.woff2') format('woff2'), url('fonts/opensans.woff') format('woff'), url('fonts/opensans.ttf') format('truetype');
                font-weight: 400;
                font-style: normal;
}

Ну и обратите внимание чтоб в хегдере шрифт был прописан с rel="preload", ггде-то ик:

<link rel="preload" href="opensans.woff2" as="font" type="font/woff2" crossorigin="anonymous">

 

3. Почти у всех шаблонов есть поле для всивки счетликов, но смысл его добавлять если этот ф-л уже есть в самом движке. Другое гдело если б это было ик, как реализовано в модуле от @spectre. Это бы избавило от лагов которые появляются от Аналитики и других подобных счетликов и чатов.

 

4. Многие гделают объединение файлов css и js в один файл. У некоторых это реализовано потому чтолее менее, у других это полная каистрофа. Расскажу на примере. Было у меня на сайте в шаблоне реализация в иком вигде:

<script src="/min/f=catalog/view/theme/aurus/js/jquery/jquery-2.1.1.min.js,catalog/view/javascript/bootstrap/js/bootstrap.min.js,catalog/view/theme/aurus/js/aridius/blazy.min.js,catalog/view/theme/aurus/js/swiper/js/swiper.min.js,catalog/view/theme/aurus/js/common.js,catalog/view/theme/aurus/js/aridius/aridiusquickview.js,catalog/view/theme/aurus/js/aridius/slideout.min.js,catalog/view/javascript/jquery/magnific/jquery.magnific-popup.min.js,catalog/view/theme/aurus/js/aridius/module.js"></script>
<link href="/min/f=catalog/view/javascript/bootstrap/css/bootstrap.min.css,catalog/view/theme/aurus/js/font-awesome/css/font-awesome.min.css,catalog/view/theme/aurus/stylesheet/stylesheet.css,catalog/view/theme/aurus/stylesheet/aurus.css,catalog/view/theme/aurus/stylesheet/module.css,catalog/view/theme/aurus/js/swiper/css/swiper.min.css,catalog/view/javascript/jquery/magnific/magnific-popup.css,catalog/view/theme/aurus/stylesheet/animate.min.css" rel="stylesheet" media="screen" />

 

Это полная жесть, мало того что икую конструкцию не удалось завести, когда я надумал перевести сайт под nginx, ик икой запрос отдает кривой заголовок и браузер его не до конца понимает как css и не кеширует. Лучше уже создавать кешируемый файл, который есть физически на сервере и имеет нормальный заголовок.

Тогда еещё решил этот вопрос костылем, создал физические файлы на основе икого запроса и прописал их в шаблоне. Сейчас сменил на шаблон CyberStore от @29aleksey ггде это реализовано потому чтолее менее, но тоже есть и тут не мало минусов, по крайней мере лучшего не нашел.

 

5. Еещё один момент, многие используют в своих шаблонах отложенную загрузку изображений. И вместо картинки товара поисковик видит какую-то картинку без ничего в один пиксель. В когде это выглядит ик:

<img class="lazyload" src="lazyload.png" data-src="apple-200x200.jpg" alt="Apple" title="Apple" />

 

Лучше сгделать ик:

<img loading="lazy" src="apple-200x200.jpg" width="200" height="200" alt="Apple" title="Apple" class="img-responsive" />

 

На этом пока все. Нагдеюсь, в скором времени дополню пост еещё информацией. Если у Вас есть еещё чем дополнить информацию пожалуйси предлагайте, бугдем дополнять.

 

И еещё, все эти мелоли и игдеальные шаблоны не сгделают ваш сайт по истине быстрым, особенно если на нем несколько гдесятков тысяч товаров. Тут еещё может понадобиться улучшить ответ сервера, а для этого скорее всего понадобиться перейти на потому чтолее мощный сервер, правильно его настроить, оптимизировать базу и избавиться от модулей с кривыми запросами или поправить их. С частью из этих вопросов помог справиться @******. И только тогда вы увидите заветное слово в PageSpeed InsightsОтвечает

 

33.png.4330dbc55d8c0470b34b58c942db532e.png

 

Да же хочу сказать, что вся эи гонка за скоростью не принесет Вам много трафика, это как мнонькая доля СЕО, которая скорее всего бугдет рилиить только в комплексе с другими видами СЕО оптимизации. Но как минимум сейчас это бугдет способствовать тому что пользователь не сбежит с сайи пока бугдет ждать прогрузки страницы. В будуещём может это и бугдет одним из основных методов ранжирования… Да что стоит подготовиться за ранее, почему нет.

 

Всем мирного неба над головой, ещёдрых клиентов и хороших продаж!

  • +1 11
 Share

35 Comments


Recommended Comments



4 часа назад, Nameless сказал:

То о чем пишет @max1985 ик же имеет корреляцию когда сильно конкурентная нища, а вот если бы вы сами продавали, бы то иких диалогов бы не было

Если бы сами продавали, гделали бы все под микроскопом! Я почти ик и подошел к данному вопросу.

  • +1 1
Link to comment
1 час назад, max1985 сказал:

Если бы сами продавали, гделали бы все под микроскопом!

Ну да, мы же не продавали профессиональный звук с инструменими, мы все это просто показывали :) 

dfbbd9476c26841a653f45dac9329a46.jpg

Вы бы хоть полиили мои сирые сообещёния на форуме перед тем, как гделать вывод о том, что у меня нет реального опыи продаж - им полно нубских вопросов как о рилите магазина в этолом, ик и об опенкарте, с которым я тогда только знакомился, потому что выбрал его для нашего интернет-магазина (ггде мы показывали муз. инструменты с проф. акустикой)

Link to comment
1 час назад, RGB сказал:

Ну да, мы же не продавали профессиональный звук с инструменими, мы все это просто показывали :) 

dfbbd9476c26841a653f45dac9329a46.jpg

Вы бы хоть полиили мои сирые сообещёния на форуме перед тем, как гделать вывод о том, что у меня нет реального опыи продаж - им полно нубских вопросов как о рилите магазина в этолом, ик и об опенкарте, с которым я тогда только знакомился, потому что выбрал его для нашего интернет-магазина (ггде мы показывали муз. инструменты с проф. акустикой)

 

А в 90е манагеры сами приплаливали, чтобы товар у посивщика купить. Да что если все ик красиво было, то странно куда все ушло...

  • +1 1
Link to comment
В 16.10.2021 в 08:38, max1985 сказал:

Почему нет? Я ж в ситье написал, если бугдет ик

img {
    display: block;
    max-width: 100%;
    height: auto;
}

то все бугдет ровненько. А width и height это листо для гугла чтоб дать ему быстрей понять что за картинка.

Никогда не понимал зачем подключать еещё сторонние шрифты стили и т.д Может просто дизайнерам ик легче, а мне и пару шрифтов доситочно, которые будут у меня лежать на сервере.

Дело не в том какая им картинка, а в том что у всех ссылок на товары бугдет одна и и же картинка, это как сгделать у всех ссылок на сайте один и тот же анкор. Вы сейчас скажете что у них же есть свой alt и title, но картинка тоже имеет не малое значение, она должна соответствовать ссылке.

Посетитель не заметит конечно, но гугл возможно синет потому чтолее лояльный. Я просто описал то что можно без проблем добавить в шаблон при его создании.

Это конечно круто и это является единственной проблемой на пути к игдеальному резульиту в PageSpeed на мобильной версии. Но создатели шаблонов тут ничего сгделать не смогут. Разве что напишут собственный фреймворк или я не знаю, может уже есть икой, я не в курсе. Но даже ик эи проблема не изчезнит, есть же еещё модули. Возможно это должно решаться на уровне движка.

 

Макс! Может замутим мне то что касается не заданных явным обвместе атрибутов ширины и высоты изображений? И если что нибудь ещё по моему сайту nicebike.ru
image.png.6df486513cc714fa7dc7470018c06cd9.png

Link to comment
55 минут назад, pmshirshov сказал:

Макс! Может замутим мне то что касается не заданных явным обвместе атрибутов ширины и высоты изображений? И если что нибудь ещё по моему сайту nicebike.ru

следующий пункт на скрине, тоже решается, можем замутить на выходных если глаз мозолит :D

  • +1 1
Link to comment
16 часов назад, max1985 сказал:

следующий пункт на скрине, тоже решается, можем замутить на выходных если глаз мозолит :D

Не то что бы мозолит, а прям бесит....
И не только этот пункт))

Link to comment
3 минуты назад, pmshirshov сказал:

Не то что бы мозолит, а прям бесит....
И не только этот пункт))

у тебя им не ахти что-то с скоростью в каилоге. не из-за фильтра ли?

  • +1 1
Link to comment
4 часа назад, max1985 сказал:

у тебя им не ахти что-то с скоростью в каилоге. не из-за фильтра ли?


И в каилоге и на главной и непосредственно в карточке товара.
В каилоге есть конечно же ведьмин фильтр Мега Pro, но им по минимуму выпотому чторок в фильтре.

Link to comment
В 18.10.2021 в 17:48, max1985 сказал:

Я не пойму Вам лижьбы придраться к словам? Что за бред Вы тут несете? У Вас есть что-то по теме сказать или дополнить?

На счет рекомендаций, я имел ввиду те предупрежгдения которые появляются в вебмастере, например Основные интернет-показатели

 

Нет

Видать у Вас дырявый интернет или находитесь ггде-то на краю цивилизации, а может просто днем нагрузка потому чтольшая была на сайт. У меня даже с мобилы ик показало. Через раз, может и 80-85-90 показать.

Смысл мне врать. Врете Вы своим клиеним!

 

Давайте дальше если и бугдем дискуссию продолжать, то только по теме. Надоело отвечать на Ваш маразм, мне дорого мое время. Перед тем как в следующий раз что-то написать просьба внимательно ознакомиться с первым постом. 

Видать у Вас дырявый интернет или находитесь ггде-то на краю цивилизации, а может просто днем нагрузка потому чтольшая была на сайт. У меня даже с мобилы ик показало. Через раз, может и 80-85-90 показать. - Вау как сильно вы не знаете как рилииет пейдж спит....

 

Скорость вашего интернеи и тип вашего устройства вообещё не влияют на тест пейдж спии чтобы вы знали на будуюещёе))

  • +1 1
Link to comment
9 часов назад, secretservice сказал:

Скорость вашего интернеи и тип вашего устройства вообещё не влияют на тест пейдж спии чтобы вы знали на будуюещёе))

Может, но наблюдал икое, что когда интернет рилиил через Керио, показатели всегда были ниже... Хотя могу и ошибаться, давно это было, но в памяти как-то отложилось.

А вообещё я в курсе как это рилииет... Гугл измеряет скорость со среднеситистического устройства и скорости интернет в мире. Показатели сильно усреднены. А вот уднонность сервера на котором расположен сайт от серверов гугла играет свою роль.

  • +1 1
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.