如何使用幻灯片背景使我的网站更快

Question

我正在以幻灯片为背景的网站上工作。有超过40张照片，总重量为110MB。网站太多了 - 但我希望这些照片能够以全高清的形式出现。我知道我的网站会很慢，但我想听听一些如何使网站更快的建议，例如在PHP文件中运行照片，将其返回到屏幕的确切高度和宽度。

以下是我目前的幻灯片代码：

        var images = [];
        var str = "";
        for (var i = 0; i < 41; i++) {
            images[i] = 'image/bg/'+ (i + 1) +'.jpg';
        };

        function preloadImg(src) {
            $('<img/>')[0].src = src;
        }
        function shuffle(array) {
          var currentIndex = array.length, temporaryValue, randomIndex ;
          while (0 !== currentIndex) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
          }
          return array;
        }
        $.each(shuffle(images), function( index, value ) {
            preloadImg(value);
            str += "<div style='background-image: url("+ value +");' class='background"+ (index + 1) +"'></div>";
        });
        $("#background").append(str).children("div:gt(0)").hide();
        setInterval(function() { 
            $('#background > div:first').fadeOut(1000)
                                        .next()
                                        .fadeIn(1000)
                                        .end()
                                        .appendTo('#background');
        },  10000);