Bagaimana modul dapat dinonaktifkan berdasarkan ukuran perangkat atau viewport di Joomla 3 untuk mengoptimalkan kinerja perangkat seluler?


14

Saya seorang pendukung Desain Web Responsif dalam hubungannya dengan Desain Web Adaptif (yaitu - satu desain yang menyesuaikan tampilan untuk semua perangkat dan menyediakan konten berdasarkan ukuran port tampilan) yang bertentangan dengan desain situs 'seluler' yang terpisah.

Ada beberapa kelemahan, misalnya, pada tampilan besar saya ingin memasukkan beberapa modul yang akan disembunyikan untuk ukuran viewport yang lebih kecil. Namun, dalam kasus di mana modul disembunyikan berdasarkan ukuran viewport, memuat dan mengeksekusi modul itu menyebabkan kinerja yang tidak perlu ketika diketahui bahwa modul tertentu tidak akan pernah ditampilkan pada ukuran viewport yang lebih kecil.

Bagaimana saya bisa menggunakan ukuran viewport untuk secara efektif menonaktifkan modul (yaitu menghentikannya dari mengeksekusi) untuk mempercepat kinerja?

Jawaban:


15

Advanced Module Manager ( http://www.nonumber.nl/extensions/advancedmodulemanager ) memungkinkan Anda untuk menetapkan modul berdasarkan TYPE browser. Jadi Anda dapat memilih ponsel, atau desktop, atau perangkat tertentu. Namun, ini tidak memungkinkan Anda untuk memilih berdasarkan ukuran, jadi hanya berguna pada tingkat tertentu.

Mungkin juga dengan kombinasi php dan javascript. Saya akan mengirimkan pertanyaan ini ke teman saya, dia mungkin punya ide.


Ide yang bagus, saya tidak pernah berpikir untuk menggunakan AMM dengan cara ini.
jackJoe

Peter menempatkan banyak fungsi luar biasa ke dalam AMM, itu harus dimiliki menurut saya.
Faye

Saya setuju dengan ini. Jika saya terjebak dengan tema yang tidak memiliki built in ini (warp 7 tema misalnya built in ini) maka saya akan menggunakan AMM.
Brian Peat

@BrianPeat - dapatkah Anda memberikan rincian lebih lanjut tentang cara kerjanya dengan WARP7?
NivF007

3
Warp 7 memiliki panel di admin template yang memungkinkan Anda mengklik tombol untuk desktop / tablet / telepon dan itu menghidupkan dan mematikan modul berdasarkan pengaturan tersebut. Tema roket melakukan sesuatu yang mirip dengan kelas khusus. Yang tidak saya ketahui adalah apakah modul-modulnya diturunkan, atau jika semuanya dimuat dan kemudian disembunyikan. Saya menduga itu yang terakhir karena Anda dapat melihatnya berubah saat Anda mengubah ukuran browser. Jika Anda benar-benar mengeluarkan barang berdasarkan ukuran, apa yang akan dilakukan jika Anda mengubah ukuran jendela secara aktif?
Brian Peat

10

Saya tidak berpikir Anda harus menonaktifkan modul seperti itu dan masih menyebutnya desain responsif. Bagian dari titik dengan responsif adalah bahwa ia akan menanggapi perubahan viewport dan tidak hanya mencetak tata letak yang berbeda untuk ukuran layar yang berbeda.

Bergantung pada ukuran layar contoh itu mungkin bahwa tablet dalam mode potret akan menyebabkan modul tidak memuat tetapi kemudian tablet yang sama mungkin membutuhkan konten itu sekali dalam mode lansekap.


3
Meskipun itu benar, itu tidak benar-benar efektif dalam praktik. Berarti pengguna iPhone tidak akan pernah memiliki resolusi layar 1440x900, bahkan mereka tidak akan memiliki kemampuan untuk mengubah ukuran viewport mereka. Desain responsif di mana orang-orang seperti "ooh melihat bagaimana hal berubah ketika saya mengubah ukuran jendela browser saya" benar-benar hanya efektif untuk desainer yang ingin pamer. Dalam praktiknya, baik-baik saja untuk mengambil pendekatan mematikan modul dan mengubah output untuk ukuran layar yang berbeda.
Don Gilbert

3
@Don Maaf itu bukan desain yang responsif, dan ada banyak orang di desktop yang memanfaatkan fitur pengubahan ukuran saat bekerja di windows. Desain responsif merespons perubahan viewport bukan dari perubahannya dari perangkat tertentu atau tidak.
Spunkie

2
Saya setuju. Tapi saya tidak setuju dengan tujuan "desain responsif". Seperti yang saya katakan, itu dimimpikan oleh desainer untuk pamer. Mereka lupa fakta bahwa iPhone tidak akan pernah memiliki resolusi besar. tl; dr - Desain responsif tidak masalah pada perangkat seluler. Saya lebih suka menghemat bandwidth jaringan daripada memiliki "desain responsif murni".
Don Gilbert

2
@ DonGilbert dan di Spunkie - IMO - Anda berdua benar. Definisi 'ketat' dari Desain Web Responsif tidak termasuk memodifikasi 'konten' - Saya akan mengedit pertanyaan untuk menyertakan RWD / AWD - Desain Web Responsif dan Pengiriman Web Adaptif en.wikipedia.org/wiki/Responsive_web_design
NivF007

8

Ini adalah kelas JS yang saya buat beberapa waktu lalu yang bisa menggunakan javascript untuk mendeteksi viewports, belum pernah melalui pengujian yang ketat tetapi berfungsi.

function ResJS(){
    this.min = 0;
    this.max = 0;
    this.config = config;
    this.width = function(){
        return jQuery(window).width();
    }
    this.breakpoint = function(min,max){
        this.min = min;
        this.max = max;
        this.outside = false;
        this.inside = false;
        this.triggeredOut = false;
        this.triggeredIn = false;
        this.enter = function(callback){
            var context = this;
            jQuery(window).on('resize',function(){
                if(context.min<context.width()&&context.max>context.width()){
                    if(!context.triggeredIn){
                        jQuery(document).ready(function(){callback(context.min,context.max)});
                        context.inside = true; //browser width has entered breakpoint
                        context.outside = false; //browser has left another breakpoint
                        context.triggeredIn = true; //triggered event for breakpoint
                        context.triggeredOut = false; //be ready to trigger leave event
                    }
                }else{
                    context.inside = false; //browser width is not within breakpoint
                    context.outside = true; //brower width is outside of breakpoint
                }
            });
            if(context.min<context.width()&&context.max>context.width()){
                jQuery(document).ready(function(){callback(context.min,context.max)});
                context.inside = true;
                context.outside = false;
                context.triggeredIn = true;
                context.triggeredOut = false;
            }else{
                context.inside = false;
                context.outside = true;
                context.triggeredOut = true;
                context.triggeredIn = false;
            }
            return this;
        }
        this.leave = function(callback){
            var context = this;
            jQuery(window).on('resize',function(){
                if(context.outside&&!context.triggeredOut){
                    jQuery(document).ready(function(){callback(context.min,context.max)});
                    context.triggeredIn = false;
                    context.triggeredOut = true;
                }
            });     
            return this;
        }
        return this;
    }
    return this;
}

Pada dasarnya Anda menggunakannya seperti ini

ResJS()
    .breakpoint(0,600)
    .enter(function(min,max){
        console.log(min,max,'enter');
    })
    .leave(function(min,max){
        console.log(min,max,'leave');
    });

Breakpoint memiliki parameter min / max untuk lebar, kemudian fungsi berantai untuk memasukkannya dan pergi, dengan panggilan balik untuk menjalankan beberapa kode JS.

Saya tidak bisa menjelaskan secara terperinci bagaimana cara kerjanya, seperti yang saya lakukan dulu tapi Anda bebas menggunakannya jika itu akan membantu. Ini dapat digunakan untuk memuat modul melalui ajax berdasarkan pada viewport. Saya percaya com_ajax joomla dapat digunakan dengan ini untuk membuat beberapa fitur yang sangat keren.


1
Ini terlihat seperti bagian utama dari teka-teki dan memiliki kemungkinan menarik - terima kasih atas jawabannya dan terutama untuk memposting kode.
NivF007

1
Jawaban teratas adalah rekan kerja saya, ini
kira-kira


3

Jika Anda ingin mempercepat kinerja maka jangan memuat modul yang tidak perlu. Jika tidak perlu di layar kecil maka itu juga tidak perlu di layar yang lebih besar.

Orang dengan tampilan perangkat yang lebih besar juga menginginkan situs web cepat yang tidak memuat cruft yang tidak perlu. Anda membuat asumsi yang salah bahwa layar yang lebih besar memiliki bandwidth lebih banyak tersedia. Mereka tidak melakukannya.

Jadilah perancang yang baik dan berikan semua pengguna Anda pengalaman situs yang dioptimalkan, terlepas dari ukuran layar mereka.


2

Saya menyarankan bahwa mengendus browser adalah cara yang salah untuk pergi di sini. Jika Anda hanya ingin memuat modul berdasarkan lebar layar, Anda harus menjalankan beberapa javascript, yang kemudian memanggil modul dengan AJAX (com_ajax). Ingatlah bahwa mungkin ada hasil dalam hal optimasi mesin pencari untuk konten yang dimuat oleh AJAX.


2

Saya biasanya menggunakan css @ media untuk mewujudkan hal ini. Membuatnya mudah untuk menyembunyikan hal-hal tergantung pada ukuran layar dan membuatnya parse untuk saat-saat ketika tablet lanskap cukup lebar untuk menunjukkannya dan lebar potret tidak. Berikut ini sebuah contoh:

@media (max-width:699px) {
    #moduleid, .modulewrapperclass {display:none}
}

Saya biasanya menggunakan ini untuk menyembunyikan seluruh posisi modul jadi saya mendasarkan pemilih css saya pada pembungkus posisi itu (atau posisi dalam beberapa template).


Terima kasih atas jawaban anda. Masalah dengan pendekatan media query CSS adalah bahwa Anda masih mengeksekusi modul (meskipun Anda memilih untuk tidak menampilkannya). Solusi yang saya cari tidak akan menjalankan modul kecuali ditampilkan.
NivF007

Seperti yang orang lain katakan, itu mungkin bukan ide terbaik untuk orang-orang yang mengubah ukuran viewport mereka setelah pemuatan halaman serta tablet landscape vs portrait. Beberapa ratus detik yang diperlukan server untuk mem-parsing modul ini tidak akan menjadi masalah dan karena ditampilkan: tidak ada pada perangkat yang lebih kecil Anda tidak me-rendernya sehingga tidak ada waktu yang hilang di sana. - Tetapi jika Anda benar-benar ingin tidak memuatnya, maka Advanced Module Manager mungkin adalah cara untuk menghubungkannya dengan jawaban lain.
pathfinder

1

Anda dapat memuatnya berdasarkan permintaan menggunakan beberapa javascript yang memanggil com_ajax dan hanya mengembalikan modul untuk ukuran saat ini.


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.