Retail Store Scavanger Hunt - Foundation College Park
Template for zama
1. PREPARED FOR DALLAS ANGULAR SUPERHEROS 2019
Improve
Performance and
SEO with Angular
Universal
Zama Khan Mohammed Slides: http://bit.ly/ng-ssr-slides
Github Repo: http://bit.ly/ng-ssr
Github Gist: http://bit.ly/ng-ssr-gist
2. 2019PREPARED FOR PERFORMANCE AND SEO FOR ANGULAR UNIVERSAL
About Me
2
Software Architect at Tekzenit Inc.
Angular, React and Serverless Architecture
Open Source Developer
Currently Actively writing a book: Angular Projects
Machine Learning Enthusiast
@mohamedzamakhan
3.
4. 2019
4 PREPARED FOR DALLAS ANGULAR SUPERHEROS
Tekzenit is a digital transformation shop
with expertise in research, user
experience design, creative services,
development and network infrastructure.
Tekzenit has been named the 13th
fastest growing company in Dallas and
has been recognized by Inc. 5000 as
one of the 1000 fastest growing
companies in the U.S.
IRVING, TEXAS
BRAGA,
PORTUGAL
HYDERABAD, INDIA
Our global delivery framework of services provides clients with access to
teams in North America, Asia and a Design Center of Excellence in Europe.
Overview & Offices
GUADALAJARA,
MEXICO
5. 2019
5 PREPARED FOR DALLAS ANGULAR SUPERHEROS
Industry Knowledge:
Telecom
Network
Big Data
Manufacturing
Financial Services
Energy
Real Estate
Healthcare
Staffing
Sports
Streaming
IOT/Smart Cities
Select Clients & Industry Knowledge
6. 2019
PREPARED FOR ERNST & YOUNG
14%
14%
14%
14%
14%
14%
14%
User Experience
ACCESSIBILITY
PERFORMANCE
SECURITYDISCOVERABILITY
SHARABILITY
INTERACTIVITY
…
Wireframing, A/B Testing,
User Testing
@mohamedzamakhan
7. 2019
IMPROVE PERFORMANCE AND SEO USING ANGULAR UNIVERSAL
AliExpress reduced load time by 36% and saw a
10.5% increase in orders and a 27% increase in
conversion for new customers.
8. 2019
IMPROVE PERFORMANCE AND SEO USING ANGULAR UNIVERSAL
53% of visits to mobile sites are abandoned after
3 seconds according to research from Google's
DoubleClick.
9. 2019
IMPROVE PERFORMANCE AND SEO OF ANGULAR UNIVERSAL
jobs-portal.com
Browser
SERVER
jobs-portal.com/job/software-engineering/33099
Initial HTML
Initial HTML
Server Side Rendering
@mohamedzamakhan
Assets (CSS, JS, Images)
Assets (CSS, JS, Images)
10. 2019
IMPROVE PERFORMANCE AND SEO OF ANGULAR UNIVERSAL
jobs-portal.com SERVER
jobs-portal.com/job/software-engineering/33099
Initial HTML
jobs XHR
JSON DATA
job XHR
JSON DATA
Browser
Client Side Rendering
@mohamedzamakhan
Assets (CSS, JS, Images)
14. FEBRUARY
Limitations of Client Side SEO
TEKZENIT DEVELOPMENT CAPABILITIES OVERVIEW TEKZENIT DEVELOPMENT CAPABILITIES OVERVIEW
14
• Not all Search Engines render JavaScript and index website
• Google crawls website in two step process
• Googlebot uses Chrome 41 to render the JavaScript
• Social Media platforms cannot scrape JavaScript based applications
@mohamedzamakhan
15. T E K Z E N I T O V E R V I E W
Dynamic Rendering
@mohamedzamakhan
16. 2019
http://bit.ly/ng-ssr
LINK TO GITHUB REPO:
Clone the project
git clone https://github.com/mohammedzamakhan/jobs-portal.git
Install Dependencies using npm or yarn
npm install/ yarn
@mohamedzamakhan
http://bit.ly/ng-ssr-gist
LINK TO GITHUB GIST:
17. IMPROVE PERFORMANCE AND SEO USING ANGULAR UNIVERSAL 17
STEP 1
ng add @nguniversal/express-engine --clientProject jobs-portal
ADD ANGULAR UNIVERSAL
@mohamedzamakhan
18. IMPROVE PERFORMANCE AND SEO USING ANGULAR UNIVERSAL 18
AppModule
Angular Application
AppServerModule
BrowserModule
ServerModule
AppModule
@mohamedzamakhan
19. IMPROVE PERFORMANCE AND SEO USING ANGULAR UNIVERSAL 19
STEP 2
• Used for caching API response, to avoid redundant call on Server
and Client
TRANSFER STATE
@mohamedzamakhan
20. IMPROVE PERFORMANCE AND SEO USING ANGULAR UNIVERSAL 20
STEP 3A
• Capture events before your application is interactive
PREBOOT APPLICATION
@mohamedzamakhan
21. IMPROVE PERFORMANCE AND SEO USING ANGULAR UNIVERSAL 21
STEP 3B
• Depending on the use case, prerender your application at build step
PRERENDER APPLICATION
@mohamedzamakhan
22. IMPROVE PERFORMANCE AND SEO USING ANGULAR UNIVERSAL 22
STEP 4A
• Links should be optimized for SEO
• Can have keywords in the links
• Use short and memorisable links
• Should express relationnships
SEO OPTIMIZED LINKS
@mohamedzamakhan
23. IMPROVE PERFORMANCE AND SEO USING ANGULAR UNIVERSAL 23
@mohamedzamakhan
https://jobs-portal.com/job/352807
https://jobs-portal.com/job/systems-architect-position/352807
24. IMPROVE PERFORMANCE AND SEO USING ANGULAR UNIVERSAL 24
STEP 4B
• Sitemaps guide Search engines to crawl the website
GENERATE SITEMAP.XML
@mohamedzamakhan
26. IMPROVE PERFORMANCE AND SEO USING ANGULAR UNIVERSAL 26
STEP 4C
• Helps crawlers to know what shouldn’t be indexed
INCLUDE ROBOTS.TXT
@mohamedzamakhan
28. IMPROVE PERFORMANCE AND SEO USING ANGULAR UNIVERSAL 28
STEP 5
• Use accessible markup as Crawlers and Screen readers share
similar constraints
PROPER MARKUP
@mohamedzamakhan
29. IMPROVE PERFORMANCE AND SEO USING ANGULAR UNIVERSAL 29
STEP 6
• Title and description are shown on the search results on the Search Engines
• They also constitute to the overall score of the webpage
ADD TITLE & DESCRIPTION
@mohamedzamakhan
31. IMPROVE PERFORMANCE AND SEO USING ANGULAR UNIVERSAL 31
STEP 7
ADD OPEN GRAPH &
TWITTER META TAGS
@mohamedzamakhan
• Share your web pages as “rich objects” on Social Media platforms
• Test your webpage sharability using
Facebook Sharing Debugger
Twitter Card Validator
LinkedIn Post Inspector
32. IMPROVE PERFORMANCE AND SEO USING ANGULAR UNIVERSAL 32
STEP 8
ADD STRUCTURED DATA
USING JSON-LD
• Add microdata using JSON-LD to give rich search experience
on search engines Google Deverloper's Search Gallery
• Test your Structured Data using Structured Data Testing Tool
@mohamedzamakhan
33. IMPROVE PERFORMANCE AND SEO W ITH ANGULAR UNIVERSAL
2019
Never stop!
Budgets
Monitor
Alerts
Audits
34. PREPARED FOR DALLAS ANGULAR SUPERHEROS 2019
Thank you
We welcome and appreciate the
opportunity to improve and reimagine
your current digital solution and set you
apart from your competitors
@mohamedzamakhan
