Клиентская оптимизация: 10+ способов ускорить фронтенд. Оптимизация сайта скриптов


Скрипты для оптимизации сайтов, скрипт отфильтрует

SEO оптимизация, это одна из самых важных тем, которая привлекает массу внимания веб мастеров и оптимизаторов.

Каждый владелец сайта стремится раскрутить собственный проект и сделать его лучше, и оптимизация (как внутренняя, так и внешняя), являются оптимальными вариантами.

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

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

оптимизации сайтов

Скрипты для оптимизации

 Скрипты для оптимизации распространяются в свободном доступе, и найти их можно на множестве ресурсов в сети.

В данном материале мы представим вам наиболее интересные скрипты:

Скрипт сбора keywirds – один из самых популярных скриптов, который обеспечивает сбор оптимальных ключевых слов для meta тегов.

Используя данный скрипт, вам потребуется указать ключевые запросы, которые будут использоваться в поисковой системе Google, и в дальнейшем из результатов поисковой выдачи будет собираться информация обо всех используемых keywords.

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

оптимизации сайтов

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

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

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

Скрипты для оптимизации

Скрипт сбора SEO информации о сайте – довольно полезный программный код, который предоставляет необходимую информацию для владельцев сайтов. Благодаря данному скрипту, вы сможете отслеживать данные о каждой странице сайта, что является довольно удобным инструментом.

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

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

Советую посетить следующие страницы:— Раскрутка сайта на начальном этапе— Что хотят посетители видеть на сайте— Бизнес идея для дикторов фрилансеров

webtrafff.ru

Оптимизация кода сайта | Продвижение сайтов – Самчук Иван

Поисковая оптимизация кода web-сайта – это раздел SEO, направленный на улучшение удобства использования сайта посетителями и представления данных для анализа поисковыми системами независимо от качества контента сайта и упоминаний о сайте на других ресурсах.Оптимизация кода сайта

Оптимизацию кода можно разделить на два основных раздела: SEO-оптимизация кода и оптимизацию скорости загрузки сайта.

Внимание!!!Перед выполнением любых изменений на сайте, сделайте его полную резервную копию!!!

SEO-оптимизация кода страницы сайта:

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

Оптимизация структуры страницы сайта

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

  • Заманивающая ключевая фраза страницы располагается в блоке <title>Заманивающая ключевая фраза</title>
  • Заманивающее описание информации о странице располагается в блоке <meta name=»description» content=»Заманивающее описание информации о странице «>
  • Самая важная ключевая фраза располагается в теге <h2> как можно ближе к началу страницы.
  • Самая важная информация страницы располагается сразу под заголовком <h2>
  • Заголовки <h3-6> и тексты после этих заголовков используются для привлечения трафика по менее важным (частотным) уточняющим вариантам главной ключевой фразы страницы
  • На странице сайта обязательно должен быть <title>, <meta name=»description» content=»»> и хотя бы один из заголовков (<h2>,<h3>,<h4>,<h5>,<h5> или <h6>)
  • Блоки ссылок, содержащие информацию, которая не соответствует теме страницы или просто не должна попасть в сниппет поисковой выдачи по данной странице, необходимо располагать выше (если смотреть на код страницы, а не на то как это выглядит для посетителя страницы) всех заголовков <h2-6> либо ниже всех заголовков, после заголовка, не соответствующего тематике страницы.
  • Заголовков h2 может быть несколько, хотя, многие оптимизаторы посчитают это заявление бредом, но поисковые системы заявляют, что это не запрещено. Пример использования: сайт Сбербанка.
  • Заголовки h3-6 могут быть выше заголовка h2, либо находиться на странице вообще без заголовков h Пример использования: сайт Авито.
  • Для формирования заголовка сниппета информация берётся из следующих источников в порядке приоритета, начиная с максимального: <title>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>. Если сайт зарегистрирован в Яндекс Каталоге, то заголовок и описание сниппета подтянутся на главную страницу сайта с большим приоритетом, чем информация на сайте. Отменить формирование данного сниппета можно тегом <meta name=»robots» content=»noyaca»/> в блоке <head>.
  • Для формирования описания сниппета, приоритет отдаётся части текста, содержащей текст, наиболее соответствующий ключевой фразе, после соответствующего запросу заголовка <h2-6> и до следующего заголовка h не соответствующего заголовку, либо из блока <meta name=»description» content=»»>
  • Различные поисковые системы руководствуются различными алгоритмами формирования сниппета: Яндекс отдаёт предпочтение контенту в блоке <body>, Google в большинстве случаев формирует сниппет из блоков title и description в блоке <head>.
  • Поисковая система Яндекс, при наличии других вариантов, никогда не сформирует сниппет, заголовок которого дублирует начало описания сниппета.
  • Распространённые знаки, которые разрывают фрагменты текста при формировании сниппета (как заголовка сниппета, так и его описания), записанные в кавычках и через запятую: «.», «|»
  • Распространённые знаки, которые не разрывают фрагменты текста, но уменьшают значимость последующего текста при формировании сниппета (как заголовка сниппета, так и его описания), записанные в кавычках и через запятую: «,», «–», «(», «)», «:»

Оптимизация изображений на сайте:

  • После размещения изображения на сайте, добавьте атрибуты alt и title: <img src=»../foto.jpg» alt=»текст, который появится, если не загрузится картинка» title=»текст, который появится при наведении»>

Защита сайта от воровства контента

Блок, предотвращающий выделение текста на сайте:

<style>html{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}</style>

Скачать

Блок, предотвращающий вызов контекстного меню на странице сайта:

<script>//<![CDATA[document.ondragstart = function() { return false;}function nocontext(e) {return false;}document.oncontextmenu = nocontext;/* ]]> */</script>

Скачать

Увеличение скорости загрузки сайта:

Скорость загрузки сайта – это очень важный фактор ранжирования, и чем сайт загружается быстрее, тем он будет выше в выдаче поисковиков. Для проверки скорости загрузки сайта используйте сервис компании Google на странице //developers.google.com/speed/pagespeed/insights/

Оптимизация CSS:

Для сокращения времени загрузки страницы оптимизируйте таблицу стилей CSS:

  • Скопируйте коды различных страниц вашего сайта внутри блока <body…>…</body>
  • Разместите все коды в одном текстовом редакторе или в Excel
  • Удалите в получившемся документе всё кроме указания классов (.) и айдишников (#) стилей
  • Удалите в таблице стилей все стили, которых не нашлось на страницах сайта
  • Если получилась таблица стилей, которая отображает страницу хуже, чем было до удаления стилей, то добавьте старую версию таблицы стилей к новой версии прямо в браузере, выбрав таблицу стилей на вкладке Sources браузера Гугл хром, вызываемой из контекстного меню сайта пунктом «Просмотреть код» и удаляйте добавленную таблицу по строкам пока чтобы найти строку, отвечающую за необходимый вид страницы.
  • После получения максимально короткого файла удалите переводы строк и пробелы рядом со следующими знаками (в кавычка и через запятую): «{», «}», «,»
  • Удалите из блока <head> ссылку на таблицу стилей
  • Создайте в блоке <head> блок <style>…</style>
  • В блоке <style> разместите текст полученной таблицы стилей

Оптимизация JavaScript:

Оптимизацию кода JavaScript можно произвести и без знания JavaScript! Для этого удаляйте блоки между фигурных скобок разделов function и каждый раз после сохранения изменений наблюдайте за изменениями на сайте. Если изменений не произошло или изменения, которые произошли вас устраивают, переходите к следующему блоку. Если изменения вас не устраивают, восстановите фрагмент из предварительно созданной резервной копии сайта.

Для того, чтобы сократить время загрузки страницы, стоит подгружать скрипты асинхронно, и тогда время загрузки скриптов вообще не повлияет на время загрузки страницы.

Для того чтобы JavaScript загружался асинхронно, необходимо добавить тег defer=»defer» или async=»async» в блок вызова скрипта <script async=»async» src=»example.js»></script>

  • async=»async» – асинхронная загрузка без соблюдения приоритета загрузки файлов JavaScript
  • defer=»defer» – асинхронная загрузка с соблюдением приоритета загрузки файлов JavaScript

Если вы делаете сайт на WordPress, используйте плагин Async JavaScript

Сжатие изображений на сайте:

Для сжатия групп изображений используются сервисы, например, kraken.io

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

  • Нажмите кнопку «файл»
  • Наведите курсор на кнопку «сохранить как» и всплывёт вкладке с выбором формата сохранения
  • Выберите формат изображения
  • Введите имя файла, место сохранения изображения и нажмите кнопку сохранить

Кэширование страниц сайта:

Включите кэширование сайта, добавив блок в начало файла htaccess:

<IfModule mod_expires.c>ExpiresActive OnExpiresByType image/jpg «access 1 year»ExpiresByType image/jpeg «access 1 year»ExpiresByType image/gif «access 1 year»ExpiresByType image/png «access 1 year»ExpiresByType text/css «access 1 month»ExpiresByType text/html «access 1 month»ExpiresByType application/pdf «access 1 month»ExpiresByType text/x-javascript «access 1 month»ExpiresByType application/x-shockwave-flash «access 1 month»ExpiresByType image/x-icon «access 1 year»ExpiresDefault «access 1 month»</IfModule>

Скачать

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

Оптимизация WordPress:

Оптимизация базы данных WordPress

После выполнения всех работ, описанных выше, почистите базу данных, если используете WordPress с помощью плагина WP DB Booster. Данный плагин работает хорошо, но съедает в процессе работы много ресурсов, так что, после выполнения очистки, деактивируйте его.

Настройка плагина W3 Total Cache

Поставьте галочки на следующих пунктах настройки плагина:

Раздел General Settings

  • Page Cache:
  • Validate timestamps:
  • Object Cache:
  • Browser Cache:
  • Verify rewrite rules

После проставления галочек сохраните настройки.

Раздел Page Cache

  • Cache posts page
  • Cache feeds: site, categories, tags, comments
  • Cache SSL (https) requests
  • Don’t cache pages for logged in users
  • Automatically prime the page cache
  • Preload the post cache upon publish events
  • Front page
  • Posts page
  • Post page
  • Blog feed
  • rss2 (default)
  • Handle XML mime type

После проставления галочек сохраните настройки.

Раздел Object Cache

  • Enable caching for wp-admin requests
  • Store transients in database

Раздел Browser Cache

  • Set Last-Modified header
  • Set expires header
  • Set cache control header
  • Set entity tag (ETag)
  • Set W3 Total Cache header
  • Enable HTTP(gzip) compression
  • Prevent caching of objects after settings change
  • Don’t set cookies for static files
  • Do not process 404 errors for static objects with WordPress
  • Set Last-Modified header
  • Set expires header
  • Set cache control header
  • Set entity tag (eTag)
  • Set W3 Total Cache header
  • Enable HTTP(gzip) compression
  • Prevent caching of objects after settings change
  • Disable cookies for static files
  • Set Last-Modified header
  • Set expires header
  • Set cache control header
  • Set entity tag (ETag)
  • Set W3 Total Cache header
  • Enable HTTP(gzip) compression
  • Set Last-Modified header
  • Set expires header
  • Set cache control header
  • Set entity tag (ETag)
  • Set W3 Total Cache header
  • Enable HTTP(gzip) compression
  • Prevent caching of objects after settings change
  • Disable cookies for static files
  • Referrer Policy

После проставления галочек сохраните настройки.

Скачать

prodvijenie-saijtov.ru

Как снизить нагрузку на сервер и повысить скорость работы сайта — Webasyst

Скорость работы сайта складывается из двух составляющих:

  1. Скорость формирования HTML-кода страниц сайта (время ответа сервера)
  2. Скорость загрузки дополнительных элементов страниц: изображений, CSS-стилей, шрифтов и т. п.

1. Как ускорить формирование HTML-кода страниц (уменьшить время ответа сервера)

Скорость ответа сервера удобно проверять с помощью специальных онлайн-сервисов, например, WebPagetest. Аналогичные средства («консоль разработчика») есть также в современных браузерах.

Отключите режим отладки

В разделе «Настройки» приложения «Инсталлер» отключите настройку «Режим отладки (debug mode)». Эта настройка используется разработчиками при создании и тестировании программных продуктов и внесении изменений в темы дизайна. В режиме отладки отключается кеширование, которое призвано экономить серверные ресурсы. Чтобы перейти к экономной работе, отключите режим отладки.

Оптимизируйте тему дизайна

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

Не все темы дизайна работают одинаково эффективно даже в оригинальном состоянии. Для сравнения попробуйте использовать легкую тему дизайна «Дефолт» со стандартными настройками.

Оптимизируйте плагины

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

Если нет возможности снизить нагрузку настройками плагинов, поищите в магазине Webasyst более качественную замену медленно работающим плагинам.

Измените серверные настройки или смените хостинг

Обратитесь к администрации хостинга с просьбой повысить изменить серверные настройки, чтобы ускорить работу сайта.

Если восстановление или смена темы дизайна, оптимизация работы плагинов, изменение серверных настроек невозможны или неприемлемы либо не привели к существенному ускорению работы сайта, стоит перенести скрипты Webasyst на заведомо более производительный сервер. Перед переносом убедитесь в том, чтобы новый сервер соответствовал системным требованиям для работы Вебасиста, а также всех установленных в нем приложений, плагинов и виджетов.

2. Как ускорить загрузку дополнительных элементов страниц

Подключите CDN

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

Уменьшите размер изображений

Даже с использованием CDN страницы сайта могут загружаться медленно, если вы используете очень большие изображения. Оптимизируйте размер изображений с помощью графического редактора или измените настройки формирования эскизов в приложениях Webasyst (например, в Shop-Script).

support.webasyst.ru

Клиентская оптимизация: 10+ способов ускорить фронтенд

ноябрь 16 , 2016

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

В этой статье я расскажу про 10+ способов оптимизировать веб-приложение с точки зрения фронтенд-разработчика. Также предложу Вам инструменты, которые помогут делать это веселее и приятнее.

Если говорить в общем, то вся оптимизация фронтенда сводится к двум типам задач. Первая - это ускорение передачи данных по сети. Состоит из двух подпунктов: уменьшение количества запросов к серверу и уменьшение объема передаваемых данных. И второе - ускорение работы приложения в браузере. А теперь подробнее.

1. Склеивайте js-скрипты и css-стили

Делайте как можно меньше запросов к серверу. js и css-код прекрасно подходят для этой задачи. Забудьте о приемах десятилетней давности, когда на сайте лежало два десятка js-файлов, и на каждой странице подгружались 5-6 из них. В идеале у Вас должен быть один js-файл и 1 css-файл. И этого достаточно.

Сейчас экономия пары десятков килобайт не стоит того, чтобы сделать один запрос вместо 20-ти. Грузите весь код одним разом, только позаботьтесь, чтобы на разных страницах выполнялись отдельные участки javacsript-ов. К тому же помните о кэше: один раз скачав файл, пользователь сохранит его в кэш браузера, и уже на следующих страницах Вашего сайта статика мгновенно загрузится из кэша, а не с удаленного сервера.

2. Сжимайте javascript, стили и html-код

Несмотря на то, что мы сделали всего один запрос на сервер, не стоит забывать, что объем данных тоже имеет значение. Минифицирование кода позволяет уменьшить объем данных до 40-50%, что никогда не будет лишним. Особенно это актуально для мобильных устройств.

Для минификации есть масса онлайн-сервисов, например, minifycode.com. Но гораздо удобнее использовать инструменты сборки фронтенда, например, grunt, gulp или webpack. На тему сборки с помощью gulp на webdevkin-е есть одна статья из целой серии, посвященной сборке фронтенда в веб-приложениях.

3. Оптимизируйте изображения

Часто нам не нужны 10-мегапиксельные фото на сайте. Мало того, что им можно уменьшить разрешение, так еще и дополнительно сжать картинки с минимальной потерей качества. Как правило, для веба супер-качества и не нужно. Также конвертируйте картинки из png в jpg, если Вам не нужна прозрачность.

Помочь в этом могут как графические редакторы вроде фотошопа (в них даже есть специальная опция "сжать для веба"), так и те же инструменты сборки, например плагины gulp-imagemin и imagemin-pngquant.

4. Делайте спрайты изображений

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

Вариантов сделать спрайты масса:

  • - руками (фууу)
  • - в онлайн-инструментах вроде instantsprite.com (нормально)
  • - инструментами сборки (вообще круто)
Впрочем, я умею только первыми двумя, до третьего способа не дает добраться лень :-)

5. Применяйте lazy load - ленивую загрузку изображений

Термин lazy load относится и к скриптам, и к стилям, но чаще всего с ним упоминают изображения. Мода на огромные лэндинги на десяток экранов и с мегабайтами картинок не проходит. Грузить эти тонны данных проблема, какой бы быстрый интернет у нас ни был.

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

Хотя кажется, что реализация ленивой загрузки сложна, на самом деле есть море плагинов, которые сделают всю работу за Вас. Например, плагин lazy load для jquery требует всего лишь подключить библиотеку, заменить в теге img атрибут src на data-original и запустить плагин одной строчкой кода. Усилий минимум - эффект значительный. Рекомендую.

6. Не ленитесь делать превью изображений

Капитанский совет, но просто удивительно, сколько людей пренебрегают этим простым правилам. Смотришь на красивую галерею на сайте с ajax-подгрузкой картинок и думаешь "какие молодцы". А потом замечаешь, что превьюшки на слайдере - это те же здоровенные картинки, только уменьшенные css-ом. И думаешь "ну и на хрена это все?"

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

7. Отдавайте статику с разных доменов/поддоменов

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

8. Подключайте js-код или файлы в конце страницы

А именно перед закрывающим тегом body. В первую очередь браузер должен загрузить контент, а только потом js. Конечно, если у Вас Single Page Application, то профита от этого совета не будет. Но не расстраивайтесь, если Вы занимаетесь SPA, то у Вас и так все хорошо :-)

9. Подключайте стили динамически (но осторожно)

Совет из разряда "на свой страх и риск". Попробуйте подгрузить стили уже после отрисовки голого html. Ускорение загрузки страницы будет, возможно, мизерное. А вот Ваш html может быть настолько страшен, что без стилей пользователям хватит четверти секунды, чтобы сбежать с сайта. В общем, пробуйте и решайте, нужно ли Вам это.

10. Избавляйтесь от лишних dom-элементов

Операции с dom - это одна из самых тяжелых частей работы браузера. Не делайте таблицы там, где достаточно двух плавающих div-ов. Не лепите лишние span-ы для красоты. Не делайте обертки для оберток контейнеров, если конечно, этого не требует javascript-логика.

В общем, делайте проще и стремитесь к минимализму.

11. Используйте нативный javascript вместо jquery

Не будем делать вид, что нам позарез нужен jquery для манипуляции dom. Просто мы к нему привыкли. Гораздо удобнее написать $('#myDiv'), чем document.getElementById('myDiv'). Но времена поддержки седьмых IE прошли, и если для Вас действительно критична оптимизация, переходите на нативный js - выигрыш по скорости работы с dom будет в десятки и сотни раз.

12. Не бойтесь навешивать id элементам dom для быстрого доступа к ним из javascript-кода

Верстайте только на классах, а айдишники оставьте для js. Это максимально быстрый способ получить доступ к нужному элементу. К тому же Вы скоро перестанете путаться в приоритетах применения стилей и всегда будете знать: если на этот элемент навешан id, значит javascript от него что-то хочет. А если навешан класс, то что-то хочет css.

13. Используйте css-анимации вместо javascript

Иногда очень прикольно запилить хитрую анимацию на js, но нужно всегда помнить, что это большая нагрузка на браузер. Не говоря уже о лишнем js-коде. CSS3 давно в почете и можно не стесняться пользоваться transitions и keyframes.

Конечно, стоит брать во внимание поддержку этих свойств нужными браузерами. Часто анимации носят декоративный, дополнительный характер. Если в браузере пользователя css-transitions не поддерживаются, то он просто увидит статичную картинку. Но если реализация анимации крайне необходима, то стоит дублировать ее javascript-ом.

14. Избегайте тяжелых операций с dom при скроллинге/прокрутке страницы и разберитесь с throttle и debounce

Наши любимые клиенты очень любят смотреть, как при изменении размеров окна на экране происходит волшебство: меняются местами блоки, а из-за края монитора выпрыгивают зайчики. К сожалению, восторженные директора и менеджеры при этом не слышат, как начинает завывать старенький кулер на процессоре и не видят, как скачет расход памяти в браузере. А ведь далеко не у всех посетителей сайта на руках macBook с core i7 и 8 Гб памяти.

Конечно, некоторую долю преобразований можно сделать, не вмешиваясь в dom, исключительно стилями и media query. Но часто приходится подключать и тяжелую артиллерию в виде старого доброго js. И чтобы при этом у Вас не взвыл браузер и посетитель сайта, разберитесь с такой темой: Как и зачем использовать throttle и debounce

15. Изучайте ajax-запросы и анализируйте передачу данных с сервера

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

Обсуждайте с коллегами-бэкендщиками обмен данных между клиентом и сервером. Обговаривайте формат данных и api. Стройте REST-сервис вместе. В конце концов, именно Вы знаете, какие данные нужны на клиенте.

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

Откажитесь от XML - как ни странно, он еще довольно часто используется.

Если проект это позволяет, переносите логику с сервера на клиент. Получайте с сервера сырые данные и обрабатывайте их как Вам нужно на клиенте - это будет максимально быстро. underscore.js и lodash.js помогут в этом деле и очень разнообразят Вам жизнь. Работать с данными интереснее, чем с кнопочками и инпутами.

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

16. Найдите и изучите подходящие инструменты

Изучите один или несколько инструментов сборки проектов. Бродите по закоулкам developer tools Вашего браузера - там невероятно много интересного :-) PageSpeed Insights от Google даст Вам пищу для размышлений и рекомендации к действию.

17. Останавливайтесь вовремя

Оптимизация скорости это как рефакторинг кода - процесс бесконечный. Всегда найдется, что улучшить еще чуть-чуть. А потом еще. Ну и вот последнее и тогда-то точно все будет зашибись.

Мой совет - останавливайтесь вовремя. Достаточно хорошо и быстро лучше, чем идеально, но долго. Экономия еще нескольких Кб не стоит четырех часов Вашего времени или еще хуже, нервов Ваших коллег и клиентов.

Золотую середину найти сложно, и у каждого она своя. Но нужно как минимум о ней помнить и стараться достичь.

На этом все. С интересом почитаю в комментариях Ваш опыт по оптимизации фронтенда и другим философским вопросам. Велкам!

Как Вам статья? Оцените!

Понравилась статья? Поделись с другими!

Подписка на новые статьи

Подписаться

Please enable JavaScript to view the comments powered by Disqus.

webdevkin.ru

SEO для ленивых - скрипт автоматической оптимизации|Всё гениальное просто

Здравствуйте, дорогие друзья! Все великие изобретения - дети, рождённые от союза лени и изворотливости ума. И SEO - не исключение! В ежедневной работе блоггера огромное количество мелочей. требующих самого пристального внимания. Многие вещи приходится делать вручную.

Как хотелось бы время и усилия, потерянные в монотонной рутине, направить на самообразование и свободное творчество, общение с близкими и прогулки по любимым местам родного города!

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

Хорошо, что Интернет позволяет преодолевать расстояния и языковые барьеры! Это кратчайший и комфортнейший путь к новым знаниям, впечатлениям, знакомствам.

Некоторое время назад я начал общение и переписку с замечательным блоггером и программистом из Индии. Его имя - Мукунд.

Мой индийский приятель создал и выложил для общего пользования революционный скрипт, который автоматизирует сразу несколько важных процессов. По оригинальности и ассортименту заложенных функций данная разработка не уступает самодвижущейся печи из сказки "По щучьему велению":-))

Этот сценарий больше расcчитан для блогов Blogger, но (по словам своего создателя) может использоваться и для WordPress -  так сказано в оригинальной статье.

Вот функции, которые выполняет этот скрипт:

1. Оптимизирует иллюстрации, автоматически прописывая alt и title (беря информацию из имени изображения)

2. Закрывает внешние ссылки от индексации тегом "nofollow"

3. Открывает внешние ссылки в новой вкладке (прописывая атрибут target="_blank")

Фантастика - скажете вы? Есть только один способ это проверить - установить скрипт в шаблон своего блога!

У данного скрипта есть ещё одно несомненное преимущество. Часть специалистов SEO сомневаются в целесообразности использования имени изображений для alt и title.

 Именно для таких скептиков Мукунд разделил этот скрипт на четыре части:1. Прописывает target="_blank"2. Добавляет rel="nofollow"3. Вставляет в изображения "alt"4. Создаёт "title"

Установить SEO скрипт в шаблон блога1. Заходим в Панель управления -- Дизайн -- Изменить HTML

2. Сохраняем резервную копию шаблона на свой компьютер

3. Отмечаем флажком "Расширить шаблоны виджета"

4. С помощью комбинации Ctrl + F находим закрывающий тег </body>

5. Копируем код SEO сценария

6. Вставляем код перед </body>

7. Сохраняем шаблон

8. Наслаждаемся вредным кофе, или полезным пивом, пока новый SEO скрипт, высунув от усердия язык, делает за нас нашу работу

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

Правда, для меня так и осталось загадкой - каким образом ссылки закрываются от индексации! Ещё один момент - в основном блоге, при установке скрипта, перестал работать контент-слайдер. Но это - мелочи, не способные омрачить радость бесплатной эксплуатации великого SEO  скрипта для ленивых!

Все попытки критиковать сценарий, или намерения открыть SEO дискуссию рекомендую реализовать под статьёй разработчика - гугловский переводчик легко решает проблемы, созданные Вавилонским Столпотворением (вот, на всякий случай, плагин для Google Chrome)

Все благодарные и восхищённые комментарии принимаются вместе с "лайками" и "плюсами" в конце этой статьи.

Ваш Retliff

Сергей Мазураш aka Retliff Блоггер со стажем. Стиль публикаций отличается простотой изложения и весёлым, ироничным подходом к самым серьёзным проблемам. Cпециализируется на создании и продвижении бесплатных блогов на платформе Blogger. Твитнуть

www.in-blog.com

SEO-верстка сайта: оптимизация html, css и js кода под поисковые системы

Оптимизация js и css

Для начала разберемся из css и js. Для чего нужна оптимизация css и js?

Около 50% пользователей уходят из сайта, если он грузится больше 3 секунд и при каждой дополнительной секунде конверсия сайта падает на 7%. Также скорость загрузки сайта является одним из факторов ранжирования.

Первое из чего нужно начать, это послушаться рекомендаций Google. Css и js код не должен содержаться в html коде сайта, его нужно вынести в отдельные файлы. Исключением являются небольшие инлайновые стили с 1-2 значениями. Число подключаемых файлов нужно максимально уменьшить, в идеальном случае оставив по одному подключаемому css и js файле. Подключение файлов js следует перенести в конец страницы (перед отображением страницы, браузер должен выполнить ее синтаксический анализ и если при этом он обнаруживает внешний скрипт, он должен его загрузить, а это лишний цикл операций, который замедляет показ страницы.

Также для ускорения загрузки js, css файлов и картинок желательно использовать кеширование и сжатие в формат GZIP.

SEO-верстка сайта: оптимизация html кода или как сверстать так, чтоб потом не переделывать

Для правильной будущей оптимизации html кода рассмотрим все теги и как они влияют на SEO.

Блок <head>:

<title> - указывает название страницы, которое размещается во вкладке браузера и в поисковых системах. Самый важный тег, в плане влияния на ранжирование сайта.

<description>- позволяет задать описание страницы, которое появляется в поисковой выдаче под названием. Имеет значительно меньшее влияние на ранжирование, но помогает повысить CTR (отношение числа кликов кчислу показов) страницы. Если мета-тег description заполнен, это не гарантирует, что в выдаче будет показано именното, что там написано, так как поисковые системы могут взять описание из контента. Но все же лучше настроить генерацию тега и не думать, какую часть текста ПС возьмут для описания.

<keywords> - указывает поисковым системам, по каким запросам релевантная страница. После появления этого тега, ему придали большое влияние на ранжирование страниц. Оптимизаторы могли спокойно продвигать страницу слюбым товаром интернет-магазина, например, по запросу «скачать реферат по истории» или по другим темам, которые давали сайту посетителей, но не клиентов. Сейчас влияние данного тега на продвижение точно не известно иочень многие его просто игнорируют, в том числе чтоб не навредить странице.

<meta name="robots" content="index/noindex, follow/nofollow"> (берется одно из значений, index или noindex, follow или nofollow) — запрет на индексацию страницы (noindex) и запрет на индексацию исходящих ссылок на странице (nofollow) поисковыми системами. Значение index и follow используются вместе со значениями запрета индексации, так как по умолчанию индексация страниц и ссылок разрешена. Использовать данный тег следует осторожно, чтоб не увидеть через некоторое время нулевой трафик из поисковых систем.

<link rel="canonical" href="..." /> - позволяет привязать несколько одинаковых страниц по содержанию, но с разными URL, к одной странице, для улучшения ее рейтинга. В большинстве случаевиспользуется для динамических страниц, на которых размещен одинаковый контент, например, страницы сортировки вкаталоге товаров или при работе с блогом, где одна статья может находиться в разных разделах и иметь разные URL.

<link rel='prev' href='...' /> и <link rel='next' href='...'/> - теги позволяют указать на страницах пагинации предыдущую и следующую страницы для поисковых систем, если материал разбит на несколько частей и находится на разных урлах.

Блок <body>:

<h2> - <h6> - заголовки на странице. Тег <h2> следует использовать 1 раз, как и <title> он указывает основное содержание страницы, но имеет меньшее влияние на ранжирование в поисковой выдаче. Как правило, для интернет-магазинов в теге <h2> указывается на страницах категорий и товаров названия этих категорий итоваров, для информационных страниц — название, которое заинтересует читателя плюс, по возможности, ключевые слова.

Теги <h2> - <h6> должны соблюдать логическую структуру. Заголовок <h2> содержать заголовки <h3>,в которых заголовки <h4> и т.д. Использовать их желательно только в текстовом содержании страницы (например, для разбития основного контента на странице, но не для блоков, которые выводятся на всех страницах сайта). Если взять во внимание, что тег <h2> помогает повысить значение слов при ранжировании, заключить в него весь текстна сайте и поправить с помощью стилей, чтоб его можно было читать, то никакого преимущества это не даст, а только пойдет во вред такой странице.

<strong>, <b>, <em> - предназначены для акцентирования внимания на некоторых фразах и словах в описании страницы, статьи, новости и т.д. (в том числе повышают значимость этих слов при ранжировании). Не следует использовать их для верстки тех элементов страницы, которые повторяются, например, на всех товарах. Для этого лучше применять css. Хотя и точно не известно, имеет ли влияние повторяющейся на всех страницах сайта слово или фраза, внутри, например, тега <strong>, но лучше использовать теги по их назначению. Думаю ПС это оценят.

<table> - также предназначен в первую очередь для размещения в текстовом контенте страницы. Позволяет сделать текст более интересным для прочтения, чем повышает доверие ко всей странице от поисковые систем (такое же действие оказывают списки, картинки, видео).

<ul>, <li>, <ol>, <dl>, <dd>, <dt> - списки, которые используются для создания меню сайта и в основной части на странице для структурирования текстовой информации.

<img> - картинки на странице. Описание картинки нужно помещать в атрибуты alt=”...” иtitle=”...”, которые помогут при ранжировании в поиске по картинках. Также на позицию картинки в выдаче оказывает влияние, если название файла картинки соответствует ее описанию.

<noindex> - указывает ПС Яндекс содержимое документа, которое не нужно индексировать, например, служебная информация. Применять нужно очень осторожно и в достаточно редких случаях.

<div> - собственно тег для верстки сайта, на SEO не влияет.

<br> - тег для переноса текста, но не для изменения размещения блоков. Но это уже больше для валидности верстки, а не для оптимизации. На оптимизацию сайта не влияет.

<p> - задает текстовый абзац для основного контента на сайте (например, статьи или описания товара, категории в интернет-магазине). Желательно также применять в основном для главного содержания отдельной страницы.

<span> - строчный елемент, не оказывающий влияния на SEO. Удобен в многих случаях для использования вместе с css в не основном контенте страницы для замены тегов выделения и заголовков.

<header> - шапка сайта.

<footer> - подвал сайта.

<a> - тут нужна отдельная статья. И не одна.

Может какой-то тег и пропустил… но значит он менее важен. Также не были учтены часть новых тегов html5, такие как <article>, <aside>, <nav>, <section>.

Если расположить html теги по мере влияния на ревалентность ключевых слов, то выйдет где-то так: title, h2-h6,strong, description, b, em, p, keywords, ul->li & ol->li.

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

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Название страницы</title> <meta name="description" content="Описание страницы" /> <meta name="robots" content="index, follow"> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <body> <header> <a href="/"><img src="internet-magazin.jpeg" alt="интернет-магазин" title=”интернет-магазин” class=”logo”></a> <ul> <li>Категория 1</li> <li>Категория 2</li> <ul> <li>Категория 2.1</li> <li>Категория 2.2</li> </ul> <li>Категория 3</li> </ul> </header> <div> <h2>Заголовок страницы</h2> <p>Основной контент с применением тегов <h3>-<h6>, <strong>, <b>, <em>, <br>, <table>. </p> </div> <div> <span>Боковой блок с дополнительной информацией.</span> <div> <footer> ... </footer> <script type="text/javascript" src="js.js"></script> </body> </html>

Что еще нужно учесть при SEO-верстке сайта

  • Плохое влияние на страницу может оказать большое количество ошибок валидации. Не желательно использовать пустых тегов и css, js файлов, которые не используются на странице. Чем легче будет код, тем легче поисковым системам его проанализировать.
  • Не стоит использовать флеш и фреймы, которые очень не дружелюбны с поисковыми системами. Также поисковые системы не распознают текст, который нарисован с помощью картинки.
  • Кроссбраузерность сайта влияет на поведение пользователей и заставляет их покидать сайт не получив нужную информацию или не сделав покупку. Как следствие ухудшаются поведенческие факторы, которые сказываются на оптимизации всего сайта.
  • Наличие мобильной версии сайта или его адаптивность стала фактором ранжирования и, как и кроссбраузерность, позволяет уменьшить показатель отказов и увеличить конверсию сайта на мобильных устройствах. Google начал учитывать наличие мобильной версии в 2015, году (mobile-friendly), а Яндекс в 2016, назвав алгоритм ранжирования «Владивосток».
  • Основной контент на странице должен быть размещен в html коде ближе к началу, так он будет более ревалентный с точки зрения поисковой системы.
  • Контент не должен быть спрятан с помощью display:none.
  • Если с помощью тегов можно повысить значимость ключевого слова, то также можно и получить отрицательный эффект, если некоторые теги будут пересекаться, например 1. h2-h6 & strong, b, em 2. h2-h6 & a href=…3. strong, b, em & a href=…

Заключение

Заглянув на страницы поисковых систем можно увидеть ряд ошибок, связанных с версткой сайта, в том числе ошибки валидации. Но здесь следует понимать, что они ставят перед собой совсем другие цели. SEO оптимизированная вёрстка требуется сайтам, одним из основных источников трафика которых — поисковые системы и какие бы крутые ссылки не ссылались на сайт, без хорошей оптимизации кода о первым позициях можно не мечтать.

epages.su

Оптимизация CSS стилей в WordPress / webentrance.ru

Оптимизация CSSСледующая проблема, которая требует решения, как и в случае изображений, это сокращение кода и оптимизация CSS стилей и JS скриптов.

Оптимизация позволит, по мнению сервиса Developers Google, сократить объем данных, ускорить их загрузку и обработку.

Содержание:

Если CSS-файлов на сайте много, то для оптимизации необходимо объединить их в один, минимизировать их, то есть убрать все пробелы, все комментарии, сделать код самым минималистичным, чтобы уменьшить загрузку с сервера в браузер.

Оптимизация CSS с помощью плагина

В случае WordPress существуют специальные плагины, которые совмещают возможность объединения и минификации скриптов и оптимизации стилей. Один из них, это —  JS & CSS Script Optimizer.

Находим его в каталоге WordPress, скачиваем, устанавливаем и активируем.

Плагин JS & CSS Script Optimizer

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

Результат объединения в этом случае зависит от конкретной темы и для некоторых из них плагин может вообще не подойти.

Другие темы, наоборот, могут уже содержать опцию объединения и уменьшения css стилей и скриптов на сайте.

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

Настройка плагина JS & CSS Script Optimizer

Открываем настройки плагина JS & CSS Script Optimizer. Здесь для эффективной оптимизации надо выполнить последовательно следующие действия:

Настройки плагина

  • Плагин включаем — Enable plugin, директорию для хранения кэша файлов и путь к нему оставляем как есть.
  • Далее ставим галочку Ignore external JavaScript, то есть игнорировать внешние скрипты с других доменов.
  • Упаковать Java скрипты, это решение на ваше усмотрение, потому что они могут перестать работать.

Настройки плагина оптимизации

  • Затем идут пункты объединения скриптов в футере и хедере или перенести их в футер, тоже на усмотрение в каждом отдельном случае по своему.
  • Далее включаем опции оптимизации CSS, только для тех скриптов, которые находятся на вашем домене, объединить файлы стилей, минифицировать их и затем сохраняем настройки.

Опции оптимизации CSS

  • Затем в поле Ignore next CSS допускается внести список файлов CSS, которые не нужно объединять.

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

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

Обновляем ресурс, все выглядит нормально, проверяем все страницы, ничего не испортилось и даже работает.

Проверяем исходный код, в нем можно видеть объединенный файл CSS стилей и объединенные Java скрипты.

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

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

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

Посмотрим, что изменилось на сайтах сервисов developers.google.com и tools.pingdom.com после оптимизации.

Можно заметить, что число запросов уменьшилось и уменьшилось также время загрузки объединенных CSS файлов и Java скриптов.

То есть результат после оптимизации css достаточно хороший  и меньше осталось проблем, которые еще нужно решить.

Другие записи по теме:

webentrance.ru