Web Apps Optimization 010

An introduction into the importance and need for faster page lod time.
Also outlines some beginner DIY (Do it Yourself) tips for web optimization.

Transcript

1. Web Optimization 010 Tiku Okoye Front-end developer - Chigisoft August 18, 2018 The Little Things that Matter
2. Behind the Scenes
3. What is Page Speed? • Time it takes to fully display a page’s content (Page Load Time) • Time it takes for a browser to receive the first byte of info from the server (Time to First Byte)
5. Google Cares!! ❖ Google has let us know that they place great emphasis on page speed. ❖ As of July 2018, Google started using mobile page speed as a ranking in their mobile search results. ❖ Website and mobile performance subsequently impacts search engine rankings. ❖ Your website speed influences visibility.
6. Users Care!! According to Kinsta, • 1 in 4 visitors would abandon a site if it takes more than 4 seconds to load. • 46% of users don’t revisit poorly performing sites. This means site owners have a mere 5 sec to engage visitors before they consider leaving. Every 1 sec delay could lead to huge losses.
7. Now, the Real Deal
8. What do i do now? DIY Optimization • Minimize HTTP requests-- According to Yahoo, 80% of a Web page’s load time is spent downloading the different parts of the page, like images, stylesheets, and scripts. An HTTP request is made for each one of these elements, so the more on-page components, the longer it takes for the page to render. ..If you use Google Chrome, you can use the browser’s Developer Tools to see how many HTTP requests your site makes.
9. DIY Optimization • Minification of CSS & JavaScript-- Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser. You can reduce the number of HTTP requests by minifying and combining your files. This reduces the size of each file, as well as the total number of files. This gives faster browser downloading and execution. Tools for minifying CSS & JavaScript • JSMIN or UglifyJS-- To minify JavaScript. • HTMLMinifer-- To minify HTML. • CSSNano or csso-- To minify CSS
11. DIY Optimization • Image Optimization-- a) Serve scaled images. i.e: instead of using css to resize an image, resize it to the exact size you want and then serve it to the website. b) The fewer the amount of images used, the better. • CSS delivery & Code-- a) Shorthand Coding. Use fewer declarations. Fewer lines of code mean fewer processing cycles. b) Position your CSS links at the head otherwise it would not be displayed immediately after downloading.
12. DIY Optimization • Compression-- a) Enable and test GZIP compression support on your web server. Do not GZIP already compressed images!! ..If you’re not sure your site has Gzip enabled, you can use checkgzipcompression.com to see.
14. DIY Optimization Other Optimization Tips include • Reduce the number of widgets & plugins you use on your site. • Reduce external scripts. • Leverage Browser Caching. • Monitor your speed over time both for desktop and mobile. • Choose the right hosting option for your needs.
15. 15 Tools to measure Page Speed • PageSpeed Insights • Web Page Test • Pingdom • GTmetrix
16. 16 Thank You. So Friends,