Trik Prestasi Web - Di Luar Asas

Artikel ini ditaja oleh New Relic. Terima kasih kerana menyokong penaja yang membuat SitePoint mungkin!

Kami mempunyai banyak perbincangan prestasi selama bertahun -tahun di SitePoint, dan kami percaya sudah tiba masanya untuk meninjau semula topik dengan beberapa aspek yang lebih maju. Pendekatan yang disebutkan dalam artikel ini tidak akan berkaitan dengan PHP, tetapi anda pasti akan membawa permohonan anda ke tahap yang baru jika digunakan dengan betul. Perhatikan bahawa kami tidak akan meliputi perkara biasa - permintaan yang lebih sedikit untuk CSS, JS dan imej yang bermaksud laman web yang lebih cepat dan petunjuk yang serupa adalah pengetahuan umum. Sebaliknya, kami akan memberi tumpuan kepada peningkatan yang kurang dikenali/digunakan.

Takeaways Key

Meminimumkan elemen HTML dan tag yang tidak perlu dapat membantu meningkatkan prestasi web. Menggunakan teknik prefetching untuk memuat sumber terlebih dahulu juga boleh meningkatkan kelajuan dan pengalaman pengguna.
Mengesahkan CSS anda menggunakan alat seperti CSSLINT dan CSS menerangkan untuk mengesan kesilapan dan isu prestasi yang berpotensi. Menggunakan CSS 2D Terjemahan untuk memindahkan objek bukannya atas/kiri juga boleh meningkatkan prestasi.
Modul PageSpeed ​​Google secara automatik boleh melaksanakan amalan terbaik untuk pengoptimuman laman web, meningkatkan hidangan sumber statik, meminimumkan dan mengoptimumkan CSS dan JavaScript, dan mengurangkan saiz imej.
Menggunakan algoritma mampatan sumber terbuka Google, Zopfli, boleh meningkatkan mampatan sebanyak 3-8%, yang boleh membuat perbezaan yang ketara untuk laman web yang melayani kandungan statik kepada sebilangan besar pelanggan.
• Pembetulan prestasi kecil boleh memberi kesan yang signifikan terhadap prestasi keseluruhan laman web. Gunakan alat seperti alat Har dan dev untuk memantau prestasi tapak anda dan melaksanakan penambahbaikan yang diperlukan.
html

Keluarkan tag yang tidak perlu

• unsur -unsur yang lebih sedikit, lebih baik. Keluarkan HTML yang tidak perlu.

  vs

  <span><span><span><div</span>></span>
  </span>    <span><span><span><div</span>></span>
  </span>        <span><span><span><p</span>></span>Some of my<span><span><span</span>></span>text<span><span></span</span>></span>.<span><span></p</span>></span>
  </span>    <span><span><span></div</span>></span>
  </span><span><span><span></div</span>></span></span>

  tidak berkenaan dengan semua senario, sudah tentu, tetapi struktur HTML anda dengan cara yang membolehkan anda mengeluarkan sebanyak mungkin elemen DOM.

  <span><span><span><div</span>></span>
  </span>    <span><span><span><p</span>></span>Some of my<span><span><span</span>></span>text<span><span></span</span>></span>.<span><span></p</span>></span>
  </span><span><span><span></div</span>></span></span>

  Anda juga boleh mengurangkan fail dokumen HTML dengan menghilangkan beberapa tag yang tidak diperlukan. Ini cenderung kelihatan agak hacky dan seolah -olah menentang piawaian, jadi ia hanya perlu dilakukan apabila menggunakan pengeluaran jika sama sekali - dengan cara itu anda tidak mengelirukan pemaju lain yang bekerja pada kod yang sama.

prefetch

• Prefecthing adalah apabila anda memberitahu penyemak imbas, sumber akan diperlukan terlebih dahulu. Sumber ini boleh menjadi IP domain (dns prefetch), sumber statik seperti imej atau fail CSS, atau bahkan keseluruhan halaman.

  Apabila anda mengharapkan pengguna pergi ke domain lain setelah melawat laman web anda, atau, sebagai contoh, anda menjadi tuan rumah sumber statik anda pada subdomain seperti image.example.com, prefetching DNS dapat membantu menghapuskan beberapa milisecond yang diperlukan untuk Pelayan DNS untuk menyelesaikan images.example.com ke alamat IP. Keuntungan tidak banyak, tetapi terkumpul, ia boleh mencukur beberapa masa pemuatan yang baik dari permintaan yang anda buat penyemak imbas pengguna anda. Prefetching DNS dilakukan dengan di seperti SO: dan disokong dalam semua pelayar utama. Jika anda mempunyai mana -mana subdomain anda mengharapkan pelawat semasa dimuatkan selepas mereka selesai dengan halaman yang sedang mereka lakukan, tidak ada sebab untuk tidak menggunakan DNS Prefetch.

  Apabila anda tahu beberapa sumber akan diperlukan pada lawatan seterusnya, anda boleh prefetch mereka dan menyimpannya dalam cache penyemak imbas. Sebagai contoh, jika anda mempunyai blog dan di blog itu artikel dua bahagian, anda boleh memastikan sumber statik (iaitu imej) dari bahagian kedua adalah pra-dimuatkan. Ini dilakukan seperti: . Album Web Picasa menggunakan ini secara meluas untuk pra-Fetch 2 imej berikut kepada yang sedang anda lihat. Pada penyemak imbas yang lebih tua, anda boleh membuat ini berlaku dengan memuatkan elemen imej hantu di JavaScript:

  <span><span><span><div</span>></span>
  </span>    <span><span><span><div</span>></span>
  </span>        <span><span><span><p</span>></span>Some of my<span><span><span</span>></span>text<span><span></span</span>></span>.<span><span></p</span>></span>
  </span>    <span><span><span></div</span>></span>
  </span><span><span><span></div</span>></span></span>

  Ini memuatkan imej ke dalam cache, tetapi tidak menggunakannya di mana -mana sahaja. Kaedah ini tidak akan berfungsi untuk fail CSS dan JS, walaupun, jadi anda perlu menjadi inventif dengan sumber -sumber tersebut jika anda mahu mereka prefetched pada pelayar kuno. Xmlhttprequest Springs to Mind - Muatkan mereka melalui Ajax, dan jangan gunakan mereka di mana -mana sahaja. Lihat di sini bagaimana untuk menariknya.
  Satu perkara yang perlu diperhatikan ialah prefetching hanya sumber yang kita pasti atau hampir pasti pengguna perlukan. Jika pengguna membaca catatan blog yang dipertahankan, pasti, prefetch. Sekiranya pengguna berada di skrin penyerahan borang, pastinya prefetch sumber yang mereka harapkan pada skrin yang mereka dapat diarahkan selepas menyerahkan. Jangan prefetch seluruh laman web anda, dan jangan prefetch secara rawak - pertimbangkan jalur lebar, dan gunakan prefetching dengan berhati -hati, menyimpan peranti mudah alih dalam fikiran. Peranti mudah alih biasanya pada jalur lebar terhad, dan pra-muat turun imej 2MB mungkin tidak akan menjadi mesra pengguna. Anda boleh mengelakkan isu -isu ini dengan selektif prefetching - mengesan apabila pengguna berada pada peranti mudah alih atau pada sambungan jalur lebar yang terhad dan tidak menggunakan prefetching dalam kes tersebut. Lebih baik lagi, tambahkan tetapan ke laman web anda dan minta orang ramai bersetuju untuk mempersembahkan prefetching - simpan keutamaan mereka ke LocalStorage dan hash dengan rentetan ejen pengguna, membolehkan mereka membenarkan atau tidak membenarkan prefetching pada setiap peranti secara berasingan.

  Anda juga boleh prefetch dan prerender keseluruhan halaman. Halaman Prefetching bermaksud mengambil kandungan DOM mereka - HTML. Ini biasanya tidak memberikan banyak rangsangan kelajuan kerana kebanyakan kandungan sebenarnya berada di JavaScript, CSS dan Imej - kandungan yang tidak diambil oleh prefetch halaman. Jenis pengambilan ini hanya disokong sepenuhnya oleh Firefox. Prerendering adalah perkara lain - prerendering hanya dalam Chrome, dan ia bukan sahaja mengambil DOM di belakang tabir, tetapi juga semua kandungan yang berkaitan dalam bentuk CSS, JS dan imej. Malah, ia telah menjadikan seluruh halaman di latar belakang - halaman itu duduk di RAM, dibuka sepenuhnya dan diberikan, menunggu untuk dikunjungi. Ini membolehkan perubahan itu segera apabila pengguna mengklik pautan prerender, tetapi memperkenalkan masalah yang sama seperti yang diterangkan dalam perenggan sebelumnya - jalur lebar boleh menderita. Di samping itu, pelayan anda mendaftarkan prerender ini sebagai lawatan, jadi anda mungkin mendapat beberapa analisis miring jika pengguna sebenarnya mengubah fikirannya dan tidak akan membuka laman web prerendered. Sintaks prerender adalah: .

  Pada masa ini, hanya ada satu cara yang tepat untuk mengesan halaman anda yang diprediksi atau prefetched, dan itu dengan API Lampiran Halaman, yang kini disokong dalam semua pelayar utama kecuali Pelayar Android dan Opera Mini. Anda menggunakan API ini untuk memastikan halaman itu sebenarnya ditonton, dan kemudian memulakan sebarang penjejakan analisis yang mungkin anda lakukan.

CSS

• CSS LINT

  Gunakan CSSLINT untuk mengesahkan CSS anda dan menunjukkan kesilapan dan masalah prestasi yang berpotensi. Baca dan hormati peraturan yang dikemukakan dalam wiki CSSLINT untuk menulis CSS yang paling berkesan.

• CSS Jelaskan

  Sama seperti SQL Jelaskan dalam dunia pangkalan data, terdapat juga alat CSS yang jelas juga-https://github.com/josh/css-explain. Anda boleh menggunakannya untuk menganalisis pemilih CSS anda. Jika anda ingin mengujinya dengan serta -merta, tampal kandungan fail ini ke dalam konsol penyemak imbas anda, dan hanya mengeluarkan arahan seperti cssexplain ('. Item.subclass.anotherclass').

  

  Matlamatnya adalah untuk mendapatkan skor terendah pada skala 1 hingga 10. Anda juga boleh mencubanya di JSFiddle saya. Walaupun hasilnya tidak boleh diambil terlalu serius (anda lebih baik mengikuti nasihat CSSLINT), mereka masih melakukan pekerjaan yang baik untuk menjelaskan kerumitan pemilih dan sekurang -kurangnya memberi petunjuk pada masalah yang mungkin.
  Terjemahan vs atas/kiri
• Gunakan CSS 2D Terjemahan untuk memindahkan objek dan bukannya atas/kiri. Tidak ada gunanya untuk menerangkannya secara terperinci apabila Paul Irish dan Chris Coyer melakukan pekerjaan yang hebat. Pastikan anda membaca/menonton bahan mereka dan membakar pengetahuan ini dalam -

  Gunakan Terjemahan di atas/kiri apabila mungkin

  .

• Tatal lancar

  anda mungkin menyedari bahawa laman web seperti Facebook dan Google mengambil usia untuk menjadi scrollable ketika membukanya. Ia hampir seperti mereka memerlukan masa untuk memanaskan badan. Ini adalah masalah di banyak laman web hari ini, dan UX Gutpunch yang besar. Mendapatkan halaman anda untuk menatal dengan lancar tidak begitu sukar kerana ia kelihatan - terutamanya apabila anda tahu apa yang perlu diperhatikan. Kunci untuk mengurangkan lag skrol adalah meminimumkan cat - cat adalah apa yang berlaku apabila kandungan pada skrin anda berubah dari bingkai ke bingkai, dan penyemak imbas perlu mengecatnya pada skrin - ia perlu mengira rupa baru, dan menampar pandangan baru ini ke Salah satu lapisan laman web yang diberikan terdiri daripada. Untuk maklumat lanjut mengenai isu -isu ini, dan untuk mengetahui cara mendiagnosis masalah cat, lihat jawatan yang sangat baik Paul Lewis.

Server

• Mengoptimumkan PHP anda dengan beberapa kemenangan mudah

  Terdapat banyak perkara yang boleh anda lakukan untuk mempercepatkan aplikasi anda dari sisi PHP. Untuk beberapa kemenangan mudah, lihat artikel terakhir Fredric Mitchell atau mana -mana artikel berkaitan prestasi lain di SitePoint.

• Gunakan modul PageSpeed ​​Google

  Modul PageSpeed ​​oleh Google adalah modul yang anda boleh pasang ke Nginx dan Apache yang secara automatik melaksanakan beberapa amalan terbaik untuk pengoptimuman laman web. Modul ini menilai prestasi laman web seperti yang dilihat oleh pelanggan, memastikan semua peraturan dihormati sebanyak mungkin dan meningkatkan hidangan sumber statik khususnya. Ia akan meminimumkan, mengoptimumkan dan memampatkan CSS dan JavaScript untuk anda, mengurangkan saiz imej dengan mengeluarkan data meta yang tidak digunakan, menetapkan header tamat tempoh dengan lebih baik untuk menggunakan cache penyemak imbas dengan lebih baik, dan banyak lagi. Paling penting - ia tidak memerlukan perubahan seni bina daripada anda. Cukup pasangkannya ke pelayan anda dan ia berfungsi. Untuk memasang modul, ikuti arahan ini - anda perlu membina dari sumber untuk nginx, tetapi itu adalah beberapa arahan kerja. Untuk diperkenalkan dengan betul ke PagesPeed, lihat video berikut - ia agak panjang dan lama sekarang, tetapi masih merupakan sumber yang sangat berharga:

• Gunakan SPDY
  Dalam usaha yang serupa dengan PagesPeed, Google juga mengetuai pembangunan SPDY. mod_spdy adalah modul Apache yang lain yang direka untuk melayani laman web anda dengan lebih cepat. Memasangnya tidak semudah yang mungkin disukai, dan ia memerlukan sokongan penyemak imbas juga, tetapi itu kelihatan lebih baik pada hari itu. SPDY sebenarnya adalah protokol (sama seperti HTTP adalah protokol) yang memintas dan menggantikan permintaan HTTP di mana dapat, melayani tapak lebih cepat. Lihat gambaran keseluruhan tahap tinggi ini untuk maklumat lanjut, atau lebih baik, pecahan mesra baru ini. Semasa menggunakan SPDY boleh berisiko kerana kami masih menunggu penggunaan yang lebih meluas, keuntungan kelihatan lebih besar daripada risiko setakat ini.

• Gunakan Webp untuk Imej

  Webp adalah format imej yang bertujuan untuk menggantikan semua yang lain - JPG, PNG dan GIF. Ia menyokong lapisan alpha (ketelusan), animasi, mampatan lossless dan lossy, dan banyak lagi. Adopsi penyemak imbas telah sangat perlahan, tetapi mudah untuk menyokong semua jenis imej hari ini dengan alat yang mengautomasikan penukaran WEBP seperti modul PageSpeed ​​yang disebutkan di atas (ia secara automatik boleh menukar imej ke WebP on-the-fly). Untuk pengenalan dan perbincangan yang mendalam mengenai Webp, lihat panduan komprehensif ini.

• kompres dengan zopfli

  Gunakan mampatan Zopfli untuk pra-kompres sumber statik anda. Ia adalah algoritma mampatan sumber terbuka, sekali lagi diterajui oleh Google, yang meningkatkan mampatan sebanyak 3-8% berbanding dengan kaedah mampatan biasa yang digunakan dalam talian. Di laman web yang lebih kecil ini tidak membuat perbezaan, tetapi jika anda mengukur aplikasi anda atau melayani kandungan statik anda kepada banyak pelanggan, ia pasti akan membuat perbezaan yang ketara, seperti yang dilaporkan oleh pasukan Font Web Google:

Kesimpulan

Terdapat banyak cara untuk meningkatkan prestasi aplikasi anda, dan seperti yang sering dalam kehidupan - keseluruhannya lebih besar daripada jumlah bahagian. Melaksanakan beberapa langkah yang telah kami sebutkan dalam artikel ini dan mereka yang terdahulu, dan anda akan mendapat peningkatan yang baik dan ketara. Melaksanakan mereka semua, dan anda mempunyai aplikasi yang begitu cepat dan cahaya ia dapat bergerak melalui masa. Pantau aplikasi anda, gunakan HAR, lihat alat dev yang profil atau daftar untuk perkhidmatan yang melakukan semua ini untuk anda - jangan mengabaikan aspek prestasi laman web anda. Walaupun kebanyakan projek hari ini adalah "lakukan dan berlepas", jangan tinggalkan pelanggan anda dengan laman web yang anda tidak bangga.

tidak pernah memandang rendah pembetulan kecil yang boleh anda lakukan - anda tidak pernah tahu mana yang akan menjadi titik tip untuk kecemerlangan!

Soalan Lazim (Soalan Lazim) pada Trik Prestasi Web

Apakah perbezaan antara tag div dan span dalam HTML? Tag Div adalah elemen peringkat blok yang digunakan untuk potongan kod yang lebih besar, manakala tag span adalah elemen inline yang digunakan untuk sebahagian kecil HTML di dalam baris. Perbezaan utama di antara mereka adalah bagaimana ia mempengaruhi susun atur halaman web. Elemen Div membuat barisan baru dan mengambil lebar penuh yang tersedia, sementara elemen span tidak membuat garis baru dan hanya mengambil lebar sebanyak yang diperlukan.

Bagaimana saya dapat meningkatkan prestasi laman web saya?

Terdapat beberapa cara untuk meningkatkan prestasi laman web anda. Salah satu kaedah yang paling berkesan adalah untuk mengoptimumkan imej anda. Imej-imej resolusi yang besar dan tinggi dapat melambatkan tapak anda, jadi penting untuk mengubah saiz, memampatkan, dan mengoptimumkannya. Kaedah lain adalah untuk meminimumkan fail CSS dan JavaScript anda, yang boleh mengurangkan saiz fail anda dan mempercepatkan laman web anda. Anda juga boleh menggunakan rangkaian penghantaran kandungan (CDN) untuk menyampaikan kandungan anda dengan lebih cepat kepada pengguna di seluruh dunia.

Apakah kesan prestasi laman web pada pengalaman pengguna? kesan yang signifikan terhadap pengalaman pengguna. Laman web lambat boleh menggagalkan pengguna dan membawa kepada kadar lantunan yang lebih tinggi. Sebaliknya, laman web pemuatan cepat dapat meningkatkan kepuasan pengguna, meningkatkan penglibatan, dan berpotensi membawa kepada kadar penukaran yang lebih tinggi. Oleh itu, penting untuk mengoptimumkan prestasi laman web anda untuk memberikan pengalaman pengguna yang terbaik. Sangat menjejaskan prestasi laman web. Sebagai contoh, tag yang tidak perlu, penggunaan jadual yang berlebihan, dan penggunaan bentuk yang tidak betul boleh melambatkan laman web anda. Sebaliknya, HTML yang bersih, berstruktur dengan baik dapat meningkatkan kelajuan pemuatan dan prestasi keseluruhan laman web anda. Preloading untuk memuat sumber di latar belakang, melaksanakan push pelayan untuk menghantar pelbagai respons untuk permintaan pelanggan tunggal, dan menggunakan pekerja perkhidmatan untuk sumber cache dan melayani mereka terus dari cache. Teknik -teknik ini dapat meningkatkan prestasi laman web anda dengan ketara, tetapi mereka memerlukan pemahaman yang mendalam tentang teknologi web dan pelaksanaan yang teliti. Ukur prestasi laman web anda, termasuk PageSpeed ​​Insights, GTMeTrix, dan WebpageTest Google. Alat ini dapat memberikan pandangan terperinci ke dalam kelajuan pemuatan laman web anda, penggunaan sumber, dan metrik prestasi lain. Mereka juga boleh memberikan cadangan tentang bagaimana untuk meningkatkan prestasi laman web anda. Walaupun ia dapat meningkatkan fungsi dan interaktiviti laman web, JavaScript yang ditulis dengan baik atau berlebihan dapat melambatkan laman web. Oleh itu, penting untuk menulis JavaScript yang cekap, meminimumkan penggunaannya, dan menangguhkan atau tidak secara tidak sengaja memuatkan fail JavaScript untuk meningkatkan prestasi laman web anda.

Bagaimanakah CSS mempengaruhi prestasi laman web?

CSS mempengaruhi prestasi laman web dalam beberapa cara. Fail CSS yang besar dan kompleks boleh melambatkan laman web anda, jadi penting untuk memastikan CSS anda bersih dan teratur. Anda juga harus mengelakkan menggunakan animasi CSS yang berlebihan, kerana ia boleh menyebabkan masalah prestasi. Di samping itu, anda harus menggunakan sprite CSS untuk menggabungkan pelbagai imej ke dalam satu, mengurangkan bilangan permintaan HTTP dan meningkatkan kelajuan pemuatan laman web anda.

Apakah kesan masa tindak balas pelayan pada prestasi laman web? > Masa tindak balas pelayan adalah jumlah masa yang diperlukan untuk pelayan untuk menjawab permintaan dari penyemak imbas. Waktu tindak balas pelayan yang perlahan dapat melambatkan laman web anda dengan ketara, sementara waktu tindak balas pelayan yang cepat dapat meningkatkan kelajuan pemuatan laman web anda. Oleh itu, penting untuk memilih penyedia hosting yang boleh dipercayai dan mengoptimumkan konfigurasi pelayan anda untuk meningkatkan masa tindak balas pelayan anda.

Bagaimana saya boleh mengoptimumkan laman web saya untuk peranti mudah alih? adalah penting, kerana semakin banyak pengguna melayari web pada telefon pintar dan tablet mereka. Anda boleh mengoptimumkan laman web anda untuk peranti mudah alih dengan menggunakan reka bentuk responsif, mengoptimumkan imej untuk mudah alih, mengurangkan penggunaan JavaScript dan CSS berat, dan melaksanakan navigasi mesra mudah alih. Anda juga harus menguji laman web anda di pelbagai peranti mudah alih untuk memastikan ia berfungsi dengan baik pada mereka semua.

Atas ialah kandungan terperinci Trik Prestasi Web - Di Luar Asas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!