Одной из самых быстрой и простой оптимизации производительности сайта является уменьшение времени загрузки изображений. Минимизацию изображений можно сделать с помощью таких инструментов, как ImageOptim и TinyPNG, использование URI и спрайтов данных, а также использование отложенной загрузки изображений (lazyload).

Lazy-load или «ленивая» загрузка — это способ отображения контента на сайте, когда элементы загружаются по мере необходимости (асинхронно), а не сразу вместе с запрашиваемой страницей.

Когда браузер «видит» у элемента атрибут src, то делает запрос по указанному в нём адресу, что увеличивает время полной загрузки документа. Соответственно, чем больше внешних ресурсов синхронно подключается к странице, тем медленнее она загружается. Чтобы избежать множества одновременных запросов и оптимизировать скорость загрузки, используется техника lazy-load.

Подробнее

Фильтры phx, позволяют манипулировать значением тега, прямо внутри шаблона.

Ну зачем они нужны?

Все довольно просто, модификаторы phx значительно облегчают жизнь разработчику сайта, например есть сайт и необходимо только на главной странице показывать слайдер, ну или любой зыбучий банер. В шаблоне сайта достаточно прописать [[*id:is=`1`:then=`[[$slider]]`]], где 1 – это id главной страницы, а $slider – чанк с html кодом слайдера… и т.д. и т.п. только глупцы создают новый шаблон и копируют туда весь html-код страницы, ради пары строчек слайдера/банера. Но все мы такими были, поэтому не отчаивайся и внедряй phx в разработку.

Подробнее

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

Как же подключить шрифт к странице? Существует несколько способов:

Подробнее

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

Подробнее

Если у вас индексируются внутренние адреса страниц и со слешем и без него (‘/’) в конце, т.е. например:

www.site.ru/catalog/
и
www.site.ru/catalog

 

то поможет исправить ситуацию следующий код для .htaccess:

 

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !\..{1,10}$
RewriteCond %{REQUEST_URI} !(.*)/$
RewriteRule ^(.*)$ http://www.site.ru/$1/ [L,R=301]

 

Вариант выше может и не заработать. Поэтому можно попробовать использовать другой вариант:

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !\..+$
RewriteCond %{REQUEST_URI} !/$
RewriteRule (.*) http://www.site.ru/$1/ [R=301,L]

 

Еще варианты:

#убираем слэш в конце

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} ^(.+)/$
RewriteRule ^(.+)/$ /$1 [R=301,L]

 

#добавляем слэш в конце

RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !(.*)/$
RewriteRule ^(.*[^/])$ $1/ [L,R=301]

 

В CMS Modx Revolution для борьбы с множественным слешем можно создать плагин с таким содержимым:

 

<?php switch ($modx->event->name)
{
case 'OnWebPageInit':
        if (stristr($_SERVER['REQUEST_URI'], '//'))
        {
                $g = preg_replace("|[//\s]+|is", "/", $_SERVER['REQUEST_URI']);
                $modx->sendRedirect($g);
        }
        break;
}

И отметить в системных событиях – OnWebPageInit

 

 

Чтобы сделать редирект с адреса index.php на корень сайта, достаточно в файле .htaccess добавить строки:

RewriteCond %{REQUEST_URI} ^(.*)/{2,}(.*)$
RewriteRule (.*) %1/%2 [R=301,L]

Если вы нуждаетесь в дополнительной производительности, и все равно хотите использовать jQuery, то можете попробовать провести оптимизацию селекторов. Тест с использованием time и timeEnd методов консоли браузера в тексте данной статьи.

 

Подробнее

(Обновлено 26.06.2018)

Данный скрипт идеально подойдет для форм при создании сайтов-визиток, каталогов, лендингов, где нужно отправить простую форму с прикрепленным файлом.

В скрипте используется проверка заполненности обязательных полей с помощью скрипта jquery.validation с последующей отправкой сообщения на e-mail администратора без перезагрузки страницы с помощью технологии ajax.

Демо-страницу можно посмотреть – тут.

Подробнее