Presentation of optimization techniques in web design and development.

1. OPTIMIZATION
STRATEGIES FOR WEBSITE

2. THE PROCESS OF MAKING SOMETHING AS
FULLY PERFECT, FUNCTIONAL, OR EFFECTIVE
AS POSSIBLE.
OPTIMIZATION

3. BUT WHY?

4. IMAGE OPTIMIZATION
100 Milliseconds
▸ Time the occipital lobe in our brain needs to store visual information.
▸ Google suggests: page load times of less than 100 ms:
illusion of instantaneous website response.
▸ Acceptable website performance: 1s of page load time does suffice in maintaining
seamless flow of thought.
▸ At 10s of delay: low attention span, impatience, frustration and feeling of abandonment.

5. OPTIMIZATION
▸ 1 in 4 visitors abandon the website if load time >4 seconds.
▸ 46% of users don’t revisit poorly performing websites.
▸ 5s to engage visitors before they consider leaving.
▸ 1s delay = $1.6 billion in annual losses for online merchants as
big as Amazon.

7. STEP 1

8. CLEVER DESIGN

9. CLEVER DESIGN
CSS IS YOUR FRIEND
▸ Images only when nessecary.
▸ Try to use colors, text, CSS animations & transitions.
▸ More whitespace!
▸ Use a fluid and awesome grid (i.e. CSS Grid ❤)
▸ Font loading (@font-face has issues).
▸ font-display CSS property?

10. CLEVER DESIGN
MOBILE FIRST
▸ Mobile internet users have shorter attention span & lower patience.
▸ A good mobile design makes users less likely to engage with the company in
the future.

11. STEP 2

12. IMAGES

13. IMAGE FILE FORMATS
JPEG
▸ jpeg for photos (lossy)
70 KB 414 KB

14. IMAGE FILE FORMATS
PNG
▸ png for complex graphics and for transparency (lossless)
53.3 KB 11.8 KB

15. IMAGE FILE FORMATS
GIF
▸ gif for lossy animation

16. IMAGE FILE FORMATS
PNG
▸ optimize images

17. IMAGE FILE FORMATS
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-
optimization
https://www.smashingmagazine.com/2009/07/clever-png-optimization-techniques/
IMAGE OPTIMIZATION

18. IMAGE FILE FORMATS
SVG = ❤

19. IMAGE FILE FORMATS
SVG = ❤

20. IMAGES OPTIMIZATION
TIPS
▸ Upload your images at scale and not rely on CSS to size them.
▸ Different image files depending on user device.
▸ Experiment with different compression settings
▸ Strip meta data.
▸ Set Image Resolution to 72dpi

21. IMAGES OPTIMIZATION
CSS SPRITES
▸ for many small images
▸ ⇢ {background-position:…}

22. STEP 3

23. TAKE GOOD CARE OF
YOUR CODE

24. OPTIMIZATION
CLEVER CODING
▸ Utilize inheritance
▸ Value replication (e.g., margin: 10px 20px 15px 5px;)
▸ Short id and class names.
▸ Use less meta tags
▸ Group external CSS & JS files
▸ Asynchronous & deferred JavaScript (async & defer), or script just before </body>

25. OPTIMIZATION
MINIFICATION
▸ Minify Javascript, CSS and HTML files

26. STEP 4

27. SERVERS & YOU

28. ASSETS OPTIMIZATION
MAKE FEWER HTTP REQUESTS
▸ Combine scripts and style sheets
▸ Use image sprites
▸ Avoid redirects (more client-server round trips) & landing page redirects.
▸ Avoid <iframe>

29. OPTIMIZATION
MAKE FEWER HTTP REQUESTS
▸ Your design should not require too many widgets or plugins!
Facebook widget requests

30. ASSETS OPTIMIZATION
GZIP! ENABLE COMPRESSION
▸ Most modern browsers understand
▸ Gzipped = compressed content
▸ HTML, CSS, client-side scripts
▸ (not images, already compressed!)

31. ASSETS OPTIMIZATION
USE EXPIRES HEADER
▸ for files that don't get updated often.
(images, CSS etc)
▸ .htaccess file
▸ example:
ExpiresByType text/css "access plus 1 year”

32. ASSETS OPTIMIZATION
USE A CDN
▸ Content Delivery Network A Content Delivery Network
▸ Network of servers in different geographical locations.
▸ Each server has a copy of a site’s files.
▸ When a visitor requests a file: file delivered from nearest server.

33. LINKS
▸ general tips
https://developers.google.com/speed/docs/insights/rules
https://www.sitepoint.com/web-site-optimization-steps/
▸ font optimization
https://css-tricks.com/font-display-masses/
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/
webfont-optimization
▸ image optimization
https://www.smashingmagazine.com/2009/07/clever-png-optimization-techniques/
▸ expiration headers (for cached files)
https://gtmetrix.com/add-expires-headers.html

34. TOOLS
▸ https://developers.google.com/speed/pagespeed/insights/
▸ http://compresspng.com/
▸ https://www.minifier.org/

35. DONE!