li(이미지) 전부를 흑백으로 하고 hover하면 색 이 들어가도록

취향상 수업내용과 반대로 해보았는데 li에 전부 흑백을 주면 프레임이 느려지네요,, 왜이런 현상이 생길까요 

그리고 크로스브라우징을 고려해서 filter 속성을 거의 사용하지 않는다 하셨는데 그럼 필터효과를 주려면 주로 어떤 다른속성을 사용해야하나요??

아래에 중복된 코드이미지가 안사라지네요ㅜ 위에꺼만 봐주세요

.gallery{
    display: flex;
    height: 100vh;
}

.gallery li{
    border-right: 5px solid black;
    flex: 1;
    transition: 0.5s;
    filter: grayscale(1);
}

.gallery li:last-child{
    border-right: none;
}

.gallery li:nth-child(1){
    background: url(../images/artistic-image-01.jpg)
    no-repeat center center;
}

.gallery li:nth-child(2){
    background: url(../images/artistic-image-02.jpg)
    no-repeat center center;
}

.gallery li:nth-child(3){
    background: url(../images/artistic-image-03.jpg)
    no-repeat center center;
}

.gallery li:nth-child(4){
    background: url(../images/artistic-image-04.jpg)
    no-repeat center center;
}

.gallery li:nth-child(5){
    background: url(../images/artistic-image-05.jpg)
    no-repeat center center;
}

.gallery li:hover{
    flex: 3;
    filter: grayscale(0);
}

/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

body{
    line-height: 1.5em;
    font-family: 'Arial';
    font-weight: 500;
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    }

ul,
li{
    padding: 0;
    margin: 0;
    list-style: none;
    
}

a{
    text-decoration: none;
    color: inherit;
}

.gallery{
    display: flex;
    height: 100vh;
}

.gallery li{
    border-right: 5px solid black;
    flex: 1;
    transition: 0.5s;
    filter: grayscale(1);
}

.gallery li:last-child{
    border-right: none;
}

.gallery li:nth-child(1){
    background: url(../images/artistic-image-01.jpg)
    no-repeat center center;
}

.gallery li:nth-child(2){
    background: url(../images/artistic-image-02.jpg)
    no-repeat center center;
}

.gallery li:nth-child(3){
    background: url(../images/artistic-image-03.jpg)
    no-repeat center center;
}

.gallery li:nth-child(4){
    background: url(../images/artistic-image-04.jpg)
    no-repeat center center;
}

.gallery li:nth-child(5){
    background: url(../images/artistic-image-05.jpg)
    no-repeat center center;
}

.gallery li:hover{
    flex: 3;
    filter: grayscale(0);
}