Майстер-клас iCamp 2015. Вадим Гук “Як зробити загрузку сайту за 1 секунду. Досягаємо результату 100 в google page speed” Сайт: http://icamp.lviv.ua/ FB: bit.ly/LIMCFace

1. Майстер-клас на тему:
Як зробити загрузку сайту за 1 секунду.
Досягаємо результату 100 в Google Page Speed.
Доповідач: Вадим Гук
hukvadim@gmail.com
vk.com/gukvadim
facebook.com/gukvadim
lp-pro.org

3. Давайте з вами
познайомимось

4. ХТО З ВАС ВЕРСТАЛЬЩИК?

5. ХТО ВЖЕ ЗАЙМАЄТЬСЯ ПИТАННЯМ
ПРИШВИДЧЕННЯ САЙТУ?

6. ХТО ЗАРАЗ РОРОЗБЛЯЄ САЙТ?

7. Чому загрузка сайту є
дуже важлива?

8. В нас є декілька секунд, щоб
зацікавити нашого клієнта!

9. А якщо в ці декілька секунд
йде тільки загрузка сайту?

10. СКІЛЬКИ МИ ВТРАЧАЄМО
КЛІЄНТІВ?

11. В 2006 році зробили дослідження!
Amazon.com через свою загрузку сайту
втрачали:
$2.5 млн збитків на рік!

12. Статистика з дослідження:

13. Ви можете сказати, що це гігант.
В мене зовсім інший рівень.
В мому бізнесі все не так страшно!

14. Уявіть, що з тим самим б’юджетом
на рекламу ви зможете здобути
в два раза більше клієнтів!
Тепер для вас ця тема стане важлива?

15. Який йде процес при
завантаженні сайту?

17. Процес завантаження сайту:

18. ?
ЩО ВИКЛИКАЄ ПРОБЛЕМУ
ПОВІЛЬНОЇ ЗАГРУЗКИ САЙТУ

19. Уособлення мрій клієнтів, або як
Понти вбивають бізнес.
Приклад: landing.kiev.ua
Взяв виключно в якості розгляду!
Ніякої реклами чи антиреклами в думках я не маю.

20. Вигляд з комп’ютера:

21. Вигляд з OperaMini:

22. Статистика загрузки:

23. Хороший wi-fi: 3.81 секунди
Показ хоч якогось тексту.

24. 3G: 11.35 секунди
Показ хоч якогось тексту (загрузки)

25. 3G: 11.34 секунди
Показ хоч якогось тексту (загрузки)

26. Знайомимось з
Google Page Speed

27. Як його знайти:

28. Як його знайти:

29. Як його знайти:

31. Чому не завжди варто його слухати
Google Page Speed ?

32. Пріорітет №1: 100 в Google Page Speed (html)
Посилання для перегляду:
http://goo.gl/ApAX9E

33. Хороший Wi-fi: 0.54 секунд

34. 3G: 0.7 секунд

35. Пріорітет №2: Найкраща швидкість (php)
Посилання для перегляду:
http://goo.gl/V2CeNP

36. Хороший Wi-fi: 0.57 секунд

37. 3G: 0.59 секунд

38. Наскільки буде зручно редагувати
html і php сайт
?

39. Ви тут щось зрозумієте?
html сайт.

40. Якась зручна або моя адмінка:
php сайт.

41. Як саме вам досягнути такого
результату
?

42. Список конкретний дій:
1. Зменшуйте кількість HTTP-запитів (пікдлючених файлі).
2. Використовувати кеш браузера.
3. Використовуйте Gzip – стискання.
4. Скорочуйте ваш css, javascript, html код.
5. По можливості використовуйте CDN для загруки (шрифтів, скріптів і тд).
6. Всі картинки, стилі, скріпти, iframes, відео підключайте асинхронно.
7. Оптимізовуйте ваші картинки не маштабуйте їх на сайті.

43. 1. Зменшуйте кількість HTTP-
запитів (пікдлючених файлі).
http://vadimguk.lviv.ua/else/poland/speed.php

44. 1. Зменшуйте кількість HTTP-
запитів (пікдлючених файлі).
http://landing.kiev.ua

45. 2. Використовувати кеш браузера.
Прописується в файлі: .htaccess

46. 3. Використовуйте Gzip – стискання.
Прописується в файлі: .htaccess

47. 4. Скорочуйте ваш css, javascript, html код.
Найдіть свої сервіси для цих задач.
Можливий список сервісів:
Css:
http://cssminifier.com/
http://csscompressor.com/
Javascript:
http://jscompress.com/
html:
https://htmlcompressor.com/compressor/

48. 5. По можливості використовуйте CDN для
загруки (шрифтів, скріптів і тд).
Приклад CDN підключення:

49. 5. По можливості використовуйте CDN для
загруки (шрифтів, скріптів і тд).
Хостінг (сервер) CDN сервери

50. 6. Всі картинки, стилі, скріпти, iframes,
відео підключайте асинхронно.
https://github.com/pazguille/aload

51. 6. Всі картинки, стилі, скріпти, iframes,
відео підключайте асинхронно.
Асинхронність – це відкладена загрузка.

52. 6. Всі картинки, стилі, скріпти, iframes,
відео підключайте асинхронно.

53. 6. Всі картинки, стилі, скріпти, iframes,
відео підключайте асинхронно.

54. 6. Всі картинки, стилі, скріпти, iframes,
відео підключайте асинхронно.
Асинхронність потребує CriticalCss.

55. 6. Всі картинки, стилі, скріпти, iframes,
відео підключайте асинхронно.
CriticalCss – що ти за фрукт?
Css стилі, які використовують в першому блоці.
Вони прописуються між тегами <head> </head>

56. 6. Всі картинки, стилі, скріпти, iframes,
відео підключайте асинхронно.
Прекрасний код для підключення javascript:

57. 7. Оптимізовуйте ваші картинки не
маштабуйте їх на сайті.
Оригінальна картинка -> Зменшуємо під блок -> Очищуємо в TinyPng

58. 7. Оптимізовуйте ваші картинки не
маштабуйте їх на сайті.
6 * 120 = 720 кб
6 * 43 = 258 кб
720 – 258 = 462 кб
Завантажили не потрібних
462 кб

59. В мене вже є Landing Page на Joomla, wordpress,
як мені пришвидчити його загрузку?

60. Скільки часу у вас цей сайт?
Чи приносить він вам дохід?

61. Майстер-клас на тему:
Як зробити загрузку сайту за 1 секунду.
Досягаємо результату 100 в Google Page Speed.
Доповідач: Вадим Гук
hukvadim@gmail.com
vk.com/gukvadim
facebook.com/gukvadim
lp-pro.org
Посилання на файли з майстер-класу:
https://goo.gl/sDh9FA