Tips Audit Website Dengan YSlow

121 posting / 0 new
Entri terakhir
Rudiansyah
Avatar Rudiansyah
Offline
Last seen: 2 bulan 2 pekan yang lalu
Joined: 2 Mar 2013 - 11:54
Points: 417
Tips Audit Website Dengan YSlow

kalau bicara tentang bagaimana caranya dapet performa website yang kenceng dengan skor tinggi di tools benchmarking test seperti Pingdom, GTMetrix, dll, sepertinya ini pembahasan yang gak ada habisnya dikalangan web developer dan web designer.

dari banyak caranya, disini saya mau ngerangkum beberapa trik yang sekiranya bisa dijadiin tips untuk member2 sekalian :)

sebelumnya, mari kenalan dengan YSlow.

YSlow ada proyek dan tools buat analisa performa halaman web, dan untuk tau kenapa mereka lemot berdasarkan kriteria Yahoo dalam mengkategorikan website dengan kecepatan tinggi. sekarang Yahoo sudah gak berjaya seperti dulu, dan juga YSlow jarang diupdate (kalau dibanding sama Google PageSpeed misalnya). tapi YSlow tetap bisa ngasih gambaran dimana website bisa ditingkatkan performanya karena kriteria2 yang diusung adalah basic.

sebelum fokus ke subjek ini, harap dimengerti kalau skor 100/100 itu bukan mutlak! website dengan skor setinggi itu belum tentu 100% cepat dan tanpa masalah. jadi anggap aja YSlow ini sebagai pedoman dan patokan, bukan kepastian.

 

 

1. Make Fewer HTTP Requests

Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. Some ways to reduce the number of components include: combine files, combine multiple scripts into one script, combine multiple CSS files into one style sheet, and use CSS Sprites and image maps.

semakin rendah jumlah request HTTP yang dibutuhkan, tentu akan mempercepat loading website. caranya ada beberapa. misalnya dengan menggabungkan script dan styles yang sebelumnya banyak menjadi sedikit, atau jadi satu. dengan cara ini, tentu ukuran file script dan styles akan semakin besar, tapi dampak ruginya ke kecepatan website lebih sedikit dari keunggulannya. terus gambar bisa di sprite supaya jumlah gambar yang banyak bisa jadi satu.

 

2. Use a Content Delivery Network (CDN)

User proximity to web servers impacts response times. Deploying content across multiple geographically dispersed servers helps users perceive that pages are loading faster.

CDN selalu unggul dibanding website tanpa CDN dengan asumsi visitor datang dari tempat yang jauh dari posisi server berada. dengan CDN, transfer data statik akan lebih cepat. bisa dibilang semua website besar pakai CDN.

 

3. Avoid empty src or href

You may expect a browser to do nothing when it encounters an empty image src. However, it is not the case in most browsers. IE makes a request to the directory in which the page is located; Safari, Chrome, Firefox 3 and earlier make a request to the actual page itself. This behavior could possibly corrupt user data, waste server computing cycles generating a page that will never be viewed, and in the worst case, cripple your servers by sending a large amount of unexpected traffic.

ini cukup mudah caranya. jangan sampai ada "src" atau "href" yang kosong.

 

4. Add Expires Headers

Web pages are becoming increasingly complex with more scripts, style sheets, images, and Flash on them. A first-time visit to a page may require several HTTP requests to load all the components. By using Expires headers these components become cacheable, which avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often associated with images, but they can and should be used on all page components including scripts, style sheets, and Flash.

ini berhubungan dengan caching. ini memungkinkan browser untuk gak mengupdate data yang di simpan sebelum waktunya. cocok untuk returning visitors. caranya cukup sulit dan harus ada akses ke server dengan mengedit htaccess.

 

5. Compress Components with Gzip

gzip itu compression untuk file. ini dengan jelas mengurangi jumlah waktu yang dibutuhkan untuk download suatu halaman. bisa dibilang kalau hampir semua server dan browser mendukung compression dan Gzip.

Gzip mampu mengurangi ukuran file sampai 70%, dan ini benar bisa kerasa kecepatannya.

untuk bisa melakukan Gzip, harus ada akses ke server.

 

6. Put CSS at Top

Moving style sheets to the document HEAD element helps pages appear to load quicker since this allows pages to render progressively.

cukup jelas. disini spesifikasi HTML adalah mempunyai CSS atau stylesheet yang ada di HEAD, atau "kepala" dari suatu halaman. HEAD ini akan selalu di load terlebih dahulu. karena ini berhubungan dengan design, halaman web akan tampil sebagaimana mestinya pas HTML selesai di panggil.

cara ini kadang ada masalah dengan render blocking. oleh karena itu, CSS bisa saja di inline atau di minify kapan dibutuhkan.

 

7. Put JavaScript at Bottom

JavaScript scripts block parallel downloads; that is, when a script is downloading, the browser will not start any other downloads. To help the page load faster, move scripts to the bottom of the page if they are deferrable.

yang harus dipastikan adalah: website harus bisa loading tanpa di block oleh JS.

oleh karena itu, cara mudahnya adalah dengan memindahkan posisi pemanggilan JS di dekat FOOTER sebelum tutup </BODY>. dan kalau perlu dan dibutuhkan, bisa juga dengan memakai async. tapi cara async ini agak sulit untuk dikuasain karena async ini akan ngeload JS tanpa terkendala urutan. tapi kalau JS yang async ini selesai sebelum requirementnya selesai, halaman web bisa aja jadi berantakan.

cara yang bisa juga dilakuin adalah dengan defer JS. cara ini memastikan kalau script di didownload secara berurutan. ini mencegah halaman web rusak.

 

8. Avoid CSS Expressions

CSS expressions (supported in IE beginning with Version 5) are a powerful, and dangerous, way to dynamically set CSS properties. These expressions are evaluated frequently: when the page is rendered and resized, when the page is scrolled, and even when the user moves the mouse over the page. These frequent evaluations degrade the user experience.

style adalah untuk visual design sementara script adalah untuk perintah melakukan sesuatu ke halaman di sisi browser. CSS sebagai style bisa saja memakai expression yang bisa mengubah tampilan secara dinamis.

misalnya:  background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

ini sah2 saja. tapi ini bisa membuat loading website lebih lama. lebih bagus untuk membuat perintah itu dengan JS.

 

9. Make JavaScript and CSS External

Using external JavaScript and CSS files generally produces faster pages because the files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded each time the HTML document is requested. This reduces the number of HTTP requests but increases the HTML document size. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the HTML document size is reduced without increasing the number of HTTP requests.

biasanya website kecil bisa memakai inline CSS dan JS. maksudnya disini adalah perintah CSS dan JS ada langsung di HTML. bagusnya cara ini adalah mencegah mereka untuk ngeblock website dan memastikan mereka jalan dengan sempurna. jeleknya, cara ini bisa membuat ukuran size halaman jadi besar. ini tentu akan membuat halaman tersebut lama buat ngeload.

caranya adalah membuat CSS dan JS berada di luar dari HTML dengan file sendiri, atau external, atau berada di CDN. dengan membuat mereka ada di luar dari halaman, caching juga bisa dikontrol.

 

10. Reduce DNS Lookups

The Domain Name System (DNS) maps hostnames to IP addresses, just like phonebooks map people’s names to their phone numbers. When you type URL www.yahoo.com into the browser, the browser contacts a DNS resolver that returns the server’s IP address. DNS has a cost; typically it takes 20 to 120 milliseconds for it to look up the IP address for a hostname. The browser cannot download anything from the host until the lookup completes.

punya banyak plugins sosial media? atau embed video? atau link untuk tools analytics dari banyak layanan? ini semua menambah jumlah DNS yang harus dipanggil. ini dengan jelas memperlambat loading website.

cara mengurangi DNS bisa dengan cara: mengurangi website external yang dipanggil, script2 di host di server sendiri dan bukan di server orang lain.

 

11. Minify JavaScript and CSS

Minification removes unnecessary characters from a file to reduce its size, thereby improving load times. When a file is minified, comments and unneeded white space characters (space, newline, and tab) are removed. This improves response time since the size of the download files is reduced.

minify disini adalah untuk mengurangi jumlah karakter yang gak dibutuhkan di CSS, JS dan HTML. dengan cara ini, ukuran mereka bisa dibuat lebih kecil.

karakter yang dimaksud disini adalah jumlah spasi, comments tag, dll.

 

12. Avoid URL Redirects

URL redirects are made using HTTP status codes 301 and 302. They tell the browser to go to another location. Inserting a redirect between the user and the final HTML document delays everything on the page since nothing on the page can be rendered and no components can be downloaded until the HTML document arrives.

redirect adalah 301 dan 302. redirect ini ibarat pengalihan, dan pengalihan itu adalah waktu yang terbuang percuma.

redirect juga ada hubungannya dengan SEO.

 

13. Remove Duplicate JavaScript and CSS

Duplicate JavaScript and CSS files hurt performance by creating unnecessary HTTP requests (IE only) and wasted JavaScript execution (IE and Firefox). In IE, if an external script is included twice and is not cacheable, it generates two HTTP requests during page loading. Even if the script is cacheable, extra HTTP requests occur when the user reloads the page. In both IE and Firefox, duplicate JavaScript scripts cause wasted time evaluating the same scripts more than once. This redundant script execution happens regardless of whether the script is cacheable.

CSS dan JS hanya cukup dipanggil sekali. sekalinya mereka dipanggil dan didownload, mereka akan disimpan dan bisa bekerja.

kadang themes atau website dengan design custom punya masalah dimana CSS atau JS dipanggil lebih dari sekali. selain membutuhkan request HTTP yang percuma, ini tentu membuang waktu.

 

14. Configure Entity Tags (ETags)

Entity tags (ETags) are a mechanism web servers and the browser use to determine whether a component in the browser’s cache matches one on the origin server. Since ETags are typically constructed using attributes that make them unique to a specific server hosting a site, the tags will not match when a browser gets the original component from one server and later tries to validate that component on a different server.

ini berhubungan dengan cache. dengan konfigurasi ETags yang sesuai, browser visitor gak perlu download data baru dari server dan gak perlu ada HTTP request yang gak dibutuhkan.

 

15. Make AJAX Cacheable

One of AJAX’s benefits is it provides instantaneous feedback to the user because it requests information asynchronously from the backend web server. However, using AJAX does not guarantee the user will not wait for the asynchronous JavaScript and XML responses to return. Optimizing AJAX responses is important to improve performance, and making the responses cacheable is the best way to optimize them.

cara terbaik untuk membuat AJAX bisa di cache adalah dengan memakai expire ehader dan cache-control header. cara lain sudah disebutkan di poin2 diatas seperti penggunaan Gzip, pengurangan DNS, minify, pengurangan redirect dan konfigurasi ETags.

 

16. Use GET for AJAX Requests

When using the XMLHttpRequest object, the browser implements POST in two steps: (1) send the headers, and (2) send the data. It is better to use GET instead of POST since GET sends the headers and the data together (unless there are many cookies). IE’s maximum URL length is 2 KB, so if you are sending more than this amount of data you may not be able to use GET.

developer website dianjurkan untuk memakai GET daripada memakai POST untuk AJAX.

 

17. Reduce the Number of DOM Elements

A complex page means more bytes to download, and it also means slower DOM access in JavaScript. Reduce the number of DOM elements on the page to improve performance.

DOM adalah singkatan dari Document Object Model. ini adalah hasil output dari HTML. DOM harus dibuat minim karena jumlah mereka bisa memperlambat loading website.

 

18. Avoid HTTP 404 (Not Found) Error

Making an HTTP request and receiving a 404 (Not Found) error is expensive and degrades the user experience. Some sites have helpful 404 messages (for example, “Did you mean …?”), which may assist the user, but server resources are still wasted.

pernah browsing website dan tiba2 ada halaman yang error 404? ini adalah error yang bisa dibilang fatal karena selain menyebalkan, ini juga memakai kemampuan server untuk bekerja mencari halaman tersebut di server tanpa hasil.

rata2, error 404 ini bisa memakan memory 60-100Mb. satu visitor ketemu error 404 okelah masih bisa ditoleransi. tapi kalau 1000 dalam satu waktu. tinggal dikalikan aja.

 

19. Reduce Cookie Size

HTTP cookies are used for authentication, personalization, and other purposes. Cookie information is exchanged in the HTTP headers between web servers and the browser, so keeping the cookie size small minimizes the impact on response time.

cookies harus dibuat ringkas dan punya tanggal expire.

 

20. Use Cookie-Free Domains

When the browser requests a static image and sends cookies with the request, the server ignores the cookies. These cookies are unnecessary network traffic. To workaround this problem, make sure that static components are requested with cookie-free requests by creating a subdomain and hosting them there.

konten statik gak butuh cookies. misalnya CSS atau gambar yang gak berubah, gak perlu ada perintah untuk ada cookies ke server. caranya adalah dengan memakai cookie-free domain untuk konten2 statik ini.

 

21. Avoid AlphaImageLoader Filter

The IE-proprietary AlphaImageLoader filter attempts to fix a problem with semi-transparent true color PNG files in IE versions less than Version 7. However, this filter blocks rendering and freezes the browser while the image is being downloaded. Additionally, it increases memory consumption. The problem is further multiplied because it is applied per element, not per image.

ini khusus untuk Internet Explorer 7.

 

22. Do Not Scale Images in HTML

Web page designers sometimes set image dimensions by using the width and height attributes of the HTML image element. Avoid doing this since it can result in images being larger than needed. For example, if your page requires image myimg.jpg which has dimensions 240×720 but displays it with dimensions 120×360 using the width and height attributes, then the browser will download an image that is larger than necessary.

usahakan supaya gak ngeresize dimensi gambar lewat HTML. ini supaya browser bisa ngeload gambar dan menampilkannya tanpa harus melalui proses resize.

 

23. Make favicon Small and Cacheable

A favicon is an icon associated with a web page; this icon resides in the favicon.ico file in the server’s root. Since the browser requests this file, it needs to be present; if it is missing, the browser returns a 404 error (see “Avoid HTTP 404 (Not Found) error” above). Since favicon.ico resides in the server’s root, each time the browser requests this file, the cookies for the server’s root are sent. Making the favicon small and reducing the cookie size for the server’s root cookies improves performance for retrieving the favicon. Making favicon.ico cacheable avoids frequent requests for it.

favicon itu gambar kecil yang biasa ada di tab browser dan di history dan bookmark. ukuran kecil ini harus dibuat dengan ukuran file yang juga kecil. ukuran favicon standar adalah 16x16 pixel, dan gak boleh besar sampe puluhan kb.

 

KESIMPULAN

kecepatan adalah segalanya... visitor yang datang ke website gak boleh disuruh nunggu.

sebagai contoh ekstrim, kita biasa pakai Google buat searching internet. Google sendiri punya performa yang tinggi dengan halaman web yang cepat loadingnya. coba bayangin kalau Google loadingnya 1 detik aja lebih lama. sudah pasti dia akan rugi.

banyak cara untuk membuat website bisa punya performa tinggi, dan beberapa diantaranya adalah poin2 diatas. walaupun YSlow bukan patokan mutlak, poin2 yang dia kasih masih jelas bisa bikin performa web lebih bagus.

semoga tips ini berguna :)

 

 

5
Your rating: Nihil Average: 5 (7 votes)
Yuda
Avatar Yuda
Offline
Last seen: 4 bulan 4 pekan yang lalu
Joined: 21 Nov 2013 - 13:04
Points: 306
yslow yang saya terakhir tahu

yslow yang saya terakhir tahu masih sering dipakai jadi tolak ukur selain dari google pagespeed. nice post, sangat berguna pak rudi.

0
No votes yet
Andri
Avatar Andri
Offline
Last seen: 1 tahun 6 bulan yang lalu
Joined: 18 Apr 2013 - 10:36
Points: 169
Nagih ntar :)) ngotak ngatik

Nagih ntar :)) ngotak ngatik demi dapet nilai 100

5
Your rating: Nihil Average: 5 (2 votes)
Darman
Avatar Darman
Offline
Last seen: 2 bulan 2 pekan yang lalu
Joined: 14 Agu 2013 - 14:47
Points: 499
Andri wrote:

Andri wrote:

Nagih ntar :)) ngotak ngatik demi dapet nilai 100

Abis pagespeed sama yslow, belum validasi w3c :)

5
Your rating: Nihil Average: 5 (1 vote)
Michael
Avatar Michael
Offline
Last seen: 1 bulan 1 pekan yang lalu
Joined: 16 Apr 2013 - 13:00
Points: 342
Nice. 5 stars thx

Nice. 5 stars thx

0
No votes yet
Agham
Avatar Agham
Offline
Last seen: 2 tahun 4 bulan yang lalu
Joined: 19 Nov 2016 - 15:02
Points: 19
numpang nanya gan...

numpang nanya gan...

kalau halaman web ga pakai apa2, atau ga pakai iklan dari pihak2 luar misal adsense, halaman web saya hasilnya bisa B+ di Gtmetrix. tapi di halaman yang ada iklannya, langsung merosot ke C dan kadang malahan ke D.

ada solusinya ga gan?

0
No votes yet
Yuda
Avatar Yuda
Offline
Last seen: 4 bulan 4 pekan yang lalu
Joined: 21 Nov 2013 - 13:04
Points: 306
Agham wrote:

Agham wrote:

numpang nanya gan...

kalau halaman web ga pakai apa2, atau ga pakai iklan dari pihak2 luar misal adsense, halaman web saya hasilnya bisa B+ di Gtmetrix. tapi di halaman yang ada iklannya, langsung merosot ke C dan kadang malahan ke D.

ada solusinya ga gan?

karena ada adsense, halaman itu jadi nerima tambahan informasi dari google. selain itu, ukurannya juga otomatis bengkak. hal wajar menurut saya kalau halaman itu jadi turun peringkatnya di gtmetrix.

0
No votes yet
Agham
Avatar Agham
Offline
Last seen: 2 tahun 4 bulan yang lalu
Joined: 19 Nov 2016 - 15:02
Points: 19
Trims buat balasannya.

Trims buat balasannya.

Apa bisa di optimasi? Peringkatnya turun drastis dan waktunya juga nambah jauh sekitaran 1-2 dtk.

0
No votes yet
Dian
Avatar Dian
Offline
Last seen: 1 bulan 5 hari yang lalu
Joined: 4 Okt 2013 - 16:32
Points: 192
Nambah yang perlu di load.

Nambah yang perlu di load. Wajar aja kalau halaman yang ada iklannya lebih lemot

0
No votes yet
Darman
Avatar Darman
Offline
Last seen: 2 bulan 2 pekan yang lalu
Joined: 14 Agu 2013 - 14:47
Points: 499
jenis iklannya apa? berapa

jenis iklannya apa? berapa banyak?

0
No votes yet
Daniel
Avatar Daniel
Offline
Last seen: 6 bulan 3 pekan yang lalu
Joined: 28 Nov 2016 - 09:25
Points: 33
halo. mau tanya gan.

halo. mau tanya gan.

website saya kalau saya scan lewat google pagespeed, saya dapat nilai jelek di katanya

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 8 blocking script resources and 4 blocking CSS resources. This causes a delay in rendering your page.
Approximately 47% of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

saya coba cara yang direkomended seperti async dan defer. tapi halamannya jadi rusak.

mohon solusinya gan. trims

0
No votes yet
Hendrawan
Avatar Hendrawan
Offline
Last seen: 1 tahun 5 bulan yang lalu
Joined: 25 Mar 2014 - 09:47
Points: 131
Daniel wrote:

Daniel wrote:

halo. mau tanya gan.

website saya kalau saya scan lewat google pagespeed, saya dapat nilai jelek di katanya

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 8 blocking script resources and 4 blocking CSS resources. This causes a delay in rendering your page.

Approximately 47% of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

saya coba cara yang direkomended seperti async dan defer. tapi halamannya jadi rusak.

mohon solusinya gan. trims

 

itu karena ada file2 yang harus di load sebelum halaman bisa tampil. solusinya bisa taro dibawah js dan cssnya.

0
No votes yet
Daniel
Avatar Daniel
Offline
Last seen: 6 bulan 3 pekan yang lalu
Joined: 28 Nov 2016 - 09:25
Points: 33
Hendrawan wrote:

Hendrawan wrote:

Daniel wrote:

halo. mau tanya gan.

website saya kalau saya scan lewat google pagespeed, saya dapat nilai jelek di katanya

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 8 blocking script resources and 4 blocking CSS resources. This causes a delay in rendering your page.

Approximately 47% of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

saya coba cara yang direkomended seperti async dan defer. tapi halamannya jadi rusak.

mohon solusinya gan. trims

 

itu karena ada file2 yang harus di load sebelum halaman bisa tampil. solusinya bisa taro dibawah js dan cssnya.

trims buat solusinya. tapi kok ada jeda beberapa detik ya sebelum website tampil sebagaimana mestinya?

0
No votes yet
Michael
Avatar Michael
Offline
Last seen: 1 bulan 1 pekan yang lalu
Joined: 16 Apr 2013 - 13:00
Points: 342
Coba diganti urutannya.

Coba diganti urutannya.

Kalau pake defer, bisa coba posisi skrip yang jalan jadi diatas yang gak jalan. Kalau ada jquery, dia harus selesai loading dulu sebelum skrip dipanggil

0
No votes yet
Toni
Avatar Toni
Offline
Last seen: 2 bulan 3 pekan yang lalu
Joined: 22 Mei 2013 - 14:59
Points: 355
hmmm.... lumayan banget.

hmmm.... lumayan banget. harus minta tipsnya nih kayaknya :o

5
Your rating: Nihil Average: 5 (4 votes)
Herianto
Avatar Herianto
Offline
Last seen: 1 tahun 4 bulan yang lalu
Joined: 15 Apr 2014 - 13:21
Points: 126
pagespeed 99%???

pagespeed 99%???

0
No votes yet
Rudiansyah
Avatar Rudiansyah
Offline
Last seen: 2 bulan 2 pekan yang lalu
Joined: 2 Mar 2013 - 11:54
Points: 417
Toni wrote:

Toni wrote:

hmmm.... lumayan banget. harus minta tipsnya nih kayaknya :o

dalam hal optimisasi halamannya, iya bagus memang. gak banyak website yang bisa tembus 95% di google pagespeed. tapi masih lemah di beberapa aspek

misalnya: ini website gak banyak pakai cdn, dan masih ada beberapa resource yang di host di server lokal. icon buat bendera penerjemah yang banyak makan waktu. ini harus ada di cdn.

terus respon servernya tergolong lemot. mungkin alokasi memorinya yang kurang atau memang memorinya yang dari sananya gak banyak. atau cpu yang kurang tinggi performanya.

5
Your rating: Nihil Average: 5 (1 vote)
Toni
Avatar Toni
Offline
Last seen: 2 bulan 3 pekan yang lalu
Joined: 22 Mei 2013 - 14:59
Points: 355
Rudiansyah wrote:

Rudiansyah wrote:

Toni wrote:

hmmm.... lumayan banget. harus minta tipsnya nih kayaknya :o

dalam hal optimisasi halamannya, iya bagus memang. gak banyak website yang bisa tembus 95% di google pagespeed. tapi masih lemah di beberapa aspek

misalnya: ini website gak banyak pakai cdn, dan masih ada beberapa resource yang di host di server lokal. icon buat bendera penerjemah yang banyak makan waktu. ini harus ada di cdn.

terus respon servernya tergolong lemot. mungkin alokasi memorinya yang kurang atau memang memorinya yang dari sananya gak banyak. atau cpu yang kurang tinggi performanya.

Udah pakai cdn kayaknya bener. Lihat lagi di gtmetrix pake cloudflare sama cloudinary

0
No votes yet
Ramli
Avatar Ramli
Offline
Last seen: 2 bulan 2 pekan yang lalu
Joined: 7 Nov 2014 - 12:50
Points: 256
tips buat yang mau pakai cdn

tips buat yang mau pakai cdn buat websitenya, tapi mau versi gratisan dan gak mau banyak repot, bisa cek di berapa website yang hosting file2 skrip buat umum.

misalnya

google: https://developers.google.com/speed/libraries/ 

jquery: https://code.jquery.com/

jsdelivr: http://www.jsdelivr.com/

cdnjs: https://cdnjs.com/libraries/

dulu google ngijinin developer buat pakai google drive buat hosting file2 dan skrip2. tapi dari agustus 2016, ini gak bisa lagi. domain googledrive juga udah gak ada. solusinya ya paling pakai google drive yang cloud storage biasa buat hosting gambar aja.

ini termasuk cdn juga.

pilihan lain pakai dropbox. ini gak termasuk cdn, tapi karena kemampuan server dropbox bagus, hosting file2 disana bisa aja bikin website makin cepet, dan juga hasil di pagespeed dan lebih bagus.

 

5
Your rating: Nihil Average: 5 (4 votes)
Anton
Avatar Anton
Offline
Last seen: 1 tahun 10 bulan yang lalu
Joined: 26 Mar 2013 - 09:36
Points: 247
Loading paralel itu caranya

Loading paralel itu caranya gimana? Cdn aja yang bisa paralel? Kalau load di cdn, kalau dia offline bukannya ntar website jadi ngaco?

0
No votes yet
Ramli
Avatar Ramli
Offline
Last seen: 2 bulan 2 pekan yang lalu
Joined: 7 Nov 2014 - 12:50
Points: 256
Anton wrote:

Anton wrote:

Loading paralel itu caranya gimana? Cdn aja yang bisa paralel? Kalau load di cdn, kalau dia offline bukannya ntar website jadi ngaco?

cara gampangnya ya dengan CSS diatas dan JS dibawah. kalau misalnya JS diatas atau posisinya selang-seling, browser jadi gak bisa loading paralel.

CSS bagusnya ada diatas di bagian head di XHTML supaya rendering bisa progresive. ini juga ngebuat browser bisa ngambil design sebelum konten dimulai rendering. sementara itu, JS yang posisinya di bawah HTML bisa ngebuat brower supaya loadingnya juga paralel. sebabnya, JS itu bisa ngubah layout dan konten, dan kalau posisi dia bentrok sama CSS, renderingnya jadi gak bisa paralel.

ini juga karena secara default, browsers akan menunda proses setiap ketemu dengan tag "script"

0
No votes yet
Prabusuwono
Avatar Prabusuwono
Offline
Last seen: 3 hari 4 hours yang lalu
Joined: 13 Des 2013 - 14:31
Points: 498
Gimana load paralel dengan

Gimana load paralel dengan size sekecil mungkin.

Perhatiin berapa lama waktu server ngerespon terutama di panggilan dns awal

3
Your rating: Nihil Average: 3 (1 vote)
Michael
Avatar Michael
Offline
Last seen: 1 bulan 1 pekan yang lalu
Joined: 16 Apr 2013 - 13:00
Points: 342
Nilainya bagus, tapi masih 4

Nilainya bagus, tapi masih 4 detik? Kok bisa?

5
Your rating: Nihil Average: 5 (1 vote)
Andri
Avatar Andri
Offline
Last seen: 1 tahun 6 bulan yang lalu
Joined: 18 Apr 2013 - 10:36
Points: 169
Michael wrote:

Michael wrote:

Nilainya bagus, tapi masih 4 detik? Kok bisa?

Udah dibawah 2 detik sekarang loadingnya. Eyerys pake cdn cloudflare

0
No votes yet
Agung
Avatar Agung
Offline
Last seen: 2 pekan 2 hari yang lalu
Joined: 29 Apr 2014 - 14:28
Points: 372
Andri wrote:

Andri wrote:

Michael wrote:

Nilainya bagus, tapi masih 4 detik? Kok bisa?

Udah dibawah 2 detik sekarang loadingnya. Eyerys pake cdn cloudflare

eyerys pakai beberapa cdn buat website utamanya dan buat skrip dan gambar

0
No votes yet
Andri
Avatar Andri
Offline
Last seen: 1 tahun 6 bulan yang lalu
Joined: 18 Apr 2013 - 10:36
Points: 169
Agung wrote:

Agung wrote:

Andri wrote:

Michael wrote:

Nilainya bagus, tapi masih 4 detik? Kok bisa?

Udah dibawah 2 detik sekarang loadingnya. Eyerys pake cdn cloudflare

eyerys pakai beberapa cdn buat website utamanya dan buat skrip dan gambar

Masih lemot, tapi jauh mendingan dibanding dulu

0
No votes yet
Adityasama
Avatar Adityasama
Offline
Last seen: 1 tahun 8 bulan yang lalu
Joined: 26 Sep 2014 - 14:02
Points: 113
nice post. sangat berguna.

nice post. sangat berguna. thanks

0
No votes yet
Rian
Avatar Rian
Offline
Last seen: 7 bulan 2 pekan yang lalu
Joined: 28 Feb 2013 - 10:12
Points: 310
Cookie free domain buat

Cookie free domain buat konten statik. Kalau pakai cloud storage bagaimana? Misalnya pakai Google Drive dibanding sama CDN?

0
No votes yet
Prabusuwono
Avatar Prabusuwono
Offline
Last seen: 3 hari 4 hours yang lalu
Joined: 13 Des 2013 - 14:31
Points: 498
Rian wrote:

Rian wrote:

Cookie free domain buat konten statik. Kalau pakai cloud storage bagaimana? Misalnya pakai Google Drive dibanding sama CDN?

Gak ada expire header di google drive atau dropbox kalau gak salah... Jadi cachenya gak ada. Cmiiw

0
No votes yet
Rudiansyah
Avatar Rudiansyah
Offline
Last seen: 2 bulan 2 pekan yang lalu
Joined: 2 Mar 2013 - 11:54
Points: 417
Dropbox atau cloud storage

Dropbox atau cloud storage bukan buat hosting file website. 

Saya pakai cloudinary sama seperti website eyerys. Ada yang akun gratisan juga lumayan bandwidthnya.

0
No votes yet
Cheng
Avatar Cheng
Offline
Last seen: 1 tahun 3 pekan yang lalu
Joined: 29 Agu 2016 - 12:09
Points: 126
Rudiansyah wrote:

Rudiansyah wrote:

Dropbox atau cloud storage bukan buat hosting file website. 

Saya pakai cloudinary sama seperti website eyerys. Ada yang akun gratisan juga lumayan bandwidthnya.

Thanks buat infonya

0
No votes yet
Prabusuwono
Avatar Prabusuwono
Offline
Last seen: 3 hari 4 hours yang lalu
Joined: 13 Des 2013 - 14:31
Points: 498
Cloudinary bisa buat ganti

Cloudinary bisa buat ganti format juga

0
No votes yet
Dennis
Avatar Dennis
Offline
Last seen: 1 tahun 1 bulan yang lalu
Joined: 27 Okt 2014 - 16:07
Points: 140
Nyimpem file gambar di google

Nyimpem file gambar di google drive atau dropbox buat ditayangin ke website? Bedanya sama photobucket gitu bagaimana? Atau tempat hosting file2 gratisan lainnya?

0
No votes yet
Michael
Avatar Michael
Offline
Last seen: 1 bulan 1 pekan yang lalu
Joined: 16 Apr 2013 - 13:00
Points: 342
Dennis wrote:

Dennis wrote:

Nyimpem file gambar di google drive atau dropbox buat ditayangin ke website? Bedanya sama photobucket gitu bagaimana? Atau tempat hosting file2 gratisan lainnya?

Ada lho perbedaan file storage dan file hosting. Yang pertama buat nyimpen doang, yang kedua memang dikhususin buat website

0
No votes yet
Wildan
Avatar Wildan
Offline
Last seen: 7 bulan 1 pekan yang lalu
Joined: 21 Mar 2016 - 12:41
Points: 117
nice post. 5 stars

nice post. 5 stars

0
No votes yet
Gunawan
Avatar Gunawan
Offline
Last seen: 2 bulan 1 pekan yang lalu
Joined: 14 Agu 2013 - 16:30
Points: 246
Nice info bos

Nice info bos

0
No votes yet
Yuda
Avatar Yuda
Offline
Last seen: 4 bulan 4 pekan yang lalu
Joined: 21 Nov 2013 - 13:04
Points: 306
Kalau gak salah dulu google

Kalau gak salah dulu google bisa buat hosting website gratis ya? Bukan blogspot tapi

0
No votes yet
Wildan
Avatar Wildan
Offline
Last seen: 7 bulan 1 pekan yang lalu
Joined: 21 Mar 2016 - 12:41
Points: 117
Redirect 301 ada pengaruhnya

Redirect 301 ada pengaruhnya ke SEO? Bukannya cuma 404 ya?

0
No votes yet
Maulana
Avatar Maulana
Offline
Last seen: 5 bulan 21 hours yang lalu
Joined: 1 Jul 2013 - 11:32
Points: 221
Wildan wrote:

Wildan wrote:

Redirect 301 ada pengaruhnya ke SEO? Bukannya cuma 404 ya?

Nih bos, langsung dari google

0
No votes yet
Prabusuwono
Avatar Prabusuwono
Offline
Last seen: 3 hari 4 hours yang lalu
Joined: 13 Des 2013 - 14:31
Points: 498
Wildan wrote:

Wildan wrote:

Redirect 301 ada pengaruhnya ke SEO? Bukannya cuma 404 ya?

Website seharusnya gak ada redirect. Tapi kalau memang gak bisa dihindarin, solusi paling bagus ya 301. Rank akan pindah ke URL baru jadi gak usah khawatir :)

0
No votes yet
Indra
Avatar Indra
Offline
Last seen: 2 hari 20 hours yang lalu
Joined: 15 Sep 2013 - 11:41
Points: 312
ada bagusnya juga kalau

ada bagusnya juga kalau bagian atas website yang pertama kali kelihatan pas di akses, dibuat CSS sendiri, dan bagian bawah pakai CSS yang beda.

tujuannya supaya CSS pertama yang bisa dibuat lebih kecil buat ngedesain yang bagian atas website. jadi ngasih perasan kalau lebih cepet loadingnya

0
No votes yet
Dimas
Avatar Dimas
Offline
Last seen: 5 bulan 3 pekan yang lalu
Joined: 24 Jan 2015 - 05:46
Points: 166
Indra wrote:

Indra wrote:

ada bagusnya juga kalau bagian atas website yang pertama kali kelihatan pas di akses, dibuat CSS sendiri, dan bagian bawah pakai CSS yang beda.

tujuannya supaya CSS pertama yang bisa dibuat lebih kecil buat ngedesain yang bagian atas website. jadi ngasih perasan kalau lebih cepet loadingnya

Kalau mau kasih sekedar suges, skrip juga bisa dibuat supaya load css tertentu dulu.

Ntar tampilan pertama kalinya seperti gak ada desain selama sepersekian detik, tapi jadinya memang lebih cepat.

Tapi waktu akhirnya sama saja.

0
No votes yet
Farhat
Avatar Farhat
Offline
Last seen: 2 bulan 1 pekan yang lalu
Joined: 19 Mei 2014 - 15:13
Points: 329
Dimas wrote:

Dimas wrote:

Indra wrote:

ada bagusnya juga kalau bagian atas website yang pertama kali kelihatan pas di akses, dibuat CSS sendiri, dan bagian bawah pakai CSS yang beda.

tujuannya supaya CSS pertama yang bisa dibuat lebih kecil buat ngedesain yang bagian atas website. jadi ngasih perasan kalau lebih cepet loadingnya

Kalau mau kasih sekedar suges, skrip juga bisa dibuat supaya load css tertentu dulu.

Ntar tampilan pertama kalinya seperti gak ada desain selama sepersekian detik, tapi jadinya memang lebih cepat.

Tapi waktu akhirnya sama saja.

kalau orang bukanya pakai browser opera mini bagaimana? itu browser kan gak ngejalanin skrip

0
No votes yet
Rudiansyah
Avatar Rudiansyah
Offline
Last seen: 2 bulan 2 pekan yang lalu
Joined: 2 Mar 2013 - 11:54
Points: 417
Setuju bisa pakai cara itu..

Setuju bisa pakai cara itu.. tapi seperti dibilang itu sugesti doang. Mending cari cara supaya gak ada skrip atau css yang ngeblok konten buat loading lebih awal.

Coba search "render blocking css" dan "render blocking javascript"

0
No votes yet
Junaidi
Avatar Junaidi
Offline
Last seen: 4 bulan 1 pekan yang lalu
Joined: 14 Mar 2013 - 09:01
Points: 507
Speed pengaruh ke SEO kan?

Speed pengaruh ke SEO kan? Kalau memang bener, speed kan hampir selalu dipengaruhi sama CSS dan JS. Kalau itu semua dihilangkan misalnya, hasilnya bagaimana?

Atau misalnya CSS dan JS digabung ke HTML. Itu bagaimana?

Junaidi

0
No votes yet
Agung
Avatar Agung
Offline
Last seen: 2 pekan 2 hari yang lalu
Joined: 29 Apr 2014 - 14:28
Points: 372
Junaidi wrote:

Junaidi wrote:

Speed pengaruh ke SEO kan? Kalau memang bener, speed kan hampir selalu dipengaruhi sama CSS dan JS. Kalau itu semua dihilangkan misalnya, hasilnya bagaimana?

Atau misalnya CSS dan JS digabung ke HTML. Itu bagaimana?

Junaidi

Jadi inline? Gak recommended karena malah ngebuat halaman makin berat karena setiap halaman pasti harus download skrip dan css.

Selain itu juga jadi susah buat di maintenens

0
No votes yet
Himawan
Avatar Himawan
Offline
Last seen: 1 tahun 3 bulan yang lalu
Joined: 9 Jul 2013 - 12:14
Points: 205
Agung wrote:

Agung wrote:

Junaidi wrote:

Speed pengaruh ke SEO kan? Kalau memang bener, speed kan hampir selalu dipengaruhi sama CSS dan JS. Kalau itu semua dihilangkan misalnya, hasilnya bagaimana?

Atau misalnya CSS dan JS digabung ke HTML. Itu bagaimana?

Junaidi

Jadi inline? Gak recommended karena malah ngebuat halaman makin berat karena setiap halaman pasti harus download skrip dan css.

Selain itu juga jadi susah buat di maintenens

Ada 3 cara nambahin CSS ke website. Cara standar pakai file stylesheet, inline di body dan internal stylesheet di head.

Kalau pakai yang internal bagaimana?

0
No votes yet
Hendrik
Avatar Hendrik
Offline
Last seen: 6 bulan 3 pekan yang lalu
Joined: 19 Apr 2015 - 07:20
Points: 107
Junaidi wrote:

Junaidi wrote:

Speed pengaruh ke SEO kan? Kalau memang bener, speed kan hampir selalu dipengaruhi sama CSS dan JS. Kalau itu semua dihilangkan misalnya, hasilnya bagaimana?

Atau misalnya CSS dan JS digabung ke HTML. Itu bagaimana?

Junaidi

ini cara dulu waktu pertama kali belajar HTML :) tapi kalau prakteknya, ini gak efisien

0
No votes yet
Yuda
Avatar Yuda
Offline
Last seen: 4 bulan 4 pekan yang lalu
Joined: 21 Nov 2013 - 13:04
Points: 306
Junaidi wrote:

Junaidi wrote:

Speed pengaruh ke SEO kan? Kalau memang bener, speed kan hampir selalu dipengaruhi sama CSS dan JS. Kalau itu semua dihilangkan misalnya, hasilnya bagaimana?

Atau misalnya CSS dan JS digabung ke HTML. Itu bagaimana?

Junaidi

bukannya jadi berat ya karena setiap buka halaman baru jadi harus diload semua skrip dan desainnya? bukan semakin cepat tapi semakin lama loadingnya

0
No votes yet
Banuarto
Avatar Banuarto
Offline
Last seen: 5 bulan 3 pekan yang lalu
Joined: 4 Sep 2013 - 13:30
Points: 238
Yuda wrote:

Yuda wrote:

Junaidi wrote:

Speed pengaruh ke SEO kan? Kalau memang bener, speed kan hampir selalu dipengaruhi sama CSS dan JS. Kalau itu semua dihilangkan misalnya, hasilnya bagaimana?

Atau misalnya CSS dan JS digabung ke HTML. Itu bagaimana?

Junaidi

bukannya jadi berat ya karena setiap buka halaman baru jadi harus diload semua skrip dan desainnya? bukan semakin cepat tapi semakin lama loadingnya

Mungkin ngebantu

5
Your rating: Nihil Average: 5 (1 vote)
Prabusuwono
Avatar Prabusuwono
Offline
Last seen: 3 hari 4 hours yang lalu
Joined: 13 Des 2013 - 14:31
Points: 498
Junaidi wrote:

Junaidi wrote:

Speed pengaruh ke SEO kan? Kalau memang bener, speed kan hampir selalu dipengaruhi sama CSS dan JS. Kalau itu semua dihilangkan misalnya, hasilnya bagaimana?

Atau misalnya CSS dan JS digabung ke HTML. Itu bagaimana?

Junaidi

Lihat poin 9. Gak bagus karena gak di cache

0
No votes yet