I have a slick slider that automatically starts when the page is open, but when it does it will often start half way, jump between slides (I assume while the images are loading), then start moving at quite a high speed before finally jumping into the correct position and settling at the correct speed (4000).

You can see this in action here on this Imgur gif (also here https://darlosworld.co.uk/slicktest.php)

Does anyone have any advice on getting the slider to start smoothly at the correct speed?
I should point out that even though the class names may appear Instagram related, the images are coming from the same server as the page, not Instagram. The images are random each time (set by php) and have a maximum file size of 60kb (the smallest is 16.6kb, the average file size is 31.5kb).

Edit 1: I have just tried without any of the CSS noted below, but the result is the same. Imgur Gif

Edit 2: I have tried setting centerMode to false and this does give a better starting position, only the jump/speed change issue remain. As such I'll be updating the code below, but will keep the original as a comment. The result is the same with and without the CSS (as attempted in Edit 1). Imgur Gif

The HTML for the slides is

<div class="instaboxes">
    <div class="instabox"><a href="#"><img src="image1.jpg"></a></div>
    <div class="instabox"><a href="#"><img src="image2.jpg"></a></div>
    <div class="instabox"><a href="#"><img src="image3.jpg"></a></div>
    <div class="instabox"><a href="#"><img src="image4.jpg"></a></div>
    <div class="instabox"><a href="#"><img src="image5.jpg"></a></div>
    <div class="instabox"><a href="#"><img src="image6.jpg"></a></div>
    <div class="instabox"><a href="#"><img src="image7.jpg"></a></div>
    <div class="instabox"><a href="#"><img src="image8.jpg"></a></div>
    <div class="instabox"><a href="#"><img src="image9.jpg"></a></div>
    <div class="instabox"><a href="#"><img src="image10.jpg"></a></div>
</div>

The script is

$(document).ready(function(){
  $('.instaboxes').slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    speed: 4000,
    autoplay: true,
    autoplaySpeed: 0,
    pauseOnFocus: false,
    pauseOnHover:false,
    cssEase: 'linear',
    //centerMode: true,
    centerMode: false,
    dots: false,
    prevArrow: false,
    nextArrow: false,
    variableWidth: true
  });
});

The CSS is

.instaboxes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    background: black;
}

.instaboxes .instabox {
    height: 200px;
    margin: 0 1.5px;
    padding: 0;
}

.instaboxes .instabox img {
    height: 100%;
    margin: 0;
}

The related slick files and JQuery are from CDNs.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>