Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Apps Optimization 010

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.

Tiku Okoye

August 18, 2018
Tweet

More Decks by Tiku Okoye

Other Decks in Programming

Transcript

  1. 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)
  2. 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.
  3. 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.
  4. 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.
  5. 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
  6. 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.
  7. 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.
  8. 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.
  9. 15 Tools to measure Page Speed • PageSpeed Insights •

    Web Page Test • Pingdom • GTmetrix