Ръководство за начинаещи за оптимизация на уебсайтове

С любезното изображение на Pexels.

Аз съм начинаещ и успях да постигна 99/100 в класацията за оптимизация на Google. Ако мога да го направя, можете и вие.

Ако сте като мен, харесвате доказателство. Ето тук са резултатите от Google PageSpeed ​​Insights на Google за hasslefreebeats, уебсайт, който поддържам и наскоро прекарах известно време в оптимизиране:

Екранна снимка на резултата ми от PageSpeed ​​Insights.

Доста съм горд с тези резултати, но искам да подчертая, че преди няколко седмици нямах представа как да оптимизирам уебсайт. Това, което днес трябва да споделя с вас, е просто резултат от цял ​​куп гугъл и отстраняване на проблеми, болки, които искам да ви пощадя.

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

В никакъв случай не съм експерт, но съм уверен, че ако приложите техниките по-долу, ще видите резултати!

Снимки

С любезното изображение на Pexels (и със сигурност оптимизиран от Medium).

Като начинаещ уеб разработчик, изображенията не бяха нещо, на което някога съм обръщал голямо внимание. Знаех, че добавянето на висококачествени изображения към уебсайта ми ще изглежда по-професионално, но никога не спрях да разглеждам ефектите, които биха имали върху времето за зареждане на страницата ми.

Основното, което направих, за да оптимизирам снимките си, беше да ги компресирам.

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

Услугата, която използвах за компресиране на моите изображения, беше Optimizilla, лесен за използване уебсайт, в който качвате вашите изображения, изберете нивото на компресия, което искате и след това изтеглете компресираното изображение. Видях, че размерът намалява с 70% нагоре за някои от моите ресурси, което върви ДЪЛГО към по-бързо време за зареждане.

Optimizilla едва ли е единственият избор за нуждите ви от компресия на изображение. Някои самостоятелни софтуер с отворен код, който можете да използвате, е ImageOptim за Mac или FileOptimizer за Windows. Ако предпочитате да компресирате с помощта на инструменти за изграждане, има Gulp и WebPack плъгини, които трябва да направят трика. Няма значение толкова колко правите, стига да го правите. Увеличението на производителността си заслужава минималните усилия.

В зависимост от вашия случай на използване, може да си струва да разгледате и формата на вашите файлове. Най-общо JPG ще бъде по-малък от png. Основната разлика в това дали използвам едно или друго е дали имам нужда от прозрачност зад изображението: Ако имам нужда от прозрачност, използвам png, в противен случай използвам jpg. Можете да се потопите по-дълбоко в плюсовете и минусите на двете тук.

Освен това Google излезе с доста приятен уеб формат, но тъй като той все още не се поддържа във всички браузъри, колебая се да го използвам. Внимавайте за по-нататъшна подкрепа в бъдеще!

Не съм направил повече от компресиране на изображенията си, за да получа резултатите, които ви показах по-горе, но ако искате да оптимизирате допълнително, тук е страхотна статия.

Видео

Снимка на Terje Sollie от Pexels.

Не съм използвал видеоклипове в нито един от настоящите си проекти, така че ще се докосна само докрай, тъй като не чувствам, че съм най-добрият ресурс за това.

Това е една от онези ситуации, в които вероятно бих позволил на професионалистите да вдигнат тежко. Vimeo предлага отлична платформа за хостинг на видеоклипове, където те ще влошат качеството на видеото за по-бавни връзки и компресират вашите видеоклипове, за да оптимизират производителността.

Можете също така да хоствате видеоклиповете си в Youtube и след това да използвате този инструмент youtube-dl, за да ги изтеглите от Youtube, докато конфигурирате видеоклиповете според нуждите на вашия уебсайт.

За други възможни решения вижте Brightcove, Sprout или Wistia.

Gzip

Вземи го? Zip? С любезното изображение на Pexels.

Нямах представа какво е gzipping, когато първоначално разгърнах уебсайта си.

Накратко, gzip е формат за компресиране на файлове, който повечето браузъри разбират и който може да работи зад кулисите, без да се изисква от потребителя дори да знае, че се случва.

В зависимост от това къде хоствате приложението си, gzipping може да бъде толкова просто, колкото да прехвърлите конфигурационен превключвател, за да определите, че искате вашият сървър да gzip файлове, когато ги изпраща. В моя случай уебсайтът ми се хоства на Heroku, което не предоставя тази опция.

Както се оказва, има пакети, които да добавят компресия изрично във вашия сървър код, което ви позволява да извлечете ползите от gzipping в замяна само на няколко реда код. Използвайки този междинен софтуер за компресия, успях да намаля размера на пакетите си Javascript и CSS със 75%.

Струва си да проверите дали хостинг услугата ви предлага опция gzip. Ако това не стане, погледнете как да добавите gzipping към вашия код на страната на сървъра.

Минимизирането

Минимизиран ананас любезност на Pexels.

Минимизирането е процесът на премахване на ненужните символи от кода, без да се засяга неговата функционалност (бяло пространство, символи от нов ред и т.н.). Това ви позволява да намалите размера на файла, който пренасяте през интернет. Също така е полезно за обсебване на вашия код, което затруднява хакерите да откриват слабите точки на сигурността.

В наши дни минимирането обикновено се прави като част от процеса на изграждане с Webpack или Gulp или някаква алтернатива. Тези инструменти за изграждане обаче могат да имат крива на учене, така че ако търсите по-лесни алтернативи, Google препоръчва HTML-Minifier за HTML, CSSNano за CSS и UglifyJS за Javascript.

Browser-кеширане

Не съвсем как браузърът съхранява данни, но е възможно най-близо. С любезното съдействие на Pexels.

Съхраняването на статични файлове в кеша на браузъра е много ефективен начин за увеличаване на скоростта на уебсайта ви, особено при връщане на посещения от същия клиент. Докато Google не ми каза, не бях наясно, че някои от ресурсите ми не са кеширани по подходящ начин поради липсващи заглавия в HTTP отговора, който изпращах от моя сървър.

Веднага след като се зареди моята начална страница, на моя сървър се отправя заявка да получа данни за куп песни, които след това се предават в музикален плейър. Не актуализирам песните на този уебсайт много често, така че нямам нищо против, ако някой потребител дойде на моя уебсайт и види същите песни от последния път, когато ги е посетил, ако това ще накара страницата ми да се зареди малко по-бързо за тях.

За да получа повишаване на производителността, добавих следния код към обекта на отговор на моя сървър (Express / Node сървър):

res.append ("Кеш-контрол", "max-age = 604800000");
res.status (200) .json (отговор);

Всичко, което правя тук, е да добавя заглавка за контрол на кеш към моя отговор, която казва, че след една седмица (в милисекунди) ресурсите трябва да бъдат изтеглени отново. Ако актуализирате тези файлове по-често, по-късата максимална възраст може да бъде добра идея.

Мрежа за разпространение на съдържание

Реално изображение на CDN, с любезното съдействие на Pexels.

Мрежата за разпространение на съдържание или CDN е мрежа, която позволява на потребителите от цял ​​свят да бъдат географски по-близо до вашето съдържание. Ако потребителят трябва да зареди голямо изображение от Япония, но сървърът ви е в Съединените щати, това ще отнеме повече време, отколкото ако имате сървър в Токио.

CDN ви позволява да се възползвате от куп прокси сървъри, разположени по целия свят, което позволява вашето съдържание да се зарежда по-бързо, независимо от мястото, където се намира крайният ви потребител.

Искам да отбележа, че успях да постигна резултатите, които видяхте по-горе, преди да внедря CDN - просто исках да ги спомена, тъй като никоя статия за оптимизацията на уебсайтове не би била пълна, без да ги споменавам. Налагането на едно от тези лоши момчета на вашия уебсайт е наложително, ако планирате да имате световна аудитория.

Някои популярни CDN включват CloudFront и CloudFlare.

Разни

Ето още няколко съвета, за да изцедите още повече сок:

  • Оптимизирайте уебсайта си, за да заредите първо съдържание над „кратката“, за да увеличите възприеманата ефективност на вашия сайт. Един често срещан начин да направите това е чрез мързеливо зареждане на изображения, които не се показват на целевата страница.
  • Освен ако приложението ви не зависи от Javascript за изобразяване на HTML, например уебсайт, създаден с Angular или React, вероятно е безопасно да заредите вашите скриптове в долната част на тялото на вашия HTML файл. Това обаче може да повлияе на вашето време за интерактивност, така че НЕ е техника, която бих препоръчал за всяка ситуация.

В заключение

Това е само върхът на айсберга, когато става въпрос за оптимизиране на вашия уебсайт. В зависимост от размера на трафика, който получавате, и услугата, която предоставяте, бихте могли да имате затруднения в ефективността в много различни области. Може би имате нужда от повече сървъри, може би имате нужда от сървър с повече RAM, може би вашият троен вложен модул може да използва рефакторинг - кой знае?

Няма уеднаквен размер, когато става въпрос за ускоряване на вашия сайт и в крайна сметка ще трябва да вземете най-добрите решения за вашата ситуация въз основа на измервания. Не губете времето си за оптимизиране на нещо, което не се нуждае от оптимизиране. Анализирайте ефективността на вашия сайт, за да намерите затруднения, след което атакувайте конкретно тези.

Надявам се, че сте намерили нещо полезно в тази статия! Както споменах, имам още много да науча в тази област. Ако имате допълнителни съвети или препоръки, моля, оставете ги в коментарите по-долу!

Ако тази статия ви е харесала, моля, дайте й няколко хлопки и разгледайте:

  • Инструменти, за които бих искал да знам, когато започнах да кодирам
  • Инструменти, за които бих искал да знам, когато започнах да кодирам: Revisited

Също така, дайте ми последване в Twitter.