Using the HTML width & height attributes to improve web page loading

Transcript

1. Jen Simmons web
   technologies evangelist at
   Apple.
   using the width and height
   attributes in HTML
   to improve the page loading
   experience / to
   reduce “layout shift”
   oct 2 / 2020
   

   View Slide

2. tldr;
   

   View Slide

3. In your HTML, 

   put width & height attributes
   
   
   
   on all your images
   

   View Slide

4. 
   
   alt="[description]
   "
   
   
   width="600
   "
   
   
   height="470">
   Morbi mollis volutpat venenatis. Duis in diam
   elementum, rutrum nisi vitae, feugiat risus. Ut
   posuere, erat non ultricies tincidunt, ante justo congue
   tellus, non mattis metus mauris in ante. Quisque non
   nisi velit. Class aptent taciti sociosqu ad litora
   torquent per conubia nostra, per inceptos himenaeos
   .
   
   
   Mauris pharetra, purus ut porttitor pellentesque, eros
   mi tincidunt elit, nec porta neque est ut turpis. Nullam
   urna ante, mollis commodo urna non, congue tempus
   lectus. Praesent tincidunt pellentesque turpis, quis
   dignissim erat convallis ac. . Proin arcu ex, viverra sit
   amet porttitor eu, condimentum in nisl. Etiam vel
   Lorem ipsum dolor sit amet, consectetur adipiscing
   elit. Sed in tristique nibh. Aenean sollicitudin enim
   sem, sed volutpat mauris volutpat et.
   

   View Slide

5. Morbi mollis volutpat venenatis. Duis in diam
   elementum, rutrum nisi vitae, feugiat risus. Ut
   posuere, erat non ultricies tincidunt, ante justo congue
   tellus, non mattis metus mauris in ante. Quisque non
   nisi velit. Class aptent taciti sociosqu ad litora
   torquent per conubia nostra, per inceptos himenaeos.
   Mauris pharetra, purus ut porttitor pellentesque, eros
   mi tincidunt elit, nec porta neque est ut turpis. Nullam
   urna ante, mollis commodo urna non, congue tempus
   lectus. Praesent tincidunt pellentesque turpis, quis
   dignissim erat convallis ac. . Proin arcu ex, viverra sit
   amet porttitor eu, condimentum in nisl. Etiam vel
   Morbi mollis volutpat venenatis. Duis in diam
   elementum, rutrum nisi vitae, feugiat risus. Ut
   posuere, erat non ultricies tincidunt, ante justo congue
   tellus, non mattis metus mauris in ante. Quisque non
   nisi velit. Class aptent taciti sociosqu ad litora
   torquent per conubia nostra, per inceptos himenaeos.
   Mauris pharetra, purus ut porttitor pellentesque, eros
   Lorem ipsum dolor sit amet, consectetur adipiscing
   elit. Sed in tristique nibh. Aenean sollicitudin enim
   sem, sed volutpat mauris volutpat et.
   Lorem ipsum dolor sit amet, consectetur adipiscing
   elit. Sed in tristique nibh. Aenean sollicitudin enim
   sem, sed volutpat mauris volutpat et.
   Morbi mollis volutpat venenatis. Duis in diam
   elementum, rutrum nisi vitae, feugiat risus. Ut
   posuere, erat non ultricies tincidunt, ante justo congue
   tellus, non mattis metus mauris in ante. Quisque non
   nisi velit. Class aptent taciti sociosqu ad litora
   torquent per conubia nostra, per inceptos himenaeos.
   Mauris pharetra, purus ut porttitor pellentesque, eros
   
   
   alt="[description]
   "
   
   
   width="600
   "
   
   
   height="470">
   
   
   alt="[description]">
   

   View Slide

6. Morbi mollis volutpat venenatis.
   Duis in diam elementum, rutrum
   nisi vitae, feugiat risus. Ut
   posuere, erat non ultricies
   tincidunt, ante justo congue tellus,
   non mattis metus mauris in ante.
   Quisque non nisi velit. Class
   aptent taciti sociosqu ad litora
   torquent per conubia nostra, per
   inceptos himenaeos
   .
   
   
   Mauris pharetra, purus ut
   porttitor pellentesque, eros mi
   tincidunt elit, nec porta neque est
   ut turpis. Nullam urna ante,
   mollis commodo urna non,
   Lorem ipsum dolor sit amet,
   consectetur adipiscing elit. Sed in
   tristique nibh. Aenean sollicitudin
   enim sem, sed volutpat mauris
   volutpat et.
   Morbi mollis volutpat venenatis. Duis in diam
   elementum, rutrum nisi vitae, feugiat risus. Ut
   posuere, erat non ultricies tincidunt, ante justo congue
   tellus, non mattis metus mauris in ante. Quisque non
   nisi velit. Class aptent taciti sociosqu ad litora
   torquent per conubia nostra, per inceptos himenaeos
   .
   
   
   Mauris pharetra, purus ut porttitor pellentesque, eros
   mi tincidunt elit, nec porta neque est ut turpis. Nullam
   urna ante, mollis commodo urna non, congue tempus
   lectus. Praesent tincidunt pellentesque turpis, quis
   dignissim erat convallis ac. . Proin arcu ex, viverra sit
   amet porttitor eu, condimentum in nisl. Etiam vel
   Lorem ipsum dolor sit amet, consectetur adipiscing
   elit. Sed in tristique nibh. Aenean sollicitudin enim
   sem, sed volutpat mauris volutpat et.
   How do you
   know HOW BIG
   ?
   
   
   What width
   ?
   
   
   What height?
   

   View Slide

7. 
   
   alt="[description]
   "
   
   
   width="600
   "
   
   
   height="470">
   Keep it simple
   .
   
   
   Use the
   
   
   
   number 

   of pixels
   
   
   
   that are 

   in the image
   .
   
   
   600 pixels wide
   470 pixels high
   

   View Slide

8. This is metadata 

   for the image file
   .
   
   
   This is not about
   
   
   
   layout. Or sizing.
   
   
   
   CSS handles layou
   t
   
   
   and sizing
   .
   
   
   This is HTML. 

   This is content data.
   
   
   alt="[description]
   "
   
   
   width="600
   "
   
   
   height="470">
   

   View Slide

9. 
   
   alt="[description]
   "
   
   
   width="600
   "
   
   
   height="470">
   

   View Slide

10. 
    
    alt="[description]
    "
    
    
    width="600
    "
    
    
    height="470">
    Just “470”
    .
    
    
    No unit
    .
    
    
    No “px”
    .
    
    
    Just the 

    number of pixels 

    as unitless number.
    

    View Slide

11. What’s is happening
    ?
    
    
    What changed?
    

    View Slide

12. View Slide

13. Morbi mollis volutpat venenatis. Duis in diam
    elementum, rutrum nisi vitae, feugiat risus. Ut
    posuere, erat non ultricies tincidunt, ante justo congue
    tellus, non mattis metus mauris in ante. Quisque non
    nisi velit. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos.
    Mauris pharetra, purus ut porttitor pellentesque, eros
    mi tincidunt elit, nec porta neque est ut turpis. Nullam
    urna ante, mollis commodo urna non, congue tempus
    lectus. Praesent tincidunt pellentesque turpis, quis
    dignissim erat convallis ac. . Proin arcu ex, viverra sit
    amet porttitor eu, condimentum in nisl. Etiam vel
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Sed in tristique nibh. Aenean sollicitudin enim
    sem, sed volutpat mauris volutpat et.
    

    View Slide

14. Morbi mollis volutpat venenatis. Duis in diam
    elementum, rutrum nisi vitae, feugiat risus. Ut
    posuere, erat non ultricies tincidunt, ante justo congue
    tellus, non mattis metus mauris in ante. Quisque non
    nisi velit. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos.
    Mauris pharetra, purus ut porttitor pellentesque, eros
    mi tincidunt elit, nec porta neque est ut turpis. Nullam
    urna ante, mollis commodo urna non, congue tempus
    lectus. Praesent tincidunt pellentesque turpis, quis
    dignissim erat convallis ac. . Proin arcu ex, viverra sit
    amet porttitor eu, condimentum in nisl. Etiam vel
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Sed in tristique nibh. Aenean sollicitudin enim
    sem, sed volutpat mauris volutpat et.
    

    View Slide

15. This is not the first time 

    we’ve had this problem.
    

    View Slide

16. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tristique nibh. Aenean
    sollicitudin enim sem, sed volutpat mauris volutpat et.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tristique nibh. Aenean
    sollicitudin enim sem, sed volutpat mauris volutpat et.
    Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi vitae, feugiat
    risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis
    metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos.
    
    
    
    
    alt="[description]">
    
    
    width="600
    "
    
    
    height="275
    "
    
    
    alt="[description]">
    Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi vitae, feugiat
    risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis
    metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos.
    *this was a problem in the 1990s & 2000s, too. Solved in HTML3.0.
    

    View Slide

17. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tristique nibh. Aenean
    sollicitudin enim sem, sed volutpat mauris volutpat et.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tristique nibh. Aenean
    sollicitudin enim sem, sed volutpat mauris volutpat et.
    Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi vitae, feugiat
    risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis
    metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos.
    Morbi mollis volutpat venenatis. Duis in diam elementum, rutrum nisi vitae, feugiat
    risus. Ut posuere, erat non ultricies tincidunt, ante justo congue tellus, non mattis
    metus mauris in ante. Quisque non nisi velit. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos.
    *this was a problem in the 1990s & 2000s, too. Solved in HTML3.0.
    
    
    
    
    alt="[description]">
    
    
    width="600
    "
    
    
    height="275
    "
    
    
    alt="[description]">
    

    View Slide

18. 2009-2019
    1996-2009 2020+
    1993-1996
    fixed
    broken fixed
    broken
    

    View Slide

19. 2009-2019
    1996-2009 2020+
    1993-1996
    fixed
    broken fixed
    broken
    Started resizing
    images with CSS
    

    View Slide

20. Morbi mollis volutpat venenatis. Duis in diam
    elementum, rutrum nisi vitae, feugiat risus. Ut
    posuere, erat non ultricies tincidunt, ante justo congue
    tellus, non mattis metus mauris in ante. Quisque non
    nisi velit. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos.
    Mauris pharetra, purus ut porttitor pellentesque, eros
    mi tincidunt elit, nec porta neque est ut turpis. Nullam
    urna ante, mollis commodo urna non, congue tempus
    lectus. Praesent tincidunt pellentesque turpis, quis
    dignissim erat convallis ac. . Proin arcu ex, viverra sit
    amet porttitor eu, condimentum in nisl. Etiam vel
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Sed in tristique nibh. Aenean sollicitudin enim
    sem, sed volutpat mauris volutpat et.
    img
    {
    
    
    }
    fixed-width design
    
    
    alt="[description]
    "
    
    
    width="600
    "
    
    
    height="470">
    600
    470
    

    View Slide

21. Morbi mollis volutpat venenatis. Duis in diam
    elementum, rutrum nisi vitae, feugiat risus. Ut
    posuere, erat non ultricies tincidunt, ante justo congue
    tellus, non mattis metus mauris in ante. Quisque non
    nisi velit. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos.
    Mauris pharetra, purus ut porttitor pellentesque, eros
    mi tincidunt elit, nec porta neque est ut turpis. Nullam
    urna ante, mollis commodo urna non, congue tempus
    lectus. Praesent tincidunt pellentesque turpis, quis
    dignissim erat convallis ac. . Proin arcu ex, viverra sit
    amet porttitor eu, condimentum in nisl. Etiam vel
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Sed in tristique nibh. Aenean sollicitudin enim
    sem, sed volutpat mauris volutpat et.
    img
    {
    
    
    width: 100%
    ;
    
    
    height: auto
    ;
    
    
    }
    before Dec 2019
    
    
    alt="[description]
    "
    
    
    width="600
    "
    
    
    height="470">
    ?
    height….
    
    
    
    ????
    ?
    
    
    how about
    
    
    
    zero
    ?
    calculated width
    OMG CSS
    
    
    
    WHAT DO
    
    
    
    I DO
    

    View Slide

22. 2009-2019
    1996-2009 2020+
    1993-1996
    fixed
    broken fixed
    broken
    Change to interaction of
    CSS & HTML attributes
    

    View Slide

23. Morbi mollis volutpat venenatis. Duis in diam
    elementum, rutrum nisi vitae, feugiat risus. Ut
    posuere, erat non ultricies tincidunt, ante justo congue
    tellus, non mattis metus mauris in ante. Quisque non
    nisi velit. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos.
    Mauris pharetra, purus ut porttitor pellentesque, eros
    mi tincidunt elit, nec porta neque est ut turpis. Nullam
    urna ante, mollis commodo urna non, congue tempus
    lectus. Praesent tincidunt pellentesque turpis, quis
    dignissim erat convallis ac. . Proin arcu ex, viverra sit
    amet porttitor eu, condimentum in nisl. Etiam vel
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Sed in tristique nibh. Aenean sollicitudin enim
    sem, sed volutpat mauris volutpat et.
    X = calculated width
    now in 2020…
    height
    60
    0
    
    
    470
    X
    
    
    Y
    =
    Y
    img
    {
    
    
    width: 100%
    ;
    
    
    height: auto
    ;
    
    
    }
    
    
    alt="[description]
    "
    
    
    width="600
    "
    
    
    height="470">
    

    View Slide

24. 2009-2019
    1996-2009 2020+
    1993-1996
    fixed
    broken fixed
    broken
    Lots of handy
    tooling from this
    era we can use
    

    View Slide

25. 2009-2019
    1996-2009 2020+
    1993-1996
    fixed
    broken fixed
    broken
    

    View Slide

26. View Slide

27. View Slide

28. Morbi mollis volutpat venenatis. Duis in diam
    elementum, rutrum nisi vitae, feugiat risus. Ut
    posuere, erat non ultricies tincidunt, ante justo congue
    tellus, non mattis metus mauris in ante. Quisque non
    nisi velit. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos.
    Mauris pharetra, purus ut porttitor pellentesque, eros
    mi tincidunt elit, nec porta neque est ut turpis. Nullam
    urna ante, mollis commodo urna non, congue tempus
    lectus. Praesent tincidunt pellentesque turpis, quis
    dignissim erat convallis ac. . Proin arcu ex, viverra sit
    amet porttitor eu, condimentum in nisl. Etiam vel
    Morbi mollis volutpat venenatis. Duis in diam
    elementum, rutrum nisi vitae, feugiat risus. Ut
    posuere, erat non ultricies tincidunt, ante justo congue
    tellus, non mattis metus mauris in ante. Quisque non
    nisi velit. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos.
    Mauris pharetra, purus ut porttitor pellentesque, eros
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Sed in tristique nibh. Aenean sollicitudin enim
    sem, sed volutpat mauris volutpat et.
    Morbi mollis volutpat venenatis. Duis in diam
    elementum, rutrum nisi vitae, feugiat risus. Ut
    posuere, erat non ultricies tincidunt, ante justo congue
    tellus, non mattis metus mauris in ante. Quisque non
    nisi velit. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos.
    Mauris pharetra, purus ut porttitor pellentesque, eros
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Sed in tristique nibh. Aenean sollicitudin enim
    sem, sed volutpat mauris volutpat et.
    
    
    alt="[description]
    "
    
    
    width="600
    "
    
    
    height="470">
    Browser without
    support
    Browser with
    support
    

    View Slide

29. Potential Problem.
    

    View Slide

30. View Slide

31. View Slide

32. 
    
    alt="[description]">
    img
    {
    
    
    width: 100%
    ;
    
    
    }
    
    
    alt="[description]
    "
    
    
    width="600
    "
    
    
    height="470">
    img
    {
    
    
    width: 100%
    ;
    
    
    height: auto
    ;
    
    
    }
    

    View Slide

33. 
    
    alt="[description]">
    img
    {
    
    
    width: 100%
    ;
    
    
    }
    
    
    alt="[description]
    "
    
    
    width="500
    "
    
    
    height="400">
    img
    {
    
    
    width: 100%
    ;
    
    
    height: auto
    ;
    
    
    }
    
    
    alt="[description]
    "
    
    
    width="500
    "
    
    
    height="400">
    img
    {
    
    
    width: 100%
    ;
    
    
    }
    

    View Slide

34. img
    {
    
    
    width: 100%
    ;
    
    
    height: auto
    ;
    
    
    }
    img
    {
    
    
    width: 50%
    ;
    
    
    height: auto
    ;
    
    
    }
    img
    {
    
    
    min-width: 100%
    ;
    
    
    height: auto
    ;
    
    
    }
    img
    {
    
    
    height: 100%
    ;
    
    
    width: auto
    ;
    
    
    }
    img
    {
    
    
    height: 20vw
    ;
    
    
    width: auto
    ;
    
    
    }
    img
    {
    
    
    min-height: 100%
    ;
    
    
    width: auto
    ;
    
    
    }
    

    View Slide

35. Clearing up
    misconceptions.
    

    View Slide

36. Always works the same way
    .
    
    
    Not just on slow connections.
    

    View Slide

37. This has nothing to do 

    with lazy loading.
    

    View Slide

38. This is not the CSS propert
    y
    
    
    `aspect-ratio` .
    

    View Slide

39. View Slide

40. 60
    0
    
    
    470
    X
    
    
    X
    HTML attributes
    { width affected by CSS
    ?
    ?
    OMG CSS
    
    
    
    WHAT DO
    
    
    
    I DO
    how about zero?
    

    View Slide

41. please solve for Y &
    
    
    
    use that value for height
    
    
    
    in the first paint
    60
    0
    
    
    470
    X
    
    
    Y
    =
    X
    Y
    HTML attributes
    { width affected by CSS
    

    View Slide

42. This has no effect on
    
    
    
    the final page layout.
    

    View Slide

43. What about
    “Responsive
    
    
    
    Images”?
    

    View Slide

44. >
    
    
    
    

    View Slide

45. 
    
    alt="[description]
    "
    
    
    srcset="images_500.jpg 500w,
    
    
    
    
    
    
    image_1000.jpg 1000w"
    
    
    
    width="500" height=“375" >
    50
    0
    
    
    375
    = 4 / 3 =
    100
    0
    
    
    750
    

    View Slide

46. >
    
    
    
    
    
    srcset="image_1000.jpg"
    >
    
    
    
    
    
    srcset="image_500.jpg"
    >
    
    
    >
    
    
    
    
    alt="[description]"
    >
    
    
    
    

    View Slide

47. View Slide

48. >
    
    
    
    
    
    srcset="image_1000.jpg" width="1000" height="500"
    >
    
    
    
    
    
    srcset=“image_500.jpg" width="500" height="375"
    >
    
    
    >
    
    
    
    
    alt="[description]"
    >
    
    
    
    

    View Slide

49. Summary.
    

    View Slide

50. In your HTML, 

    put width & height attributes
    
    
    
    on all your images
    

    View Slide

51. 
    
    alt="[description]
    "
    
    
    width="640
    "
    
    
    height="480">
    img { width: 100%
    ;
    
    
    height: auto; }
    

    View Slide

52. THANKS!
    Jen Simmons
    @jensimmons
    

    View Slide