Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


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

 

Так как много времени на написание полноценного материала нет, начну с малого и со временем дополню данный материал.

 

И так поехали!

 

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" />

 

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

 

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

 

33.png.4330dbc55d8c0470b34b58c942db532e.png

 

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

 

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

  • +1 11

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 показать.

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

1111.thumb.jpg.b96b88ba6f6a573d7f5059b528e92013.jpg

 

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

Видать у Вас дырявый интернет или находитесь где-то на краю цивилизации, а может просто днем нагрузка большая была на сайт. У меня даже с мобилы так показало. Через раз, может и 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.