Panduan Komprehensif untuk Membetulkan Isu Prestasi di Tapak Lambat

Jika anda melanggan perkhidmatan daripada pautan di halaman ini, Reeves and Sons Limited mungkin mendapat komisen. Lihat kami pernyataan etika.

Jika tapak anda bergerak seperti salah satu sloth tersebut dari DMV di Zootopia, terdapat cara anda mungkin boleh membetulkan apa sahaja yang melambatkannya. Memikirkan apa yang menyebabkan masalah adalah separuh daripada pertempuran, jadi sebaik sahaja anda telah mengasingkan puncanya, anda sekurang-kurangnya akan mempunyai jawapan untuk menyelesaikan masalah itu.

Hosting berkualiti rendah adalah penyebabnya

Apabila bercakap tentang pengehosan web, konsep kualiti rendah tidak selalu bermaksud perkara yang sama dalam konteks lain. Sebagai contoh, harga yang anda bayar untuk pengehosan tidak selalu mencerminkan kualiti yang anda boleh jangkakan dengan tepat. Juga bukan populariti perkhidmatan atau seberapa terkenal nama jenama itu.

Malah, beberapa jenama pengehosan yang paling popular adalah pilihan yang paling teruk, hanya kerana terlalu ramai orang menggunakannya. Ia bergantung sedikit kepada kualiti infrastruktur mereka. Jika mereka melabur dengan betul dalam teknologi mereka, maka anda mungkin tidak mengalami masalah prestasi yang ketara. Sebaliknya, anda mungkin berkongsi satu pelayan dengan ratusan tapak lain, dan masalah itu akan meningkat apabila kapasiti storan cakera terus berkembang.

Jadi dalam situasi itu, ada kemungkinan menukar kepada perkhidmatan pengehosan web yang lebih kecil dan kurang terkenal dengan teknologi yang baik boleh menjadi pilihan yang lebih baik. Melakukan ini juga mungkin bermakna anda mendapat lebih banyak perkhidmatan pelanggan peribadi, pada tahap kualiti yang lebih tinggi daripada yang anda akan dapat daripada raksasa. Perlu difikirkan dan ianya mudah untuk diuji dengan hanya membeli langganan sebulan pada hos baharu dan menanda aras prestasi dengan tapak sedia ada anda.

Gunakan kunci F12 anda

Kebanyakan penyemak imbas web ditala untuk mempunyai konsol nyahpepijat mereka diakses melalui kekunci F12, dan anda mungkin tidak terkecuali. Dan bercakap tentang pengecualian, itulah yang anda cari, atau lebih tepatnya, ralat dalam kod JavaScript anda yang membuang pengecualian dan menjejaskan prestasi.

Anda akan menemui ralat ini dalam kod anda sendiri dan dalam perpustakaan kod yang diimport seperti jQuery. Hanya kerana jQuery besar dan popular tidak bermakna ia sempurna. Berikut ialah contoh jenis perkara yang anda cari:

Ralat yang dibenderakan dalam warna biru hanyalah ralat CSS dan anda secara amnya boleh menjangkakan untuk melihatnya disebabkan oleh jumlah shimming yang perlu dilakukan oleh pembangun semasa membina helaian gaya, semata-mata kerana masih tiada satu pun standard yang telah diterima pakai merentas semua penyemak imbas. Ia biasanya tidak menjejaskan prestasi melainkan anda menggunakan banyak animasi atau kesan peralihan.

Tetapi ralat yang dibenderakan dalam oren adalah ralat JavaScript, dan bukan itu sahaja, dalam kes ini ia adalah jackpot kerana ia secara khusus memberitahu kami bahawa ralat tertentu ini akan menyebabkan kod berjalan dengan sangat perlahan.

Dapatkan beberapa nasihat percuma dari Google

Tahukah anda Google boleh menganalisis halaman web anda secara percuma dan memberi anda petua tentang cara menyelesaikan sebarang isu? Apa yang anda perlu lakukan ialah melawati halaman Page Speed โ€‹โ€‹Insights Google dan masukkan URL halaman yang ingin anda analisis.

Ia sememangnya tidak boleh menjadi lebih mudah, walaupun anda mungkin tidak semestinya mahu mengikut agama semua nasihat mereka. Sistem Google pandai memikirkan perkara yang mungkin memperlahankan halaman anda, tetapi beberapa pembetulan mungkin tidak menyelesaikan seberapa banyak masalah yang mereka buat.

Sebaik-baiknya anda ingin melihat skor melebihi 85. Walaupun tiada siapa yang mengetahui dengan pasti, masa memuatkan halaman secara meluas dianggap mempunyai pengaruh yang ketara pada kedudukan halaman anda di Google. Jangan putus asa jika tapak anda tidak berada di bahagian atas zon hijau, kerana banyak tapak web utama tidak mendapat markah yang hebat.

Beberapa contoh terkenal termasuk:

  • http://bbc.com (70m/77d)
  • http://cnn.com (47m/65d)
  • http://whitehouse.gov (58m/56d)
  • http://microsoft.com (49m/71d)
  • http://apple.com (61m/72d)
  • http://linux.com (33m/44d)
  • http://ubuntu.com (69m/81d)
  • http://linuxmint.com (59m/67d)
  • http://youtube.com (53m/69d)
  • http://facebook.com (49m/81d)

Tiada satu pun contoh ini benar-benar alasan untuk membiarkan laman web anda berprestasi buruk, tetapi membuktikan bahawa laman web yang lambat tidak semestinya sinonim dengan kegagalan.

Gunakan gambar dengan betul

Kalau ada yang tahu gambar yang betul formats untuk digunakan dan bila, ia sepatutnya menjadi pereka, bukan? Tetapi yang menakjubkan nampaknya ramai daripada anda tidak tahu, atau apabila anda tahu, anda fikir ia tidak penting. Nah, inilah beritanya: ia penting, sepanjang masa.

Masalah ini telah mengumpul momentum sejak gaya templat tertentu telah diterima pakai sebagai piawaian defacto untuk tapak perniagaan, dan ini merupakan arah aliran yang tidak menunjukkan tanda-tanda perlahan. Sebagai pereka profesional, anda berhutang kepada diri sendiri dan pelanggan anda untuk tidak terjebak dalam pintasan reka bentuk yang malas.

Salah satu pintasan malang ini telah menggunakan imej PNG yang besar untuk unit wira di bahagian atas halaman (atau di tempat lain, tetapi di situlah anda biasanya akan menemuinya). Kini, tidak perlu dikatakan bahawa anda tidak sepatutnya melakukan ini, walaupun anda memerlukan bahagian telus dalam imej.

Berikut adalah asas-asas yang harus anda perhatikan semasa membuat karya itu:

  • Gunakan gambar besar dengan hemat jika sama sekali

Imej yang besar adalah idea yang mengerikan kerana semakin besar imej itu, semakin lama masa yang diperlukan untuk dimuatkan. Kini terdapat beberapa teknik berbeza yang boleh anda gunakan untuk menjadikan imej besar berfungsi dengan lebih cekap, tetapi sebelum kita membahasnya, katakan sahaja bahawa anda sepatutnya menggunakan imej yang lebih kecil pada kebanyakan masa, dan simpan yang besar untuk apabila ia sangat diperlukan.

  • Tetapkan nilai PPI / DPI dengan tepat

Bergantung pada editor grafik yang anda gunakan, ia mungkin menunjukkan nilai untuk DPI atau PPI. Yang terakhir adalah lebih baik, kerana ia menunjukkan editor grafik anda direka untuk kegunaan web dan bukannya cetakan. Masalah dengan menukar DPI dalam beberapa versi PhotoShop ialah mereka akan melaraskan bukan sahaja DPI tetapi juga dimensi fizikal imej anda juga. Ini bukan masalah dalam versi terkini PhotoShop (yang menggunakan PPI), jadi jika anda menggunakan versi yang lebih lama, sudah tiba masanya untuk menaik taraf. Atau gunakan GIMP sebaliknya.

  • Potong gambar besar

Di sinilah keajaiban bermula. Anda akan dapati ramai orang memberitahu anda bahawa menghiris imej anda tidak meningkatkan masa pemuatan kerana anda masih memuat turun bilangan bait yang sama dan apa-apa peningkatan yang dirasakan hanyalah psikologi. Mereka itu menggunakan versi penghirisan imej yang paling malas, jadi mereka tidak tahu kemungkinan sebenar.

Selepas menghiris imej anda, anda mempunyai peluang untuk mengoptimumkannya. Andaikan imej asal dalam PNG format, anda kini boleh menukar mana-mana bahagian tidak telus kepada JPG format, dan menjimatkan banyak bait, meninggalkan bahagian yang memerlukan ketelusan sebagai imej PNG.

Seterusnya anda boleh bermain dengan tahap pemampatan masing-masing dalamdivihirisan dua hingga bahagian tersebut dioptimumkan dengan sempurna. Kesan keseluruhan pengoptimuman ini dapat menghasilkan penjimatan lebih dari 50% berbanding dengan gambar asal yang tidak dioptimumkan.

Video juga boleh dioptimumkan

Seni pemampatan video bergantung pada dua perkara: sasaran format dan codec yang anda gunakan untuk pengekodan. yang mana format anda pilih bergantung sepenuhnya pada keperluan anda. Secara umum, jika anda memerlukan kualiti tinggi, MP4 dengan pengekodan H.264 akan memberikan kualiti terbaik pada pemampatan tinggi, tetapi apabila anda tidak memerlukan kualiti tinggi itu, WebM dan FLV menyediakan saiz fail yang lebih kecil. Perisian penyuntingan video anda mungkin masih menawarkan FLV sebagai pilihan, tetapi tidak disyorkan untuk menggunakan ini format.

Jika anda memerlukan kualiti DVD, MP4 dengan pengekodan H.264 akan memberikan hasil yang sangat baik, tetapi datang dengan kos muat turun yang besar. Untuk penstriman video, WebM memberikan pemampatan yang lebih baik. Masalahnya ialah belum semua sistem pengendalian mudah alih menyokong WebM (mereka sepatutnya, tetapi mereka nampaknya mempunyai alasan gila untuk tidak, mungkin mengikut peraturan emas pembangun mudah alih: anda akan menyusahkan dan mengelirukan pelanggan anda setakat yang anda boleh).

Sekiranya anda menggunakan codec MPEG-4 dan bukannya H.264 dengan video MP4? Umumnya tidak, kerana menghasilkan ukuran fail yang lebih besar pada tahap kualiti yang sama. Tetapi jika video anda akan mempunyai dimensi fizikal yang kecil, dan anda mahukan penghantaran video yang sempurna untuk streaming, MPEG-4 adalah codec yang baik kerana ia mempunyai pembetulan ralat yang terpasang untuk memastikan integriti data.

Bagaimana dengan WMV? Nah ini adalah kes khas. Ia memberikan kualiti video yang hampir sama dengan MP4, tetapi dengan pemampatan yang lebih baik. Kelemahannya di sini ialah pengguna Mac dan iOS hanya dapat melihat video anda jika mereka menggunakan penukar video payware, yang memperkenalkan kelewatan dalam pemutaran, yang sebenarnya adalah perkara yang cuba kita hindari dalam mengoptimumkan halaman kami.

Fail WMV tidak mempunyai sebarang isu untuk pengguna Android, Windows atau Linux. Tetapi dengan 12.5% โ€‹โ€‹komuniti Internet menggunakan peranti Apple, anda perlu memutuskan sama ada ia patut menyusahkan mereka. Secara peribadi saya tidak akan mengesyorkan anda berbuat demikian hanya untuk mendapatkan masa pemuatan yang lebih cepat.

Dan akhirnya, kerana ia adalah video internet, jika anda tidak membenarkan main balik skrin penuh atau mod teater, kecilkan saiz fizikal video kepada saiz yang akan anda paparkan pada halaman anda dan lihat berapa banyak bait yang boleh anda simpan .

Bogdan Rancea

Bogdan adalah ahli pengasas Inspired Mag, yang telah mengumpulkan hampir 6 tahun pengalaman dalam tempoh ini. Pada masa lapang dia suka belajar muzik klasik dan mendalami seni visual. Dia juga taksub dengan fixies juga. Dia sudah memiliki 5 orang.

Komen-komen Responses 0

Sila tinggalkan balasan anda

Alamat email anda tidak akan disiarkan. Ruangan yang diperlukan ditanda *

Kedudukan *

Laman web ini menggunakan Akismet untuk mengurangkan spam. Ketahui bagaimana data komen anda diproses.