<?xml version="1.0"?>
<rss version="2.0"><channel><title/><link>https://opencartforum.com/en/blogs/260-blog-vladelca-magazina/</link><description/><language>en</language><item><title>&#x41C;&#x435;&#x43B;&#x43A;&#x438;&#x435; &#x43D;&#x435;&#x434;&#x43E;&#x447;&#x435;&#x442;&#x44B; &#x43F;&#x438;&#x441;&#x430;&#x442;&#x435;&#x43B;&#x435;&#x439; &#x448;&#x430;&#x431;&#x43B;&#x43E;&#x43D;&#x43E;&#x432; &#x438; &#x43A;&#x430;&#x43A; &#x438;&#x445; &#x438;&#x441;&#x43F;&#x440;&#x430;&#x432;&#x438;&#x442;&#x44C;</title><link>https://opencartforum.com/blogs/entry/444-melkie-nedochety-pisateley-shablonov-i-kak-ih-ispravit/</link><description><![CDATA[<p>
	В последнее время на форуме все чаше стали обсуждать качество продаваемых шаблонов. Вот и я решил внести свою лепту, может разработчики шаблонов увидят этот пост и внесут корректировки в новых релизах. И так как многие из нас не будут обновлять шаблоны на уже рабочих сайтах, они смогут внести корректировки по представленным примерам самостоятельно, ну или с помощью кого либо.
</p>

<p>
	 
</p>

<p>
	Так как много времени на написание полноценного материала нет, начну с малого и со временем дополню данный материал. Все что будет описано ниже внедрено на собственном сайте <a href="https://sextoys.com.ua/ru" rel="external nofollow">тут</a>.
</p>

<p>
	 
</p>

<p>
	И так поехали!
</p>

<p>
	 
</p>

<p style="text-align:center;">
	<img alt="11.png.7734009ca8bff8c2b3e56e1f8630fd24.png" class="ipsImage ipsImage_thumbnailed" data-fileid="684237" data-ratio="17.90" style="height:auto;" width="732" data-src="https://opencartforum.com/storage/attachment/monthly_2021_10/11.png.7734009ca8bff8c2b3e56e1f8630fd24.png" src="https://opencartforum.com/applications/core/interface/js/spacer.png" /></p>

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

<p>
	 
</p>

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

<pre class="ipsCode prettyprint lang-php prettyprinted"><span class="pln">$data</span><span class="pun">[</span><span class="str">'products'</span><span class="pun">][]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> array</span><span class="pun">(</span></pre>

<p>
	 
</p>

<p>
	Вставляем:
</p>

<pre class="ipsCode prettyprint lang-php prettyprinted"><span class="str">'width'</span><span class="pln">  </span><span class="pun">=&gt;</span><span class="pln"> $this</span><span class="pun">-&gt;</span><span class="pln">config</span><span class="pun">-&gt;</span><span class="kwd">get</span><span class="pun">(</span><span class="pln">$this</span><span class="pun">-&gt;</span><span class="pln">config</span><span class="pun">-&gt;</span><span class="kwd">get</span><span class="pun">(</span><span class="str">'config_theme'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="str">'_image_product_width'</span><span class="pun">),</span><span class="pln">
</span><span class="str">'height'</span><span class="pln">  </span><span class="pun">=&gt;</span><span class="pln"> $this</span><span class="pun">-&gt;</span><span class="pln">config</span><span class="pun">-&gt;</span><span class="kwd">get</span><span class="pun">(</span><span class="pln">$this</span><span class="pun">-&gt;</span><span class="pln">config</span><span class="pun">-&gt;</span><span class="kwd">get</span><span class="pun">(</span><span class="str">'config_theme'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> </span><span class="str">'_image_product_height'</span><span class="pun">),</span></pre>

<p>
	 
</p>

<p>
	А в самом шаблоне делаем та:
</p>

<pre class="ipsCode prettyprint lang-html prettyprinted"><span class="pln">&lt;img loading="lazy" src="</span><span class="pun">&lt;?</span><span class="pln">php echo $product</span><span class="pun">[</span><span class="str">'thumb'</span><span class="pun">];?&gt;</span><span class="pln">" width="</span><span class="pun">&lt;?</span><span class="pln">php echo $product</span><span class="pun">[</span><span class="str">'width'</span><span class="pun">];</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">" height="</span><span class="pun">&lt;?</span><span class="pln">php echo $product</span><span class="pun">[</span><span class="str">'height'</span><span class="pun">];</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">" alt="</span><span class="pun">&lt;?</span><span class="pln">php echo $product</span><span class="pun">[</span><span class="str">'name'</span><span class="pun">];</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">" title="</span><span class="pun">&lt;?</span><span class="pln">php echo $product</span><span class="pun">[</span><span class="str">'name'</span><span class="pun">];</span><span class="pln"> </span><span class="pun">?&gt;</span><span class="pln">" class="img-responsive" /&gt;</span></pre>

<p>
	 
</p>

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

<pre class="ipsCode prettyprint lang-css prettyprinted"><span class="pun">.</span><span class="pln">img-responsive </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">display</span><span class="pun">:</span><span class="pln"> block</span><span class="pun">;</span><span class="pln">
    </span><span class="kwd">max-width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100%</span><span class="pun">;</span><span class="pln">
    </span><span class="kwd">height</span><span class="pun">:</span><span class="pln"> auto</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></pre>

<p style="text-align:center;">
	 
</p>

<p>
	Можно тут конечно обойтись и без контроллера, но это будет как некоторые говорят - не кошерно <img alt=":D" data-emoticon="" height="20" src="https://opencartforum.com/storage/smiles/emoticons/test_biggrin.png" srcset="https://opencartforum.com/storage/smiles/emoticons/biggrin@2x.png 2x" title=":D" width="20" /></p>

<p style="text-align:center;">
	 
</p>

<p style="text-align:center;">
	 
</p>

<p style="text-align:center;">
	 
</p>

<p>
	<img alt="22.png.137ebfc0aceae8f45bcc23974c956c7c.png" class="ipsImage ipsImage_thumbnailed" data-fileid="684241" data-ratio="15.68" style="height:auto;" width="727" data-src="https://opencartforum.com/storage/attachment/monthly_2021_10/22.png.137ebfc0aceae8f45bcc23974c956c7c.png" src="https://opencartforum.com/applications/core/interface/js/spacer.png" /></p>

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

<p>
	 
</p>

<p>
	Было так:
</p>

<pre class="ipsCode prettyprint lang-css prettyprinted"><span class="pun">@</span><span class="pln">font-face </span><span class="pun">{</span><span class="pln">
                </span><span class="kwd">font-family</span><span class="pun">:</span><span class="pln"> </span><span class="str">'Open Sans'</span><span class="pun">;</span><span class="pln">
                </span><span class="kwd">font-display</span><span class="pun">:</span><span class="pln">auto</span><span class="pun">;</span><span class="pln">
                </span><span class="kwd">src</span><span class="pun">:</span><span class="pln"> local</span><span class="pun">(</span><span class="str">'Open Sans'</span><span class="pun">),</span><span class="pln"> local</span><span class="pun">(</span><span class="str">'OpenSans'</span><span class="pun">),</span><span class="pln"> </span><span class="kwd">url</span><span class="pun">(</span><span class="str">'fonts/opensans.woff2'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'woff2'</span><span class="pun">),</span><span class="pln"> </span><span class="kwd">url</span><span class="pun">(</span><span class="str">'fonts/opensans.woff'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'woff'</span><span class="pun">),</span><span class="pln"> </span><span class="kwd">url</span><span class="pun">(</span><span class="str">'fonts/opensans.ttf'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'truetype'</span><span class="pun">);</span><span class="pln">
                </span><span class="kwd">font-weight</span><span class="pun">:</span><span class="pln"> </span><span class="lit">400</span><span class="pun">;</span><span class="pln">
                </span><span class="kwd">font-style</span><span class="pun">:</span><span class="pln"> normal</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></pre>

<p>
	 
</p>

<p>
	Стало так:
</p>

<pre class="ipsCode prettyprint lang-css prettyprinted"><span class="pun">@</span><span class="pln">font-face </span><span class="pun">{</span><span class="pln">
                </span><span class="kwd">font-display</span><span class="pun">:</span><span class="pln"> swap</span><span class="pun">;</span><span class="pln">
                </span><span class="kwd">font-family</span><span class="pun">:</span><span class="pln"> </span><span class="str">'Open Sans'</span><span class="pun">;</span><span class="pln">
                </span><span class="kwd">font-display</span><span class="pun">:</span><span class="pln">auto</span><span class="pun">;</span><span class="pln">
                </span><span class="kwd">src</span><span class="pun">:</span><span class="pln"> local</span><span class="pun">(</span><span class="str">'Open Sans'</span><span class="pun">),</span><span class="pln"> local</span><span class="pun">(</span><span class="str">'OpenSans'</span><span class="pun">),</span><span class="pln"> </span><span class="kwd">url</span><span class="pun">(</span><span class="str">'fonts/opensans.woff2'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'woff2'</span><span class="pun">),</span><span class="pln"> </span><span class="kwd">url</span><span class="pun">(</span><span class="str">'fonts/opensans.woff'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'woff'</span><span class="pun">),</span><span class="pln"> </span><span class="kwd">url</span><span class="pun">(</span><span class="str">'fonts/opensans.ttf'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'truetype'</span><span class="pun">);</span><span class="pln">
                </span><span class="kwd">font-weight</span><span class="pun">:</span><span class="pln"> </span><span class="lit">400</span><span class="pun">;</span><span class="pln">
                </span><span class="kwd">font-style</span><span class="pun">:</span><span class="pln"> normal</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></pre>

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

<pre class="ipsCode prettyprint lang-html prettyprinted"><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"preload"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"opensans.woff2"</span><span class="pln"> </span><span class="atn">as</span><span class="pun">=</span><span class="atv">"font"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"font/woff2"</span><span class="pln"> </span><span class="atn">crossorigin</span><span class="pun">=</span><span class="atv">"anonymous"</span><span class="tag">&gt;</span></pre>

<p>
	 
</p>

<p>
	3. Почти у всех шаблонов есть поле для вставки счетчиков, но смысл его добавлять если этот ф-л уже есть в самом движке. Другое дело если б это было так, как реализовано в модуле от <a contenteditable="false" data-ipshover="" data-ipshover-target="https://opencartforum.com/profile/678128-spectre/?do=hovercard" data-mentionid="678128" href="https://opencartforum.com/profile/678128-spectre/" rel="">@spectre</a>. Это бы избавило от лагов которые появляются от Аналитики и других подобных счетчиков и чатов.
</p>
<iframe allowfullscreen="" data-embedauthorid="678128" data-embedcontent="" data-embedid="embed1897248454" scrolling="no" style="height:493px;max-width:502px;" data-embed-src="https://opencartforum.com/files/file/7492-sp-seo-remarketing-all-in-one-pro-elektronnaya-torgovlya-google-ga4-i-yandeks-dinamicheskiy-remarketing-google-facebook-conversions-api-vk-mytarget-fid-dlya-google-merchant-i-facebook-catalog-google-otzyvy-tiktok-retailrocket-esputnik/?utm_source=opencartforum&amp;utm_medium=categorypage&amp;utm_campaign=category&amp;do=embed"></iframe>

<p>
	 
</p>

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

<pre class="ipsCode prettyprint lang-html prettyprinted"><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"/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"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"/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"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">media</span><span class="pun">=</span><span class="atv">"screen"</span><span class="pln"> </span><span class="tag">/&gt;</span></pre>

<p>
	 
</p>

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

<p>
	Тогда еще решил этот вопрос костылем, создал физические файлы на основе такого запроса и прописал их в шаблоне. Сейчас сменил на шаблон CyberStore от <a contenteditable="false" data-ipshover="" data-ipshover-target="https://opencartforum.com/profile/685219-29aleksey/?do=hovercard" data-mentionid="685219" href="https://opencartforum.com/profile/685219-29aleksey/" rel="">@29aleksey</a> где это реализовано более менее, но тоже есть и тут не мало минусов, по крайней мере лучшего не нашел.
</p>

<p>
	 
</p>

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

<pre class="ipsCode prettyprint lang-html prettyprinted"><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"lazyload"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"lazyload.png"</span><span class="pln"> </span><span class="atn">data-src</span><span class="pun">=</span><span class="atv">"apple-200x200.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Apple"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"Apple"</span><span class="pln"> </span><span class="tag">/&gt;</span></pre>

<p>
	 
</p>

<p>
	Лучше сделать так:
</p>

<pre class="ipsCode prettyprint lang-html prettyprinted"><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">loading</span><span class="pun">=</span><span class="atv">"lazy"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"apple-200x200.jpg"</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"200"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"200"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Apple"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"Apple"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"img-responsive"</span><span class="pln"> </span><span class="tag">/&gt;</span></pre>

<p>
	 
</p>

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

<p>
	 
</p>

<p>
	И еще, все эти мелочи и идеальные шаблоны не сделают ваш сайт по истине быстрым, особенно если на нем несколько десятков тысяч товаров. Тут еще может понадобиться улучшить ответ сервера, а для этого скорее всего понадобиться перейти на более мощный сервер, правильно его настроить, оптимизировать базу и избавиться от модулей с кривыми запросами или поправить их. С частью из этих вопросов помог справиться <a contenteditable="false" data-ipshover="" data-ipshover-target="https://opencartforum.com/profile/14042-yoda/?do=hovercard" data-mentionid="14042" href="https://opencartforum.com/profile/14042-yoda/" rel="">@Yoda</a>. И только тогда вы увидите заветное слово в <span>PageSpeed Insights</span> – <span style="font-size:24px;"><span style="color:#27ae60;">Отвечает</span></span>
</p>

<p>
	 
</p>

<p style="text-align:center;">
	<img alt="33.png.4330dbc55d8c0470b34b58c942db532e.png" class="ipsImage ipsImage_thumbnailed" data-fileid="684252" data-ratio="35.09" style="height:auto;" width="855" data-src="https://opencartforum.com/storage/attachment/monthly_2021_10/33.png.4330dbc55d8c0470b34b58c942db532e.png" src="https://opencartforum.com/applications/core/interface/js/spacer.png" /></p>

<p>
	 
</p>

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

<p>
	 
</p>

<p>
	Всем мирного неба над головой, щедрых клиентов и хороших продаж!
</p>
]]></description><guid isPermaLink="false">444</guid><pubDate>Fri, 15 Oct 2021 13:26:00 +0000</pubDate></item></channel></rss>
