{"id":543,"date":"2014-02-21T11:49:09","date_gmt":"2014-02-21T10:49:09","guid":{"rendered":"http:\/\/vm.piszki.pl\/prowadzenie-bloga-cz%c4%99%c5%9b%c4%87-1-strona-techniczna"},"modified":"2014-03-25T08:06:40","modified_gmt":"2014-03-25T07:06:40","slug":"prowadzenie-bloga-cz%c4%99%c5%9b%c4%87-1-strona-techniczna","status":"publish","type":"post","link":"https:\/\/vm.piszki.pl\/?p=543","title":{"rendered":"Prowadzenie bloga, cz\u0119\u015b\u0107 1 – Strona techniczna"},"content":{"rendered":"

Motto: Czy koniecznie musz\u0119 robi\u0107 wszystko sam?<\/p>\n

Przez ten kr\u00f3tki okres istnienia blogu, opr\u00f3cz przygotowywania tre\u015bci go wype\u0142niaj\u0105cych, musia\u0142em szybko i sprawnie opanowa\u0107 stron\u0119 techniczn\u0105 tego przedsi\u0119wzi\u0119cia. Musz\u0119 przyzna\u0107, \u017ce ju\u017c samo prowadzenie bloga, wci\u0105gn\u0119\u0142o mnie r\u00f3wnie mocno, co pisanie blog notek. Dla mnie, jako informatyka, by\u0142o to ca\u0142kiem ciekawe wyzwanie (wcze\u015bniej nie interesowa\u0142o mnie np. co to jest SEO).  Tak jak gdzie\u015b tutaj wspomina\u0142em, ju\u017c kiedy\u015b robi\u0142em przymiarki do \u201cblogowania\u201d. Dlatego wyb\u00f3r platformy WordPress, kt\u00f3r\u0105 dawno temu testowa\u0142em, by\u0142 dla mnie oczywisty. Dzisiejszy WordPress, to cudowne narz\u0119dzie, kt\u00f3re przemieni \u201czwyk\u0142ego\u201d cz\u0142owieka w do\u015bwiadczonego webmastera. Przeogromny zbi\u00f3r wtyczek, pozwoli rozwi\u0105za\u0107 ka\u017cdy problem lub spe\u0142ni\u0107 ka\u017cd\u0105 potrzeb\u0119 (to samo dotyczy \u201csk\u00f3rek\u201d). W moim przypadku, nie zdecydowa\u0142em si\u0119 na \u017caden hosting zewn\u0119trzny, blog w ca\u0142o\u015bci stoi na moim Synology DS213J<\/a> u mnie w domu, na zwyk\u0142ym (niesymetrycznym) \u0142\u0105czu internetowym (kabl\u00f3wka). Ju\u017c samo to okaza\u0142o si\u0119 sporym wyzwaniem, jak sprawi\u0107, aby strona otwiera\u0142a si\u0119 w sensownym czasie? Dodatkowym ograniczeniem jest procesor jaki jest zamontowany w NAS, mimo \u017ce jest bardzo wydajny (a ma tylko 1Ghz), to niestety jest to procesor jedno korowy. A serwuje nie tylko stron\u0119 WWW, opr\u00f3cz tego robi to, do czego NAS zosta\u0142 stworzony, serwuje pliki i ca\u0142\u0105 reszt\u0119 (wspomnijmy te\u017c o 512MB RAM!). Brzmi dramatycznie? Ale nie jest a\u017c tak \u017ale!<\/p>\n

\"wordpress-520x245\"<\/a><\/p>\n

Mimo, \u017ce platformy zewn\u0119trzne na kt\u00f3rych mo\u017cna uruchomi\u0107 w\u0142asnego bloga, s\u0105 o wiele lepiej wyskalowane pod wzgl\u0119dem wydajno\u015bci, to my\u015bl\u0119, \u017ce moje do\u015bwiadczenie i porady dotycz\u0105ce \u201cprzy\u015bpieszania\u201d, znajd\u0105 i tam zastosowanie (zawsze mo\u017cna to przetestowa\u0107). Wspomn\u0119 te\u017c o tym, \u017ce nie zdecydowa\u0142em si\u0119 na u\u017cycie paczki z WordPressem przygotowanej przez Synology, ale w sumie tylko z jednego powodu. Narzuca ona adres blogu w schemacie piszki.pl\/blog a mnie interesowa\u0142 adres blog.piszki.pl. Dodatkowo instaluj\u0105c WordPressa we w\u0142asnym zakresie, dostajemy mo\u017cliwo\u015b\u0107 aktualizacji go w rytmie jego wyda\u0144 a nie w rytmie aktualizacji NASa. Za to baza danych jest jak najbardziej z \u201cpaczki\u201d. <\/p>\n

Podstawow\u0105 kwesti\u0105 jest wyb\u00f3r \u201csk\u00f3rki\u201d, czyli szaty graficznej naszego blogu. Koniecznie musimy wybra\u0107 jedn\u0105 z tych nowoczesnych, potrafi\u0105cych si\u0119 automatycznie przeskalowa\u0107 na mniejsze ekrany (tablety i smartfony). Jak wida\u0107 na dole tej strony, ja zdecydowa\u0142em si\u0119 na darmow\u0105 sk\u00f3rk\u0119 Yoko firmy Elmastudio i jestem z tego wyboru ca\u0142kowicie zadowolony (jest szeroko u\u017cywana i mo\u017cna znale\u017a\u0107 do niej sporo ciekawych modyfikacji). Gdy ju\u017c mamy skonfigurowany blog, za\u0142adowane pierwsze notki, mo\u017cemy przyst\u0105pi\u0107 do pierwszych \u201ctest\u00f3w\u201d wydajno\u015bciowych.<\/p>\n

Podstawowe testy szybko\u015bci otwierania strony mo\u017cna wykona\u0107 na darmowej stronie http:\/\/tools.pingdom.com\/fpt<\/a> :<\/p>\n

\"blog1\"<\/a><\/p>\n

Strona ta, mimo \u017ce darmowa, przechowuje dane historyczne naszych test\u00f3w! Mo\u017cemy dzi\u0119ki temu por\u00f3wna\u0107 skuteczno\u015b\u0107 naszych pr\u00f3b w odchudzaniu i przy\u015bpieszaniu naszego bloga.<\/p>\n

\"blog2\"<\/a><\/p>\n

Kolejnym narz\u0119dziem do analizy strony jest oczywi\u015bcie Google PageSpeed Insight<\/a> (do kt\u00f3rego jeszcze b\u0119dziemy wraca\u0107). Narz\u0119dzie to opr\u00f3cz przeprowadzenia analizy, sugeruje rozwi\u0105zania i kierunki optymalizacji. Nie nale\u017cy si\u0119 jednak w 100% kierowa\u0107 tymi wskazaniami, jak si\u0119 szybko oka\u017ce, najbardziej zwalniaj\u0105 renderowanie strony wszystkie wtyczki i kody kt\u00f3rych producentem jest samo Google, a w kt\u00f3re bardzo szybko obro\u015bnie nasz blog. Podstawow\u0105 kwesti\u0105 jest zmniejszenie \u201cwagi\u201d strony www. Jak zawsze najci\u0119\u017csze s\u0105 obrazki do\u0142\u0105czane do post\u00f3w. Testowa\u0142em sporo wtyczek kt\u00f3re automatycznie odchudzaj\u0105 i optymalizuj\u0105 obrazki \u0142adowane razem z postami. Jak si\u0119 okaza\u0142o, najwi\u0119kszym problemem jest brak w dystrybucji linuksa, jak\u0105 tak naprawd\u0119 jest Synology DSM, podstawowych narz\u0119dzi umo\u017cliwiaj\u0105cych manipulacje na obrazkach. Nawet pos\u0142u\u017cenie si\u0119 iPKG<\/a> nie rozwi\u0105zuje problemu. Po d\u0142u\u017cszych poszukiwaniach znalaz\u0142em jednak rozwi\u0105zanie. To wtyczka do WordPressa o nazwie WP Smush.it<\/a>. Smush to narz\u0119dzie pozostaj\u0105ce pod egid\u0105 Yahoo<\/a>, kt\u00f3re s\u0142u\u017cy do bezstratnej optymalizacji obrazk\u00f3w i nie wymaga jakichkolwiek lokalnych bibliotek b\u0105d\u017a narz\u0119dzi! Je\u015bli u\u017cywamy zewn\u0119trznego programu do przygotowywania post\u00f3w (tak jak ja to robi\u0119) to obrazki s\u0105 optymalizowane ju\u017c w trakcie \u0142adowania postu do bloga. W innym wypadku, co jaki\u015b czas r\u0119cznie w bibliotece mo\u017cemy wyzwoli\u0107 optymalizacj\u0119. Jak wida\u0107 na poni\u017cszym obrazku, smush.it zredukowa\u0142 za\u0142\u0105czane do tego postu obrazki o kilka kilobajt\u00f3w. Niby nie wiele, ale kilka tu, kilka tam i z 2MB robi si\u0119 1MB, a to ju\u017c jest r\u00f3\u017cnica zauwa\u017calna po stronie czytelnika.<\/p>\n

\"blog6\"<\/a><\/p>\n

Jak ju\u017c wspomnia\u0142em, DS213J pod wzgl\u0119dem sprz\u0119towym nie jest najsilniejsz\u0105 maszyn\u0105. Ka\u017cdorazowe przygotowanie do wy\u015bwietlenia ca\u0142ej strony w PHP, gdy kto\u015b na ni\u0105 wchodzi, jest dla niego bardzo obci\u0105\u017caj\u0105ce (co wp\u0142ywa na szybko\u015b\u0107 wy\u015bwietlania). Dlatego kolejn\u0105 wtyczk\u0105 jak\u0105 nale\u017cy zainstalowa\u0107 w WordPressie jest W3 Total Cache<\/a>. To ju\u017c jest bardzo rozbudowane narz\u0119dzie. Robi w zasadzie dwie rzeczy, \u201ckompresuje\u201d pliki html, css, java script (opcja minify) oraz wst\u0119pnie renderuje strony www. Kto\u015b kto wchodzi na naszego bloga, otrzymuje tak naprawd\u0119 wst\u0119pnie przygotowan\u0105 (skompresowan\u0105 i zoptymalizowan\u0105) stron\u0119 rezyduj\u0105c\u0105 w cache. Nie ma sensu tutaj opisywa\u0107 dok\u0142adnie konfiguracji tej wtyczki, tu<\/a> i tu<\/a> mo\u017cna o tym poczyta\u0107, ze swojej strony dodam, \u017ce nie ma sensu kierowa\u0107 si\u0119 wskazaniami dotycz\u0105cymi wykorzystania cache przegl\u0105darki, jaki proponuje ustawi\u0107 PageSpeed Insight. Najlepsze ustawienia wygl\u0105daj\u0105 tak:<\/p>\n

\"blog5\"<\/a><\/p>\n

Dlaczego tylko 3600 sekund? Ano dlatego, \u017ce przecie\u017c chcemy aby zmiany w naszym blogu by\u0142y widoczne dla ludzi go czytaj\u0105cych prawie \u201cod razu\u201d? Trzeba znale\u017a\u0107 z\u0142oty \u015brodek pomi\u0119dzy tym co \u201cle\u017cy\u201d u u\u017cytkownika w cache przegl\u0105darki a tym, co chcemy aby zobaczy\u0142 po wej\u015bciu na stron\u0119 naszego bloga! W tym miejscu wspomn\u0119 jeszcze tylko o ostatnim kluczowym parametrze, w sekcji Minify, cz\u0119\u015bci odpowiedzialnej za Java Script, nale\u017cy koniecznie ustawi\u0107 typ operacji na non-blocking. Na pocz\u0105tku nie ma to a\u017c takiego znaczenia, ale gdy ju\u017c nasza strona obro\u015bnie w r\u00f3\u017cne skrypty JS docenimy znaczenie tego parametru (przetwarzanie JS nie blokuje renderowania reszty strony).<\/p>\n

\"blog7\"<\/a><\/p>\n

Czy W3 Total Cache naprawd\u0119 pomaga? Tak, na poni\u017cszym rysunku wida\u0107 wykres obci\u0105\u017cenia mojego NASa:<\/p>\n

\"blog4\"<\/a><\/p>\n

Pierwsze czerwone k\u00f3\u0142eczko pokazuje moment, w kt\u00f3rym powracaj\u0105cy czytelnik wszed\u0142 na nasz stron\u0119, przegl\u0105darka sprawdzi\u0142a, \u017ce nie ma \u017cadnych zmian i zwr\u00f3ci\u0142a mu zawarto\u015b\u0107 z lokalnego cache. \u015arodkowa cz\u0119\u015b\u0107 wykresu, pokazuje moment przebudowy ca\u0142ego cache wykonany przez wtyczk\u0119 (nie zale\u017cnie od czytelnika), jak wida\u0107 jest to proces wysoce obci\u0105\u017caj\u0105cy tak w\u0105t\u0142y system. Drugie czerwone k\u00f3\u0142eczko, pokazuje moment w kt\u00f3rym powracaj\u0105cy czytelnik wszed\u0142 na nasz\u0105 stron\u0119, i zosta\u0142a mu zwr\u00f3cona nowa zawarto\u015b\u0107 z wcze\u015bniej przygotowanego cache. Jak wida\u0107 najwi\u0119ksze obci\u0105\u017cenie by\u0142o na dyskach twardych (czyli odczytanie i wys\u0142anie danych). Analizuj\u0105c spos\u00f3b dzia\u0142ania tej wtyczki, mo\u017cna przyj\u0105\u0107, \u017ce im wi\u0119cej ludzi b\u0119dzie aktywnie uczestniczy\u0107 w \u017cyciu naszego bloga tym jej efektywno\u015b\u0107 b\u0119dzie wzrasta\u0107. Na dzie\u0144 dzisiejszy nie potrafi\u0119 okre\u015bli\u0107 g\u00f3rnej granicy wytrzyma\u0142o\u015bci tego NASa ale spokojnie mog\u0119 przyj\u0105\u0107, \u017ce wytrzyma od 5 do nawet 10 jednoczesnych po\u0142\u0105cze\u0144 non stop (co daje tysi\u0105ce wej\u015b\u0107 dziennie). Bez zak\u0142\u00f3cania jego normalnej pracy i wymuszania migracji bloga na inny, bardziej wydajny sprz\u0119t.<\/p>\n

Kolejn\u0105, sugerowan\u0105 przez PageSpeed Insight, funkcjonalno\u015bci\u0105<\/a> jest wykorzystanie wielu domen przy \u0142adowaniu element\u00f3w bloga. Bierze si\u0119 to z tego, \u017ce przegl\u0105darki internetowe potrafi\u0105 nawi\u0105za\u0107 tylko kilka jednoczesnych po\u0142\u0105cze\u0144 z dan\u0105 domen\u0105. Je\u015bli mamy wiele element\u00f3w na stronie to faktycznie mo\u017cna przy\u015bpieszy\u0107 \u0142adowanie gdy np. obrazki b\u0119d\u0105 pobierane z kilku adres\u00f3w (np: vm1.piszki.pl, vm2.piszki.pl etc.). Aby to osi\u0105gn\u0105\u0107, trzeba stworzy\u0107 kilka r\u00f3\u017cnych rekord\u00f3w DNS prowadz\u0105cych do naszej strony i za\u0142adowa\u0107 plugin kt\u00f3ry si\u0119 nazywa Parallelize<\/a>. Osobi\u015bcie u\u017cywam go na jednym blogu a na drugim nie, r\u00f3\u017cnice w szybko\u015bci s\u0105 minimalne.<\/p>\n

W kwestii wydajno\u015bci to w zasadzie tyle. Gdy ju\u017c wszystko dobrze poustawiamy, nie b\u0119dzie to wymaga\u0142o od nas wi\u0119kszego nadzoru. W sieci mo\u017cna znale\u017a\u0107 naprawd\u0119 wiele poradnik\u00f3w jak przy\u015bpieszy\u0107 naszego bloga, pami\u0119tajmy jednak, \u017ce wi\u0119kszo\u015b\u0107 porad (i sugestii podawanych przez programy analizuj\u0105ce wydajno\u015b\u0107 stron www), dotyczy du\u017cego obci\u0105\u017cenia i nie ma sensu stosowa\u0107 si\u0119 do ka\u017cdej wskaz\u00f3wki. W warunkach domowych, wtyczka W3 Total Cache (lub inna dzia\u0142aj\u0105ca podobnie) plus smush.it ca\u0142kowicie wystarcz\u0105.<\/p>\n

W kolejnej cz\u0119\u015bci odpowiem na pytanie: Co zrobi\u0107 aby ludzie nas czytali? \"U\u015bmiech\"<\/p>\n

EDIT:<\/span><\/p>\n

Zwr\u00f3cono mi uwag\u0119, \u017ce nie napisa\u0142em nic na temat optymalizacji samego NASa. Oczywi\u015bcie, kajam si\u0119. Domy\u015blne ustawienia SAMP, czyli Synology + Apache + MySQL + PHP nie s\u0105 zbytnio zoptymalizowane pod k\u0105tem niskiego zu\u017cycia pami\u0119ci (co dla mnie jest troch\u0119 dziwne). Zaczniemy od Apache 2, zmiany nale\u017cy wprowadzi\u0107 tylko w jednym pliku:<\/span><\/p>\n

\/usr\/syno\/apache\/conf\/extra\/httpd-mpm.conf-user<\/p>\n

\n

<IfModule mpm_prefork_module>
StartServers                       2
MinSpareServers             2
MaxSpareServers            4
MaxClients                       64
MaxRequestsPerChild   0
<\/IfModule><\/p>\n<\/blockquote>\n

\n

<IfModule mpm_worker_module>
StartServers                     2
MaxClients                     64
MinSpareThreads         25
MaxSpareThreads        75
ThreadLimit                    25
MaxRequestsPerChild 0
<\/IfModule><\/p>\n<\/blockquote>\n

Ewentualnie mo\u017cemy jeszcze w pliku: \/usr\/syno\/apache\/conf\/extra\/httpd-default.conf-user przestawi\u0107 parametr KeepAlive Timeout z 5 na 10.<\/p>\n

W kolejnym kroku w pliku \/usr\/syno\/etc\/php.ini ustawiamy parametr memory_limit = 64M.<\/p>\n

Ostatnie ustawienie dotyczy oczywi\u015bcie MySQL, nale\u017cy wej\u015b\u0107 do katalogu \/usr\/syno\/mysql\/share\/mysql i zmieni\u0107 nazw\u0119 pliku my-smal.cnf na my.cnf (i wykona\u0107 restart MySQL).<\/p>\n

Na koniec ostateczny test wydajno\u015bci, mo\u017cna go przeprowadzi\u0107 za pomoc\u0105 strony blitz.io<\/a> (do dziesi\u0119ciu test\u00f3w za darmo):<\/p>\n

\"test1\"<\/a><\/p>\n

\"test2\"<\/a><\/p>\n

Jak wida\u0107, w ten spos\u00f3b skonfigurowany DS213J bez zaj\u0105kni\u0119cia serwuje stron\u0119 do 67 jednoczesnych u\u017cytkownik\u00f3w. P\u00f3\u017aniej oczywi\u015bcie czas oczekiwania zaczyna si\u0119 zwi\u0119ksza\u0107, 1000ms = 1s. Przy 100 u\u017cytkownikach jest to raptem 1.5s, ale nie poka\u017c\u0119 jak wygl\u0105da wykres przy 1000 u\u017cytkownik\u00f3w (ju\u017c nie jest tak r\u00f3\u017cowo) \"U\u015bmiech\"<\/p>\n

I na sam koniec, w ramach od\u015bwie\u017cania dost\u0119pnych zasob\u00f3w pami\u0119ci, warto doda\u0107 codzienny restart serwera Apache. W konsoli Synology nie ma Crontaba, robimy to z poziomu Harmonogramu zada\u0144:<\/p>\n

\"ap1\"<\/a><\/p>\n

W nast\u0119pnej cz\u0119\u015bci zajmiemy si\u0119 amatorskim SEO \"U\u015bmiech\"<\/p>\n

EDIT 2014.03.21:<\/p>\n

Analizuj\u0105c zachowanie WordPressa, zauwa\u017cy\u0142em, \u017ce najwi\u0119kszym obci\u0105\u017ceniem dla DS213j jest jego cron. WP-Cron uruchamia si\u0119 za ka\u017cdym razem gdy kto\u015b wchodzi na nasz\u0105 stron\u0119, w przypadku stron odwiedzanych stosunkowo rzadko (tak jak tej), ka\u017cdorazowe wej\u015bcie pojedynczej osoby powoduje uruchomienie wp-cron i wszystkich zaleg\u0142ych zada\u0144. U\u017cytkownik ma wra\u017cenie, \u017ce blog dzia\u0142a wolno (bo i tak jest) a WordPress w tym czasie wykonuje n-dzia\u0142a\u0144 w tle. Rozwi\u0105zaniem tego problemu okaza\u0142a si\u0119 wtyczka WP-Cron Control kt\u00f3ra wy\u0142\u0105cza automatyczne uruchamianie crona na wej\u015bciu. Zamiast tego musimy u\u017cy\u0107 standardowego crona linuksowego, a w naszym przypadku, harmonogramu systemu w DSM. I to dzia\u0142a! Wystarczy ustawi\u0107 sobie uruchomienie crona gdzie\u015b w nocy i zapominamy o problemie \"U\u015bmiech\"<\/p>\n

<\/div>","protected":false},"excerpt":{"rendered":"

Motto: Czy koniecznie musz\u0119 robi\u0107 wszystko sam? Przez ten kr\u00f3tki okres istnienia blogu, opr\u00f3cz przygotowywania tre\u015bci go wype\u0142niaj\u0105cych, musia\u0142em szybko i sprawnie opanowa\u0107 stron\u0119 techniczn\u0105 tego przedsi\u0119wzi\u0119cia. Musz\u0119 przyzna\u0107, \u017ce ju\u017c samo prowadzenie bloga, wci\u0105gn\u0119\u0142o mnie r\u00f3wnie mocno, co pisanie … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1538,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"yasr_overall_rating":0,"yasr_post_is_review":"","yasr_auto_insert_disabled":"","yasr_review_type":"","footnotes":""},"categories":[1],"tags":[37,7,14],"class_list":["post-543","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ogolne","tag-blog","tag-nas","tag-synology"],"yasr_visitor_votes":{"stars_attributes":{"read_only":false,"span_bottom":false},"number_of_votes":0,"sum_votes":0},"_links":{"self":[{"href":"https:\/\/vm.piszki.pl\/index.php?rest_route=\/wp\/v2\/posts\/543"}],"collection":[{"href":"https:\/\/vm.piszki.pl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vm.piszki.pl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vm.piszki.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vm.piszki.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=543"}],"version-history":[{"count":12,"href":"https:\/\/vm.piszki.pl\/index.php?rest_route=\/wp\/v2\/posts\/543\/revisions"}],"predecessor-version":[{"id":847,"href":"https:\/\/vm.piszki.pl\/index.php?rest_route=\/wp\/v2\/posts\/543\/revisions\/847"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vm.piszki.pl\/index.php?rest_route=\/wp\/v2\/media\/1538"}],"wp:attachment":[{"href":"https:\/\/vm.piszki.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vm.piszki.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vm.piszki.pl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}