5 steps to faster web sites & HTML5 games - updated for DDDscotMichael Ewins
5 practical steps we have taken to improve page loading for web sites and HTML5 games.
1. Fewer requests
2. Smaller resources
3. Reduce the round trip time
4. Optimise the critical rendering path
5. Educate the whole team about performance
Performance Of Web Applications On Client MachinesCurelet Marius
Performance of Web applications on client machines. This paper refers to the performance of Web browsers and applications in general and of JavaScript code on the client machine.
Scalability strategies for cloud based system architectureSangJin Kang
- Scalability & Availability for the Global Markets
- Global scaled Scalability, Availability and Security
- Architecture for 100, 1K, 100K, 500K, 1M and 10M global users
- Auto-Scaling
- Understand Cloud Services
- Cloud Demo(AWS, GCP, Azure and Cloudflare)
- Wrap-Up
Did you know that 80% to 90% of the user's page-load time comes from components outside the firewall? Optimizing performance on the front end (e.g. from the client side) can enhance the user experience by reducing the response times of your web pages and making them load and render much faster.
5 steps to faster web sites & HTML5 games - updated for DDDscotMichael Ewins
5 practical steps we have taken to improve page loading for web sites and HTML5 games.
1. Fewer requests
2. Smaller resources
3. Reduce the round trip time
4. Optimise the critical rendering path
5. Educate the whole team about performance
Performance Of Web Applications On Client MachinesCurelet Marius
Performance of Web applications on client machines. This paper refers to the performance of Web browsers and applications in general and of JavaScript code on the client machine.
Scalability strategies for cloud based system architectureSangJin Kang
- Scalability & Availability for the Global Markets
- Global scaled Scalability, Availability and Security
- Architecture for 100, 1K, 100K, 500K, 1M and 10M global users
- Auto-Scaling
- Understand Cloud Services
- Cloud Demo(AWS, GCP, Azure and Cloudflare)
- Wrap-Up
Did you know that 80% to 90% of the user's page-load time comes from components outside the firewall? Optimizing performance on the front end (e.g. from the client side) can enhance the user experience by reducing the response times of your web pages and making them load and render much faster.
Today, a web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our web sites look good across that spectrum of devices we may forget that we need to make sure that our web sites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet.
In this session we’ll look at the tools that can help you understand, measure and improve the web performance of your web sites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply.
This presentation builds upon Dave’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”
This talk was given at the Responsive Web Design Summit hosted by Environments for Humans.
Make Drupal Run Fast - increase page load speedPromet Source
What does it mean when someone says “My Site is slow now”? What is page speed? How do you measure it? How can you make it faster? We’ll try to answer these questions, provide you with a set of tools to use and explain how this relates to your server load.
We will cover:
- What is page load speed? – Tools used to measure performance of your pages and site – Six Key Improvements to make Drupal “run fast”
++ Performance Module settings and how they work
++ Caching – biggest gainer and how to implement Boost
++ Other quick hits: off loading search, tweaking settings & why running crons is important
++ Ask your host about APC and how to make sure its set up correctly
++ Dare we look at the database? Easy changes that will help a lot!
- Monitoring Best practices – what to set up to make sure you know what is going on with your server – What if you get slashdoted? Recommendation on how to quickly take cover from a rhino.
The Case for HTTP/2 - GreeceJS - June 2016Andy Davies
HTTP/2 is here but why do we need it, how is it different to HTTP/1.1 and what does the mean for developers?
Slides from my talk at GreeceJS in Athens, June 2016
Challenges behind the scenes of the large Swiss e-Commerce shop apfelkiste.ch...nine
Challenges behind the scenes of the large Swiss e-Commerce shop apfelkiste.ch and the role of CloudFlare - Sven Härtwig, CTO narf-studios GmbH
Full video recording of the Talk: https://youtu.be/PlQhYAzYx3M
Security is more critical than ever with new computing environments in the cloud and expanding access to the internet. There are a number of security protection mechanisms available for MongoDB to ensure you have a stable and secure architecture for your deployment. Dave Erickson will walk through general security threats to databases and specifically how they can be mitigated for MongoDB deployments. Rob Moore will then go into depth on the specific topic of setting up and running MongoDB with TLS/SSL and x.509 authentication covering how it works and common errors he's encountered in the field.
200, 404, 302. Is it a lock combination? A phone number? No, they're HTTP status codes! As we develop Web applications, we encounter these status codes and others, and often we make decisions about which ones to return without giving much thought to their meaning or context. It's time to take a deeper look at HTTP. Knowing the methods, headers, and status codes, what they mean, and how to use them can help you develop richer Internet applications. Join Ben Ramsey as he takes you on a journey through RFC 2616 to discover some of the gems of HTTP.
The website speed makes the first impression about your business. It’s essential to understand that you won’t get a second chance when it comes to user experience. Low website speed is one of the most frustrating things that will turn people off about your resource. High-performance websites results in high return visits, low bounce rates, higher conversions, engagement, higher ranks in organic search, and better user experience. By reducing the page load time you will positively impact marketing and sales processes. You’ll get higher traffic and attract more qualified leads that can be converted into customers.
The 5 most common reasons for a slow WordPress site and how to fix them – ext...Otto Kekäläinen
Presentation given in WP Meetup in October 2019.
Includes fresh new tips from summer/fall 2019!
A Must read for all WordPress site owners and developers.
Today, a web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our web sites look good across that spectrum of devices we may forget that we need to make sure that our web sites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet.
In this session we’ll look at the tools that can help you understand, measure and improve the web performance of your web sites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply.
This presentation builds upon Dave’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”
This talk was given at the Responsive Web Design Summit hosted by Environments for Humans.
Make Drupal Run Fast - increase page load speedPromet Source
What does it mean when someone says “My Site is slow now”? What is page speed? How do you measure it? How can you make it faster? We’ll try to answer these questions, provide you with a set of tools to use and explain how this relates to your server load.
We will cover:
- What is page load speed? – Tools used to measure performance of your pages and site – Six Key Improvements to make Drupal “run fast”
++ Performance Module settings and how they work
++ Caching – biggest gainer and how to implement Boost
++ Other quick hits: off loading search, tweaking settings & why running crons is important
++ Ask your host about APC and how to make sure its set up correctly
++ Dare we look at the database? Easy changes that will help a lot!
- Monitoring Best practices – what to set up to make sure you know what is going on with your server – What if you get slashdoted? Recommendation on how to quickly take cover from a rhino.
The Case for HTTP/2 - GreeceJS - June 2016Andy Davies
HTTP/2 is here but why do we need it, how is it different to HTTP/1.1 and what does the mean for developers?
Slides from my talk at GreeceJS in Athens, June 2016
Challenges behind the scenes of the large Swiss e-Commerce shop apfelkiste.ch...nine
Challenges behind the scenes of the large Swiss e-Commerce shop apfelkiste.ch and the role of CloudFlare - Sven Härtwig, CTO narf-studios GmbH
Full video recording of the Talk: https://youtu.be/PlQhYAzYx3M
Security is more critical than ever with new computing environments in the cloud and expanding access to the internet. There are a number of security protection mechanisms available for MongoDB to ensure you have a stable and secure architecture for your deployment. Dave Erickson will walk through general security threats to databases and specifically how they can be mitigated for MongoDB deployments. Rob Moore will then go into depth on the specific topic of setting up and running MongoDB with TLS/SSL and x.509 authentication covering how it works and common errors he's encountered in the field.
200, 404, 302. Is it a lock combination? A phone number? No, they're HTTP status codes! As we develop Web applications, we encounter these status codes and others, and often we make decisions about which ones to return without giving much thought to their meaning or context. It's time to take a deeper look at HTTP. Knowing the methods, headers, and status codes, what they mean, and how to use them can help you develop richer Internet applications. Join Ben Ramsey as he takes you on a journey through RFC 2616 to discover some of the gems of HTTP.
The website speed makes the first impression about your business. It’s essential to understand that you won’t get a second chance when it comes to user experience. Low website speed is one of the most frustrating things that will turn people off about your resource. High-performance websites results in high return visits, low bounce rates, higher conversions, engagement, higher ranks in organic search, and better user experience. By reducing the page load time you will positively impact marketing and sales processes. You’ll get higher traffic and attract more qualified leads that can be converted into customers.
The 5 most common reasons for a slow WordPress site and how to fix them – ext...Otto Kekäläinen
Presentation given in WP Meetup in October 2019.
Includes fresh new tips from summer/fall 2019!
A Must read for all WordPress site owners and developers.
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersDistilled
We all know that site speed matters not only for users but also for search rankings. As marketers, how can we measure and improve the impact of site speed? Mat will cover a range of topics and tools, from the basic quick wins to some of the more surprising and cutting-edge techniques used by the largest websites in the world.
Make Drupal Run Fast - increase page load speedAndy Kucharski
What does it mean when someone says “My Site is slow now”? What is page speed? How do you measure it? How can you make it faster? We’ll try to answer these questions, provide you with a set of tools to use and explain how this relates to your server load.
We will cover:
- What is page load speed? – Tools used to measure performance of your pages and site – Six Key Improvements to make Drupal “run fast”
++ Performance Module settings and how they work
++ Caching – biggest gainer and how to implement Boost
++ Other quick hits: off loading search, tweaking settings & why running crons is important
++ Ask your host about APC and how to make sure its set up correctly
++ Dare we look at the database? Easy changes that will help a lot!
- Monitoring Best practices – what to set up to make sure you know what is going on with your server – What if you get slashdoted? Recommendation on how to quickly take cover from a rhino.
implement lighthouse-ci with your web development workflowWordPress
This presentation is about implementing the performance as first approach in web development and a bit of real case study. Then implement the Lighthouse-CI in the development workflow to keep the site performance high.
10 Tips for Optimising WordPress (You Won't Believe What #6 Is!) Presented by Andrew Marks at the Brisbane Northside WordPress Meetup on 13th June 2018.
AWS re:Invent 2016: Amazon CloudFront Flash Talks: Best Practices on Configur...Amazon Web Services
In this series of 15-minute technical flash talks you will learn directly from Amazon CloudFront engineers and their best practices on debugging caching issues, measuring performance using Real User Monitoring (RUM), and stopping malicious viewers using CloudFront and AWS WAF.
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterDoris Chen
How to tackle real-world web platform performance problems in modern websites and apps? This session starts with a basic understanding of the web platform and then explores to a set of problem/solution pairs built from industry-standard performance guidance. In the talk, we will demonstrate performance tips and tricks that will help you improve the performance of your apps and sites today. We will discuss the following respond to network requests, speed and responsiveness, optimizing media usage, and writing fast JavaScript. These performance tips and tricks apply equally to web sites that run on standards based web browsers, as well as to modern apps.
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBrad Spiegel Macon GA
Brad Spiegel Macon GA’s journey exemplifies the profound impact that one individual can have on their community. Through his unwavering dedication to digital inclusion, he’s not only bridging the gap in Macon but also setting an example for others to follow.
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC
Ellisha Heppner, Grant Management Lead, presented an update on APNIC Foundation to the PNG DNS Forum held from 6 to 10 May, 2024 in Port Moresby, Papua New Guinea.
Ready to Unlock the Power of Blockchain!Toptal Tech
Imagine a world where data flows freely, yet remains secure. A world where trust is built into the fabric of every transaction. This is the promise of blockchain, a revolutionary technology poised to reshape our digital landscape.
Toptal Tech is at the forefront of this innovation, connecting you with the brightest minds in blockchain development. Together, we can unlock the potential of this transformative technology, building a future of transparency, security, and endless possibilities.
Instagram has become one of the most popular social media platforms, allowing people to share photos, videos, and stories with their followers. Sometimes, though, you might want to view someone's story without them knowing.
Understanding User Behavior with Google Analytics.pdfSEO Article Boost
Unlocking the full potential of Google Analytics is crucial for understanding and optimizing your website’s performance. This guide dives deep into the essential aspects of Google Analytics, from analyzing traffic sources to understanding user demographics and tracking user engagement.
Traffic Sources Analysis:
Discover where your website traffic originates. By examining the Acquisition section, you can identify whether visitors come from organic search, paid campaigns, direct visits, social media, or referral links. This knowledge helps in refining marketing strategies and optimizing resource allocation.
User Demographics Insights:
Gain a comprehensive view of your audience by exploring demographic data in the Audience section. Understand age, gender, and interests to tailor your marketing strategies effectively. Leverage this information to create personalized content and improve user engagement and conversion rates.
Tracking User Engagement:
Learn how to measure user interaction with your site through key metrics like bounce rate, average session duration, and pages per session. Enhance user experience by analyzing engagement metrics and implementing strategies to keep visitors engaged.
Conversion Rate Optimization:
Understand the importance of conversion rates and how to track them using Google Analytics. Set up Goals, analyze conversion funnels, segment your audience, and employ A/B testing to optimize your website for higher conversions. Utilize ecommerce tracking and multi-channel funnels for a detailed view of your sales performance and marketing channel contributions.
Custom Reports and Dashboards:
Create custom reports and dashboards to visualize and interpret data relevant to your business goals. Use advanced filters, segments, and visualization options to gain deeper insights. Incorporate custom dimensions and metrics for tailored data analysis. Integrate external data sources to enrich your analytics and make well-informed decisions.
This guide is designed to help you harness the power of Google Analytics for making data-driven decisions that enhance website performance and achieve your digital marketing objectives. Whether you are looking to improve SEO, refine your social media strategy, or boost conversion rates, understanding and utilizing Google Analytics is essential for your success.
2. What is Google Page Speed?
1) Analyzes web pages for performance best practices
2) It only evaluates Front End Performance of webpage and NOT any server
side performance evaluation
3) Based on Google Theory of calculating the webpage performance, this tool
rates the webpages with points – individually for desktop and mobile
platforms, where 100 points is being highest.
4) Earlier this tool was available in Add-on (plug-in) format for Chrome
browser but later on Google made it available only in Live Web based
format (you can access from any browser)
Note :
While testing webpage performance with this tool, it is recommended to disable or avoid filtering
plug-ins used (like Add-Block Plus, Flash-Block etc.), so as to get the real performance calculations.
3. How To Use Page Speed Insights?
1) As this tool is available only in Live Web format, navigate to following Link
from your browser and enter your desired website URL in it
https://developers.google.com/speed/pagespeed/insights/
1) The analysis results are found in following major categories
1) Should Fix
2) Consider Fixing
3) Passed Rules
4) Download Optimized Versions of – image , Javascript & CSS Resources etc.
!
!
4. Website Performance Improvement Plan
1) Enable Compression – not images always
2) Leverage Browser Cache – identify the reusable codes
3) Optimize Images – reduce the image size as well as dimensions
4) Implement CSS Sprites – Use of CSS on images & reduce the number of
requests browsers can made
5) Optimize order of CSS and Java Script – sequencing is very important
6) Minify & Bundle CSS and Java Script – Removing whitespace can save few
more bytes
7) Additional Tools and Techniques
5. Website Performance Principles - I
MINIMIZE THE AMOUNT OF SERVER DATA NEEDED
1) As network bandwidth is very limited resources, so make sure that the website fetches only TRULY REQUIRED DATA
from the server
Limited
Network Bandwidth
2 MB Page 3 MB Page 4 MB Page
Cable Model
(15 MB /s)
1.1 s 1.6 s 2.1 s
4G Network
(4 Mb /s)
4 s 6 s 8 s
3G Network
(750 kb /s)
21.3 s 32 s 42.7 s
6. Website Performance Principles - II
CONTROL THE NETWORK LATENCY
1) Reduce the number of Server Request browser has to send to the server, Network latency simply means time required
to travel a packet from one location to other
2) It is different from Network bandwidth
3) Try to reduce the requests
• Reduce the number of Larger Server Requests
• Combine multiple small - small requests into single requests
• Simultaneous connections limited by the Browsers
Time Required To Travel
The Packet To & Fro
Packets
7. Website Performance Principles - III
CORRECT ORDER OF THE RESOURCES
1) Make sure that we supply resources in proper order to the Browsers, because some resources are critical path so
browser cant start rendering the page until it has certain information.
2) On Other hand, some resources in non-critical paths may block the privileges to download in the browser rendering
sequence.
Order Properly – Critical and non-critical resources
For Faster Browser Rendering Process
8. IMPLEMENTING THE PAGESPEED TRICKS
1) Enable Compressions
1) What to compress?
2) How to compress?
3) Verify the compression?
2) Leverage Browser Cache
1) What is Leverage Browser Cache?
2) Empty Cache Vs. Prime Cache
3) Caching Headers
4) Conditional Cache Requests
5) Problems In Conditional Cache Requests
6) Implementing Leverage Browser Cache
7) Cross Check
3) Image Optimization
1) Serve Scaled Images & Optimized Images
2) Serve Scaled Images
3) Optimized Images
4) WebP Images
5) Get Best Optimized Images with an Ease
4) CSS Sprites
1) Network Latency?
2) Simultaneous Browser Connections
3) What is CSS Sprite
4) Implementing CSS Sprite – an Example
5) Limitations of CSS Sprite
5) Correct Ordering Styles & Scripts
1) Why Ordering?
2) Correct Placement of CSS and JavaScript
6) Minify & Bundle Scripts
9. Enabling HTTP Compressions - I
What data should be compressed?
1. Many images, audio, video files are already have special formats inside their algorithms which
enables the compressions
2. Compressions will be beneficial for coding files like
1) HTML
2) CSS
3) JavaScript
4) XML
5) JSON
3. To enable the compressions – use of gzip, deflate
(Limited Network Bandwidth)
Powerful Processor on PC
can decompress the data
10. Enabling HTTP Compressions - II
Implementing gzip in Apache Server?
1. Add the following to your .htaccess file:
2. Apache actually has two compression options:
1. mod_deflate is easier to set up and is standard.
2. mod_gzip seems more powerful: you can pre-compress content.
3. Apart from above method, there are several other methods are also available to enable
compression in PHP pages
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>
11. Enabling HTTP Compressions - III
Verify the Compression?
1. Once you’ve configured your server, we have to make sure that it is working perfectly
2. To cross verify there are commonly 3 methods are used :
• Online gzip test –
– http://www.gidnetwork.com/tools/gzip-test.php
– https://varvy.com/tools/gzip/
• Offline Method - View the headers:
– Use Live HTTP Headers plugin in Firefox to examine the response and look for a line that says
“Content-encoding: gzip”.
12. Leverage Browser Cache- I
What is Leverage Browser Cache :
1. On most of the multi page websites, some contents are constant and they do not change page
by page, like , Header, Logo, Images, CSS, JavaScripts etc
2. Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the
browser to load previously downloaded resources from local disk rather than over the network.
Some Contents Don’t Change
Page By Page
13. Leverage Browser Cache- II
Empty Cache Vs Prime Cache?
1. When user visits a website for first time, he have to pay for the full download of the each and
every necessary resources a first – into an EMPTY CACHE
2. When user again tried to load the content either by hitting Refresh button or visiting website
next day again – then if we have enabled Browser Cache then the local resources will provided
to the browser from this Browser Cache (PRIME CACHE) and only the dynamic content will be
loaded from the webserver if needed.
Empty Cache
All resources are downloaded to the Local Cache
Prime Cache
Only Dynamic
Contents are loaded
from server
Static Files are loaded
from Browser Cache
14. Leverage Browser Cache- III
Caching Headers :
1. Webserver includes following two types headers for Caching : (both can be use at a time)
A. Expires Header – includes date and time until data hold in cache
1. Expires: Thu, 27 Aug 2015 12:40:15 GMT
B. Cache-Control – more modern way (mentioned in seconds)
1. Cache-control: max-age=259000
2. In response to these headers webservers responds with following Header
1. Last Modified : Mon, 12 Jun 2015 01:15:30 GMT
15. If resource is already cached and
suppose we change it on server then
How Browser can decide which one
to use?
Leverage Browser Cache- III
16. Leverage Browser Cache- IV
Conditional Cache Updates Requests:
1. Browser always first cross check the Prime Cached data with the web server to make sure that
the Prime Cache holds the latest data, and only after proper confirmation from web server the
browser displays the data from Prime Cache else it will load the latest data received from the
web server.
2. This is handled by the header request : If-Modified-Since
If-Modified-Since: Mon, 12 Jun 2015 01:15:30 GMT
HTTP 304 Not Modified
HTTP Request
HTTP 200 OK
OR
Send New / Updated File
17. Leverage Browser Cache- V
PROBLEMS WITH CONDITIONAL CACHE UPDATES REQUESTS:
1. Not all browsers are making conditional requests to the webservers
2. Due to intermediate proxies, there are possibilities in failing these kind of requests
SOLUTION FOR CONDITIONAL CACHE UPDATES REQUESTS:
1. Version Controlling of Resources
1. Change resource Names in every updates
2. Example – logo.png > logo-1.0.png
3. This will forcefully push the browser to treat this as new resource and then browser will automatically
download the latest resource.
18. Leverage Browser Cache- VI
Implementing Leverage Browser Cache :
1. Through .htaccess directives you can cache these static files in a user browser
2. To cache static contents add the following lines on your .htaccess file.
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days
19. Leverage Browser Cache- VI
Cross Check Implementation of Leverage Browser Cache :
1. To see the results of implementation of Leverage Browser Cached Elements, open website and
then right click and select “Inspect Element” > Navigate to “Networks” tab
2. Here you can see which elements are coming from Cache and which are loading from server
20. Image Compressions – I
Image Optimization :
1. Optimization of images are absolutely necessary component in speeding the webpages, as
images belong to one of the largest resource on the webpages.
2. To achieve Image Optimization, we need to classify the process into two image categories
1. Serve Scale Images : Size the images exactly how you wanted to have displayed on the page
2. Optimize Image : Apply lossless compressions techniques to reduce the size
Served Scale Images
Height & Width Management :
Keep images of exact size which
are appearing on display
Optimized Images
Reducing Few Bytes :
Use Image Optimizations to reduce
the physical size of the image
21. Image Compressions – II
Serve Scale Images:
1. Understanding the scope of today`s resolution independent websites (responsive websites), we
have to be very careful while designing the Serve Scale Images
2. Don’t Define Image Dimensions in absolute units like – Pixels
3. Define images in Percentages
Image Size in Pixels
Image Size in Percentage
22. Image Compressions – III
Optimize Images:
1. Prefer PNG or GIF images over JPG image formats, as JPG images are more lossy compressions
2. In process of optimization – JPG images degrades the quality where are in PNG images this is
not true
3. As PNG images are internally separately divided into various levels of data and each level can
be get involve into compression level – indicating there can multiple levels of compressions
4. Example of a Software to compress PNG images – PNG Crush, Kraken.io, Tiny PNG,
23. Image Compressions – IV
WebP Images:
1. As per latest updates – Google Developers Team have evolved with new image format “WebP”
which is more compact (26% smaller) in size compared with PNG files, And 25-34% smaller in
size as compared with JPG format
2. The major problem with this WebP images – it is supported only by Google & Opera Browsers
3. But Google developer teams have provided separate code for detection of browsers and using
that code we can use WebP images and also to support other browsers we can use regular
image formats
24. Image Compressions –V
Get Best Optimized Images with an ease:
1. The process of getting the best optimize images with maximum ease is – Take help of Google
itself
2. After PageSpeed Insights Analysis – check these links at bottom of the result
25. CSS Sprites – I
Important Factors – The reason behind Implementing CSS Sprites:
1. Network Latency
2. Simultaneous Network Connections Browsers Can Make At Single Time
Time Required To Travel The
Packet To & Fro
Packets
Transferring One Larger File incurs network Latency on Only This One Request
Transferring Multiple Small Files incurs network Latency on Only Every Request
Network Latency
26. CSS Sprites – II
Simultaneous Network Connections Browsers Can Make At Single Time
1. Typically all browsers allow max 6 – to 10 simultaneous network connections at any one time
to a single host
At a time only 6 Connections will be made by the Browser to download the resource from server
Resource 1 – Connection -1
List of Resources
Resource 2 – Connection -2
Resource 3 – Connection -3
Resource 4 – Connection -4
Resource 5 – Connection -5
Resource 6 – Connection -6
Web Server
Wait for available connection
27. CSS Sprites – III
What is CSS Sprites:
1. An image sprite is a collection of images put into a single image. A web page with many images
can take a long time to load and generates multiple server requests. Using image sprites will
reduce the number of server requests and save bandwidth.
28. CSS Sprites – IV
Implementing CSS Sprites – Part 1:
1. Combine all smaller images into one single image file in what ever layout you wanted to have –
like Horizontal, Vertical, or Grid Layout – but remember the coordinates of each image properly
2. Else there are several online tools available which can make this task easy –
1. http://csssprites.com/
2. http://instantsprite.com/
3. http://css.spritegen.com/
4. http://www.spritecow.com/
One Single Image
Say, Saved this image as – SocialMediaIcons.png
Each of all Images are of 64px X 64px with gap of 1px in each of them
29. CSS Sprites – IV
Implementing CSS Sprites – Part 2:
1. Changes in CSS - Define icon class “SocialMediaIcons”
. SocialMediaIcons {
display: block;
width: 64px;
height: 64px;
background: url(‘../images/SocialMediaIcons.png’);
float: left;
margin: 2px;
}
.RSSIcon {
background-position: -0px -0px;
}
.YouTubeIcon {
background-position: -0px -74px;
}
1. Set Display mode to : Block
2. Set Width & Height As per Icon
1. Create Different Class for Each
Icon
2. Define the Exact position to
avoid the override icons
1. Regular CSS properties
30. CSS Sprites – IV
Implementing CSS Sprites – Part 2:
1. Changes in HTML: - Use of Defined icon class “SocialMediaIcons” in Anchor Elements
2. Take a note : No image element is used in the anchor element
Use of previously defined class
Use of previously defined specific class
<a class=“SocialMediaIcons RSSIcon” href=https://...”></a>
<a class=“SocialMediaIcons YouTubeIcon” href=https://...”></a>
<a class=“SocialMediaIcons FacebookIcon” href=https://...”></a>
<a class=“SocialMediaIcons TwitterIcon” href=https://...”></a>
<a class=“SocialMediaIcons EmailIcon” href=https://...”></a>
Cross check this CSS Sprite implementation by clicking each Icon to make sure
that there is no overriding between the icons and links
Important :
31. CSS Sprites – V
Limitations of CSS Sprite :
• Only PNG amd GIF images are supported; JPG will come in a future release.
• Only CSS backgrounds are supported; <img> tags will come in a future release.
• A background image can't be safely sprited if the HTML element is larger than the background
image (since this would allow the combined image's extra pixels to show around the edges).
Accordingly, the CSS must have explicit width and height in the same declaration as the
background URL, and the width and height must be smaller than or equal to those of the
image.
• The CSS must not include any background-position declarations without background-url
declarations. Such a naked background-position declaration could apply to any background-
image, and since we don't know which one, it isn't safe to do any spriting.
• The Sprite Images filter currently arranges images in a vertical strip, which might not be the
most efficient arrangement. More advanced layouts will come in a future release.
32. Correct Ordering Styles & Scripts - I
Why ordering ?
• Its is absolutely necessary because browser`s rendering process is sequential process
• So if some JavaScript is taking more time for rendering then there are great possibilities that
this JavaScript will slow down the process of loading of the next code.
Correct Order :
Move CSS up to load as early as possible
Move JavaScript down to load much later
33. Correct Ordering Styles & Scripts - II
Define CSS Correctly?
• Maintain all the Internal CSS Code and External CSS style sheet references at same place in
HTML <Head>
• Because if styles are defined at random places in HTML <Body> then Browser have to REFLOW
the entire page again to implement the newly found Styles to already downloaded element, its
like re-calculate page layouts
Why keep JavaScript at end to load?
• The first rule of browser rendering is, Browser guarantees that it will be execute the JavaScript
in the order in which it appeared in your code
– If firstly defined JavaScript is much bigger to download and parse then surely it will hold the execution
of next defined JavaScript
• The Second important rule is – DOM elements defined below JavaScript will be get rendered
only after parsing of JavaScript
Where to Define JavaScript?
• The very Ideal place will be - right before the closing tag of <Body> tag
34. Minify & Bundling Scripts - I
Minify - means?
• From Browser point of view – white spaces, comments don’t matter, code exactly work as
written, but these whitespaces, comments are increasing the file size and it will increase the
network bandwidth utilization.
• Why CSS and JavaScript needs to minify – the reason is these files are more important in order
to consider the layout of website rendering process, so if they are in smaller size, it will
increase the website speed.
Bundling Files
+
+
=
=
site.css page.css
app.js logic.js
bundle.css
bundle.js
Easier
For
Development
Better
For
Performance