SlideShare a Scribd company logo
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Rendering Strategies
Measuring the Devil's Details in Core Web Vitals
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Image
credit:
Ian
Myles
Core Web Vitals are coming.
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
● Understand Core Web Vital metrics and measurement
● Where and how CWV occur
● Rendering strategies with their respective CWV pratfalls, and mitigation
tactics
Our quest
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Metrics and Measurements
Core Web Vitals

Recommended for you

Challenges of building a search engine like web rendering service
Challenges of building a search engine like web rendering serviceChallenges of building a search engine like web rendering service
Challenges of building a search engine like web rendering service

SMX Advanced Europe, June 2021 - With the advent of new technologies and the massive use of Javascript on the internet, search engines have started using Web Rendering Services to better understand the content of pages on the internet. What are the difficulties in building a WRS? Are tools we use every day replicating what search engines do? In this session, Giacomo will drive you on a discovery journey digging in some techy implementation details of a search engine like web rendering service building process, covering edge cases such as infinite scrolling, iframe, web component, and shadow DOM and how to approach them.

web rendering servicessearch engines
The New Renaissance of JavaScript
The New Renaissance of JavaScriptThe New Renaissance of JavaScript
The New Renaissance of JavaScript

This document discusses various techniques for improving JavaScript rendering for SEO purposes, including: - Using automated tests to prevent JavaScript-related SEO errors before deployment. Unit and end-to-end tests can check for issues like missing tags. - Choosing an appropriate rendering technique depending on how often content changes, whether it be pre-rendering, server-side rendering, or dynamic rendering. - Leveraging universal JavaScript to avoid accidental cloaking issues and ensure consistency between what users and search engines see. Workarounds are discussed when universal JavaScript is not practical.

javascripttechnical seopwa
SEO for Angular - BrightonSEO 2018
SEO for Angular - BrightonSEO 2018SEO for Angular - BrightonSEO 2018
SEO for Angular - BrightonSEO 2018

Guys. Don't be scared. Javascript can be wonderful. Angular is a powerful framework. The devil is in the execution.

angularjavascriptseo
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Loading Interactivity Visual Stability
�
�
⏳
Images
via:
The
SEO's
Guide
to
Google's
Core
Web
Vitals
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Field Data is performance data
collected from real page loads your
users are experiencing in the wild.
AKA Real User Monitoring (RUM)
Crux data will be used in the Page
Experience Ranking Signal.
Crux = CWV source of truth
Lab Data is performance data
collected within a controlled
environment with predefined device
and network settings.
AKA Emulated Data
Use Lab Data for debugging
performance issues and QAing fixes in
lower environments.
A quick note on Lab vs Field Data
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Represents: Perceived loading
experience
Measurement: the point in the page load
timeline when the page's largest image or
text block is visible within the viewport.
Behavior: Pages using the same page
templates typically share the same LCP
node
Largest Contentful Paint (LCP)
LCP time
(in milliseconds) Color-coding
0–2,500 Green (fast)
2,500-4,000 Orange (moderate)
Over 4,000 Red (slow)
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
What can be LCP?
Text
blocks
Images
Video
posters

Recommended for you

Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...

Do you want to find out, how inefficient use of JS is preventing you from passing CWV and what to do about it? Click through!

brightonseo
TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service...
TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service...TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service...
TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service...

One of the challenges faced at enterprise SEO level is often the legacy platforms and tech stacks that you inherit. Finding a cost-effective way of implementing international SEO best practice is often a barrier to internationalisation. Edge technology is creating new opportunities to optimise websites independently of the inherited technological barriers. In this session, SALT.agency’s Dan Taylor will explore their findings from implementing Hreflang using cutting edge technology to remove these barriers.

seotechnical seodigital marketing
Tech SEO + Site Migrations - SMX Munich
Tech SEO + Site Migrations - SMX MunichTech SEO + Site Migrations - SMX Munich
Tech SEO + Site Migrations - SMX Munich

The document provides a detailed checklist for SEO best practices when conducting a website migration. It outlines numerous steps to take during pre-migration planning such as conducting content inventories, setting key performance indicators, and establishing analytics and technical baselines. It also lists critical steps for go-live including verifying domain preferences, checking server logs and CDNs, and submitting sitemaps. Post-migration activities include monitoring redirects and ongoing site defense. The comprehensive checklist is intended to help SEOs effectively plan and execute a migration while minimizing negative impacts to organic traffic.

seowebsite
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
1. Open Chrome Dev Tools to
the Performance panel
2. Tick 'Web Vitals'
3. Click the 'start profiling and
reload page
Define LCP using Chrome DevTools
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
1. In DevTools, navigate to
the Timings section of the
Performance panel
2. Hover over the LCP marker
3. The element(s) that
correspond to LCP is
detailed in the Related
Node field
Define LCP using Chrome DevTools
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Represents: Responsiveness to user input
Measurement: the time from when a user
first interacts with a page to the time when
the browser is actually able to begin
processing event handlers in response to that
interaction.
Behavior: FID is only available as field data.
First Input Delay (FID)
FID
(in milliseconds) Color-coding
0-100 Green (fast)
101-299 Orange (moderate)
>= 300 Red (slow)
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
FID is a way of measuring main thread activity

Recommended for you

Headless SEO: Optimising Next Gen Sites | brightonSEO 2021
Headless SEO: Optimising Next Gen Sites | brightonSEO 2021Headless SEO: Optimising Next Gen Sites | brightonSEO 2021
Headless SEO: Optimising Next Gen Sites | brightonSEO 2021

An introduction into headless websites and the considerations that SEOs and performance marketers should keep in mind when optimising them.

seoheadlesscmsjamstack
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5

On this presentation we go deep on Chrome developer tools, JS debugger and breakpoints, technical optimization and capabilities of browser service workers to improve SEO and performance

javascriptseopage speed
Hey Googlebot, did you cache that ?
Hey Googlebot, did you cache that ?Hey Googlebot, did you cache that ?
Hey Googlebot, did you cache that ?

Search engines have come a long way in understanding JavaScript, but issues with rendering and load times can still impact your crawl budget and prevent search engines from indexing valuable content! Finding the optimal solution that provides the best user experience, whilst also satisfying the bots can be a challenge. This talk will cover the differences between these solutions, a number of tools and metrics you can use, and other significant considerations to take into account when proposing a rendering solution to your developers.

seo
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
TBT Measures: Responsiveness to
user input
TBT Measurement: Total time in which
the main thread is occupied by tasks
taking more than 50ms to complete.
Use Total Blocking Time (TBT) for lab tests
TBT
(in milliseconds) Color-coding
0–300 Green (fast)
301-599 Orange (moderate)
Over 600 Red (slow)
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Represents: Visual stability
Measurement: a calculation based on the
number of frames in which element(s)
visually moves and the total distance in
pixels the element(s) moved.
Behavior: Often an element used across
pages. Probably your cookie notice.
Cumulative Layout Shift (CLS)
CLS calculated score Color-coding
0–0.10 Green (fast)
0.11-0.24 Orange (moderate)
>= 0.25 Red (slow)
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
CLS is marked in the experience
row as “layout shift”
Details appear in the summary
section
Identify CLS elements using Chrome DevTools
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Image
credit:
Joe
Wue

Recommended for you

SearchLove Boston 2018 - Bartosz Goralewicz - JavaScript: Looking Past the ...
SearchLove Boston 2018 -  Bartosz Goralewicz -  JavaScript: Looking Past the ...SearchLove Boston 2018 -  Bartosz Goralewicz -  JavaScript: Looking Past the ...
SearchLove Boston 2018 - Bartosz Goralewicz - JavaScript: Looking Past the ...

This document discusses JavaScript SEO and provides best practices. It begins by noting many websites are not ready to handle the responsibilities that come with powerful JavaScript frameworks. It then discusses issues like partial indexing for sites relying heavily on client-side JavaScript rendering. The document provides tips on troubleshooting JavaScript indexing issues using the Google Search Console. It also emphasizes the importance of server-side rendering and principles like progressive enhancement. Overall, the key message is that while challenges remain, there is hope for properly optimized client-side rendered JavaScript sites to rank well in Google with continued improvements to crawler and rendering capabilities.

javascriptseosearchlove
Crafting Expertise, Authority and Trust with Entity-Based Content Strategy - ...
Crafting Expertise, Authority and Trust with Entity-Based Content Strategy - ...Crafting Expertise, Authority and Trust with Entity-Based Content Strategy - ...
Crafting Expertise, Authority and Trust with Entity-Based Content Strategy - ...

At SMXL, I presented a talk about crafting effective, authoritative content by understanding entities. People, places, objects, and ideas have facets. Human users have unique perspectives and their language changes as their relationship to an entity changes. It's time we stop chasing keywords-- a byproduct of search intent-- in favor of strategic entity-based strategy. This deck includes insights into how to access the data behind Google's knowledge graph, use external links to boost the search engine's understanding, and ways to become an authoritative and trusted source.

seocontent strategywikidata
Web Performance & Search Engines - A look beyond rankings
Web Performance & Search Engines - A look beyond rankingsWeb Performance & Search Engines - A look beyond rankings
Web Performance & Search Engines - A look beyond rankings

London Web Performance Meetup - 10th November 2020 There is a lot of talk about web performance as a ranking signal in Search Engines and how important or not it is, but often people are overlooking how performance affects multiple phases of a search engine such as crawling, rendering, and indexing. In this talk, we'll try to understand how a search engine works and how some aspects of web performance affect the online presence of a website.

search enginesseocrawler
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Mobile
Screen
Resolution
Stats
Worldwide
360 x 640
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Core Web Vitals measure how
long it takes to complete the
the script functions needed to
paint the above the content.
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
It's a simple formula
User Screen Content
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
the process of turning
HTML into pixels
Rendering:

Recommended for you

How Agile Technical SEO Can Add Value To Your SEO Campaign, by Adam Gent
How Agile Technical SEO Can Add Value To Your SEO Campaign, by Adam GentHow Agile Technical SEO Can Add Value To Your SEO Campaign, by Adam Gent
How Agile Technical SEO Can Add Value To Your SEO Campaign, by Adam Gent

Google is constantly evolving and a webmaster’s ability to react to changes is key to any successful SEO campaign. However, what happens when you can’t get technical SEO recommendations over the line? This slideshow focuses on how you can be more Agile and implement technical SEO recommendations that add value.

digital marketingsearch engine optimizationsearch marketing
SEO vs Angular
SEO vs AngularSEO vs Angular
SEO vs Angular

This document discusses different options for migrating a website from traditional server-side rendering to a single-page application framework like Angular while maintaining SEO optimization. The main options covered are: 1. Making no architecture changes and optimizing for client-side rendering. 2. Using the AngularJS AJAX Crawling specification, but this is now deprecated. 3. Using a service like Prerender.io that renders the JavaScript in a virtual browser to provide static HTML snapshots for crawlers. 4. Using a newer alternative to Prerender called Rendertron that performs the same rendering but delivers snapshots on demand. 5. Implementing server-side rendering with Angular

seoangularsingle app application
Debugging rendering problems at scale
Debugging rendering problems at scaleDebugging rendering problems at scale
Debugging rendering problems at scale

BrightonSEO, July 2021 - To better understand a website's content search engines developed Web Rendering Services and are now able to render pages more or less like a normal user. Those Web Rendering Services are strictly connected to other phases of the crawling-indexing-ranking pipeline - if a rendering fails, it may affect all of them. In this session Giacomo will guide you through the process of understanding why rendering could be a problem also for non-Javascript pages, how to manually debug page rendering, the difference between understanding WRSs' capabilities and debugging problems on a website, and eventually how to test pages at scale.

web rendering servicessearch enginesseo
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
CWV Arena
Pixel Pipeline
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
The pixel pipeline
JavaScript Style Layout Paint Composite
Handles work that will result in visual changes
Examples:
● jQuery’s animate function
● Sorting a data set
● Adding DOM elements to the page
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
DOM
HTML
HTML
Parser
DOM
Tree
JavaScript modifies or adds
content to the DOM.
@Jammer_volts
Step 1: Parsing
turns a chunk of HTML
into DOM nodes
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Body
h1 p img
Before JavaScript Body
h1 p img
After JavaScript
ol
li li
li
p img

Recommended for you

BrightonSEO 2019 - Edge SEO - Using CDNs To Perform SEO On The Edge
BrightonSEO 2019 - Edge SEO - Using CDNs To Perform SEO On The EdgeBrightonSEO 2019 - Edge SEO - Using CDNs To Perform SEO On The Edge
BrightonSEO 2019 - Edge SEO - Using CDNs To Perform SEO On The Edge

My talk from #BrightonSEO 2019, the twentieth edition. Building on my talk from TechSEO Boost 2018, my talk at Brighton explores the changes in #EdgeSEO and the future possibilities given the advent of Akamai Edge Workers, AWS Lambda capabilities and the prospect of Fastly's WASM solution.

seoedge seobrightonseo
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...

Raiders of the Fast Start: Frontend Performance Archeology There are a lot of books, articles, and online tutorials out there with fantastic advice on how to make your websites performant. It all seems easy in theory, but applying best practices to real-world code is anything but straightforward. Diagnosing and fixing frontend performance issues on a large legacy codebase is like being an archaeologist excavating the remains of a lost civilization. You don’t know what you will find until you start digging! Pick up your trowels and come along with Etsy’s Frontend Systems team as we become archaeologists digging into frontend performance on our large, legacy mobile codebase. I’ll share real-life lessons you can use to guide your own excavations into legacy code: What tools and metrics we used to diagnose issues and track progress. How we went beyond server-driven best practices to focus on the client. Which fixes successfully increased conversion, and which didn’t. Our work, like all good archaeology, went beyond artifacts and unearthed new insights into our culture. We at Etsy pride ourselves on our culture of performance, but, like all cultures, it needs to adapt and reinvent itself to account for changes to the landscape. Based on what we’ve learned, we are making the case for a new, organization-wide, frontend-focused performance culture that will solve the problems we face today.

TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...
TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...
TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...

This document discusses various rendering strategies and their impact on Core Web Vitals metrics. It begins by defining the Core Web Vitals metrics - Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. It then examines different rendering strategies like client-side rendering, server-side rendering, static rendering, and rehydration. For each strategy, it outlines potential issues that could lead to poor Core Web Vitals and provides mitigation tactics to address those issues. The goal is to help understand how rendering strategies affect page speed and provide ways to optimize for Core Web Vitals.

technical seoseo
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
The pixel pipeline
Style calculations are the process of figuring out which CSS rules apply to which
elements based on matching selectors.
JavaScript Layout Paint Composite
Style
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
DOM
HTML
Style
Sheets
HTML
Parser
CSS
Parser
DOM
Tree
Style
Rules
Attachment
@Jammer_volts
Step 2: Style
Add style calculations to
the DOM
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
The pixel pipeline
JavaScript Style
Once the browser knows which rules apply to an element it can begin to calculate
how much space it takes up and where relative to the size of the viewport.
The Core Web Vital metric Cumulative Layout Shift measures this.
Paint Composite
Layout
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
DOM
HTML
Style
Sheets
HTML
Parser
CSS
Parser
DOM
Tree
Style
Rules
Render
Tree
Attachment
Layout
Step 3: Layout
figure out where DOM
elements end up relative
to one another

Recommended for you

Satisfying Business and Engineering Requirements: Client-server JavaScript, S...
Satisfying Business and Engineering Requirements: Client-server JavaScript, S...Satisfying Business and Engineering Requirements: Client-server JavaScript, S...
Satisfying Business and Engineering Requirements: Client-server JavaScript, S...

Often business needs and developer needs are at odds when developing public facing web applications, sites that need to be indexed by search engines. Business is primarily concerned with factors such as search engine optimization, SEO, improving visitor retention and reducing bounce rates, while engineering is more concerned with improving developer ergonomics, code re-usage, separation of concerns, and code maintenance. This talk aims to describe a solution that satisfies both business and engineering requirements.

lazojsnode.jsisomorphic javascript
Web Leaps Forward
Web Leaps ForwardWeb Leaps Forward
Web Leaps Forward

The document discusses the history and development of HTML5 and JavaScript performance. It covers how: 1) JavaScript performance improvements through just-in-time compilers and other optimizations led to a 100x increase in speed over time, enabling complex web applications. 2) The introduction of asm.js allowed native C/C++ code to be compiled to highly optimized JavaScript, closing the performance gap with native apps. 3) Recent efforts are bringing parallelism to web runtimes and the SIMD.js API in order to better utilize multi-core processors and continue improving JavaScript performance.

webrtcwebgljavascript
Big Data And HTML5 (DevCon TLV 2012)
Big Data And HTML5 (DevCon TLV 2012)Big Data And HTML5 (DevCon TLV 2012)
Big Data And HTML5 (DevCon TLV 2012)

In this talk from DevCon TLV we covered: ● The power of HTML5 APIs and how you can use them in your next modern Web Apps. ● On the server side how you can use: Google Cloud Endpoints to scale your API and gain more productivity. ● We did some live Demos and talked about Big Query interfaces.

webbig databig query
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
p p img h1
img ol img
p
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
The pixel pipeline
JavaScript Style Layout
Painting is the process of filling in pixels. It involves drawing out text, colors,
images, borders, and shadows, essentially every visual part of the elements.
The drawing is typically done onto multiple surfaces, often called layers.
Largest content paint occurs here
Composite
Paint
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Painting
DOM
HTML
Style
Sheets
HTML
Parser
CSS
Parser
DOM
Tree
Style
Rules
Render
Tree
Attachment
Layout
Step 4: Paint
converts layers of styled DOM
elements into pixels
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
The pixel pipeline
JavaScript Style Layout Paint Composite
Since the parts of the page were drawn into potentially multiple layers they need to
be drawn to the screen in the correct order so that the page renders correctly.
This is especially important for elements that overlap another, since a mistake
could result in one element appearing over the top of another incorrectly.

Recommended for you

What's new in Android at I/O'16
What's new in Android at I/O'16What's new in Android at I/O'16
What's new in Android at I/O'16

The document summarizes new features in Android and the Android Support Library. Some key points include: Android Studio 2.2 includes improvements to speed, design tools, and testing capabilities. ConstraintLayout is a new layout that is more flexible than RelativeLayout. Notifications and quick settings have been enhanced. Multi-window mode and picture-in-picture now allow apps to span screens. Java 8 language features and runtime improvements increase performance. The Support Library introduces updates to fragments, notifications, and vector asset handling.

androidgoogleio16
The ultimate guide to optimize your react native app performance in 2022
The ultimate guide to optimize your react native app performance in 2022The ultimate guide to optimize your react native app performance in 2022
The ultimate guide to optimize your react native app performance in 2022

Improve Your React Native app performance. Go through this guide to Speed up the performance of Android and iOS applications with our ultimate strategies.

react nativeapp performanceandroid
GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...
GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...
GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...

The document discusses a technique for automatically generating HTML code from mock-up images using machine learning. Mock-up images are first created containing elements like text boxes, buttons, radio buttons etc. These images are then fed into a convolutional neural network model which detects and recognizes the elements. The coordinates of the detected elements are then used to generate the HTML code for the corresponding elements using an HTML builder algorithm. This allows rapid development of website frontends from mock-up designs in an automated, time-saving and cost-effective manner compared to manual coding. The proposed technique aims to reduce development time and costs while generating HTML code templates from visual designs.

irjet
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
DOM
HTML
Style
Sheets
HTML
Parser
CSS
Parser
DOM
Tree
Style
Rules
Render
Tree
Attachment
Layout
Painting
Composite
Step 5: Composite
assembles all layers into a final
screen image
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
What we think
it’ll be like
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
What it's actually like
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
The end result is the same.
How we do it matters.

Recommended for you

Js foo - Sept 8 upload
Js foo - Sept 8 uploadJs foo - Sept 8 upload
Js foo - Sept 8 upload

The document discusses the evolution of MVC patterns and the rise of HTML5 for building mobile apps. It describes how JavaScript performance issues were really due to DOM inefficiency rather than the language itself. The document introduces Famo.us, a JavaScript library that uses transformation matrices from computer graphics to improve rendering performance on mobile. It explains how Famo.us implements an MVC pattern with Backbone.js to separate concerns for building responsive mobile apps with a common codebase.

famo.usappsjavascript
Mobile Web Applications using HTML5 [IndicThreads Mobile Application Develop...
Mobile Web Applications using HTML5  [IndicThreads Mobile Application Develop...Mobile Web Applications using HTML5  [IndicThreads Mobile Application Develop...
Mobile Web Applications using HTML5 [IndicThreads Mobile Application Develop...

Session Presented at 1st IndicThreads.com Conference On Mobile Application Development held on 19-20 November 2010 in Pune, India WEB: http://M10.IndicThreads.com ------------ Speaker: Romin Irani Abstract: HTML5 is expected to become mainstream soon. It brings a lot of new features that developers can incorporate today. The Webkit browser is currently the best implementation of the HTML5 standards and it is also available on a variety of Mobile devices like iPhone, Android, etc. Mobile Web applications are getting powerful day by day. They have distinct advantages over Native mobile applications. With Webkit available on most Smartphone browsers, you can create powerful mobile web applications today. Combine this with some of the latest HTML5 features, and it makes a compelling alternative available to developers today. This session will give an overview of : a) What mobile web applications are and their pros / cons vis-a-vis Native Mobile applications. b) HTML5 features like geolocation, offline storage, web workers, etc c) How one can use HTML5 features mentioned in (b) to develop mobile web applications today. d) Demonstrate all the above features via code samples. e) Cover challenges involved in making sure that the same code base runs on all mobile browsers in a majority of Smartphones. Takeaway for the audience: a) Knowledge about upcoming HTML5 standards specifically features like geolocation, offline storage, web workers, etc. b) Understand of Mobile Web applications and how we can use HTML5 standards to deliver powerful web applications that are delivered on most smartphones today. c) Challenges involved in making sure that the Mobile Web Applications works well in most browsers across different devices.

html5smartphoneiphone
JUG Poznan - 2017.01.31
JUG Poznan - 2017.01.31 JUG Poznan - 2017.01.31
JUG Poznan - 2017.01.31

Avoiding software fails. Few metrics to improve application reliability by Sławomir Michalik. Presentation reviewed 4 distribution.

big data analyticsomnilogyapplication performance monitoring
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
CWV Pratfalls and Mitigations
Rendering Strategies
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
● Client Side
● Server Sider
● Static
● Dynamic
● Rehydration
Rendering Strategies
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Client Side Rendering (CSR)
<!doctype html>
<head>
<script
type="text/javascript"
src="/main.js?ver=1.1.0">
</script>
</head>
<body>
<app-root></app-root>
</body>
</html>
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
CSR Poor LCP: CSR
Source:
https://web.dev/lcp/

Recommended for you

Delivering Java Applications? Ensure Top Performance Every Time, with Intell...
 Delivering Java Applications? Ensure Top Performance Every Time, with Intell... Delivering Java Applications? Ensure Top Performance Every Time, with Intell...
Delivering Java Applications? Ensure Top Performance Every Time, with Intell...

From pilot to production, eG Enterprise empowers enterprise organizations to deliver a better user experience and increased ROI by delivering comprehensive, converged performance management of Java application services. With optimized Java platforms delivered through Zing, Azul Systems enables Java-based businesses to focus on functionality and long-term lower operating costs rather than daily firefighting. Together, eG Enterprise and Azul Systems offer a proven Java environment designed to optimize the deployment, management, and scale of Java application services. View these slides from this webinar where Bala Vaidhinathan, CTO of eG Innovations and Simon Ritter, Deputy CTO of Azul Systems discuss how: • Java Application Service Management can be simplified and made more cost-effective, while delivering a better user experience • eG Enterprise enhancements provide insights into Java applications running on the Zing runtime • eG Enterprise and Azul Zing working together in a production Java installation can reduce costs, optimize deployments and deliver optimum user satisfaction

user experiencejavaapplication performance monitoring
DevOps: Find Solutions, Not More Defects
DevOps: Find Solutions, Not More DefectsDevOps: Find Solutions, Not More Defects
DevOps: Find Solutions, Not More Defects

The promise of DevOps is that we can push new ideas out to market faster while avoiding delivering serious defects into production. Andreas Grabner explains that testers are no longer measured by the number of defect reports they enter, nor are developers measured by the lines of code they write. As a team, you are measured by how fast you can deploy high quality functionality to the end user. Achieving this goal requires testers to increase their skills. It’s all about finding solutions—not just problems. Testers must transition from reporting “app crashes” to providing details such as “memory leak caused by bad cache implementation.” Instead of reporting “it’s slow,” testers must discover “wrong hibernate configuration causes too much traffic from the database.” Using three real-life examples, Andreas illustrates what it takes for testing teams to become part of the DevOps transformation—bringing more value to the entire organization.

devops
Pravin_CV_4+years
Pravin_CV_4+yearsPravin_CV_4+years
Pravin_CV_4+years

This document contains a summary and details of Pravin Gurav's professional experience as a Software Test Engineer. He has over 4 years of experience in testing web applications using Selenium with Java and TestNG frameworks. He is proficient in test automation, regression testing, defect management and has experience working with tools like Jenkins, JIRA and databases like Oracle. The document lists his education qualifications and provides details of several projects he has worked on related to testing software applications and upgrades.

Jamie Indigo | @Jammer_Volts | #TechSEOBoost
<rel="buyproduct.js">
= 99.5% success rate
Each script has a probability to fail.
With
JavaScript
Without
JavaScript
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
script1.js
script2.js
script3.js
script4.js
{Product name}
{Product sku}
{Product price}
{Product category}
{Product availability}
{Shipping times}
{Breadcrumbs}
{Product description}
{Product images}
{Product specs}
<!doctype html>
<head>
<script type="text/javascript"
src="/main.js?ver=1.1.0">
</script>
</head>
<body>
<app-root></app-root>
</body>
</html>
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
script1.js
script2.js
script3.js
script4.js
{Product name}
{Product sku}
{Product price}
{Product category}
{Product availability}
{Shipping times}
{Breadcrumbs}
{Product description}
{Product images}
{Product specs}
mainbundle.js
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
script1.js
script2.js
script3.js
script4.js
{Product name}
{Product sku}
{Product price}
{Product category}
{Product availability}
{Shipping times}
{Breadcrumbs}
{Product description}
{Product images}
{Product specs}
mainbundle.js

Recommended for you

SEO Reporting in the Enterprise: Information is Power by AJ Mihalic - #SEJSum...
SEO Reporting in the Enterprise: Information is Power by AJ Mihalic - #SEJSum...SEO Reporting in the Enterprise: Information is Power by AJ Mihalic - #SEJSum...
SEO Reporting in the Enterprise: Information is Power by AJ Mihalic - #SEJSum...

The document discusses SEO monitoring and metrics. It emphasizes the importance of monitoring websites for errors detected by Googlebot in order to prevent ranking and traffic drops. Early detection of issues through monitoring status codes and URLs crawled allows time to implement fixes before serious problems arise. Speaking the language of executive leadership by focusing on metrics like traffic growth, user experience, and resource optimization can help gain support for SEO initiatives.

SEO Reporting in the Enterprise - AJ Mihalic - AYIMA
SEO Reporting in the Enterprise - AJ Mihalic - AYIMASEO Reporting in the Enterprise - AJ Mihalic - AYIMA
SEO Reporting in the Enterprise - AJ Mihalic - AYIMA

The document discusses SEO monitoring and metrics. It emphasizes the importance of monitoring websites for errors detected by Googlebot in order to prevent ranking and traffic drops. Early detection of issues through monitoring status codes and URLs crawled allows time to implement fixes before serious problems arise. Speaking to executive leadership by focusing on metrics like reducing errors and improving user experience can help gain support for SEO initiatives.

Top 13 best front end web development tools to consider in 2021
Top 13 best front end web development tools to consider in 2021Top 13 best front end web development tools to consider in 2021
Top 13 best front end web development tools to consider in 2021

List & Comparison of Top Web Development Tools with Features & Pricing. Select The Best Front End Tool for Web Development Based on This Detailed Review, Web Development Tools helps the developers to work with a variety of technologies. Web Development Tools should be able to provide faster mobile development at lower costs. Visit On:- https://www.samaritaninfotech.com

webweb designweb development
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Chains are dependencies.
Each segment of the chain is
dependent on its initiator to
execute.
If a segment of the chain fails,
all of its subsequent content
fails.
Mitigation: Avoid Critical Chains
bundle.js
script1.js
script2.js
script3.js
script4.js
{Product name}
{Product sku}
{Product price}
{Product category}
{Product availability}
{Shipping times}
{Breadcrumbs}
{Product description}
{Product images}
{Product specs}
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
CSR Poor LCP: Render-blocking JavaScript and
CSS
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
2 types resources block rendering
<link rel="stylesheet">
when
● Does not have a disabled
attribute. When this attribute is
present, the browser does not
download the stylesheet.
● Does not have a media attribute
that matches the user's device.
<script>
when
● Is in the <head> of the document.
● Does not have a defer attribute.
● Does not have an async attribute.
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Tell non-critical assets to wait using asynchronous or defer
attributes
<rel=”myscript.js” async>
<rel=”myscript.js” defer>
Lazy load images in Chrome with native attributes
<img src=”the-traveler.jpg” loading=”lazy”>
Mitigation: Defer non critical assets

Recommended for you

5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season

Retail TouchPoints' 2014 Holiday Connected Consumer Series session presented by Instart Logic #HolidayCCS

instart logicretail touchpointsmobile shopper
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares

The document discusses Acquity Group's process for building a mobile-optimized website for their clients. They determined a web application would be better than a native mobile app. Their process involved stakeholder interviews, focus groups, competitive analysis, and content analysis. They designed templates for common pages like menus, solutions, and case studies. The site was developed using Django, Oracle, HTML, CSS, and JavaScript and could be completed by their UI team in under 40 hours.

villareswebkitnick
Building Mobile Optimized Websites
Building Mobile Optimized WebsitesBuilding Mobile Optimized Websites
Building Mobile Optimized Websites

The document discusses Acquity Group's process for building a mobile-optimized website for their clients. They determined a web application would be better than a native mobile app. Their process involved stakeholder interviews, focus groups, competitive analysis, and content analysis. They designed templates for common pages like solutions, case studies and newsfeeds. The site was developed using Django, Oracle DB, XHTML, CSS and jQuery in under 40 hours.

mobileiphonewebkit
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Inline small scripts into <head> using <style>
and/or <script> tags for above the fold content
● Ideally inline CSS is immediately after critical
metadata
● Load inline scripts before third party
resources, style sheets and JS
● If the script is over 1 kB, avoid inlining it
(Inline scripts are parsed and compiled on
the main thread.)
● Remove inline functions from script bundles
Mitigation: Inline Critical Assets
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
CSR Poor LCP: Performance
● Google will limit CPU consumption
● Google will interrupt script
● Excessive CPU consumption negatively impacts indexing
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
CSR: Poor FID
Heavy JavaScript execution
const heavy = true;
While (heavy) {
console.log("FID
fail")
}
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Mitigation: Only ship contributing scripts

Recommended for you

Best Practices for Troubleshooting Four Real-world Java Performance Issues
Best Practices for Troubleshooting Four Real-world Java Performance IssuesBest Practices for Troubleshooting Four Real-world Java Performance Issues
Best Practices for Troubleshooting Four Real-world Java Performance Issues

If you are managing or operating Java-based web applications, you have probably heard your users complain many a time that "the application is slow". After spending hours, you find out that the issue was not your application, but with a third party service that your application relies upon. Web application performance issues can also occur due to code problems, database table locks or slowness on the browser, to name a few reasons. Learn how to troubleshoot four real-world performance issues with Java-based web applications in minutes.

javajava monitoringjava performance
Carrington degree offer diploma Transcript
Carrington degree offer diploma TranscriptCarrington degree offer diploma Transcript
Carrington degree offer diploma Transcript

一比一原版【微信:176555708】办理毕业证 成绩单 文凭 学位证offer(留信学历认证永久存档查询)采用学校原版纸张、特殊工艺完全按照原版一比一制作(包括:隐形水印,阴影底纹,钢印LOGO烫金烫银,LOGO烫金烫银复合重叠,文字图案浮雕,激光镭射,紫外荧光,温感,复印防伪)行业标杆!精益���精,诚心合作,真诚制作!多年品质 ,按需精细制作,24小时接单,全套进口原装设备,十五年致力于帮助留学生解决难题,业务范围有加拿大、英国、澳洲、韩国、美国、新加坡,新西兰等学历材料,包您满意。 【业务选择办理准则】 一、工作未确定,回国需先给父母、亲戚朋友看下文凭的情况,办理一份就读学校的毕业证【微信:176555708】文凭即可 二、回国进私企、外企、自己做生意的情况,这些单位是不查询毕业证真伪的,而且国内没有渠道去查询国外文凭的真假,也不需要提供真实教育部认证。鉴于此,办理一份毕业证【微信:176555708】即可 三、进国企,银行,事业单位,考公务员等等,这些单位是必需要提供真实教育部认证的,办理教育部认证所需资料众多且烦琐,所有材料您都必须提供原件,我们凭借丰富的经验,快捷的绿色通道帮您快速整合材料,让您少走弯路。 留信网认证的作用: 1:该专业认证可证明留学生真实身份【微信:176555708】 2:同时对留学生所学专业登记给予评定 3:国家专业人才认证中心颁发入库证书 4:这个认证书并且可以归档倒地方 5:凡事获得留信网入网的信息将会逐步更新到个人身份内,将在公安局网内查询个人身份证信息后,同步读取人才网入库信息 6:个人职称评审加20分 7:个人信誉贷款加10分 8:在国家人才网主办的国家网络招聘大会中纳入资料,供国家高端企业选择人才 → 【关于价格问题(保证一手价格) 我们所定的价格是非常合理的,而且我们现在做得单子大多数都是代理和回头客户介绍的所以一般现在有新的单子 我给客户的都是第一手的代理价格,因为我想坦诚对待大家 不想跟大家在价格方面浪费时间 对于老客户或者被老客户介绍过来的朋友,我们都会适当给一些优惠。 选择实体注册公司办理,更放心,更安全!我们的承诺:可来公司面谈,可签订合同,会陪同客户一起到教育部认证窗口递交认证材料,客户在教育部官方认证查询网站查询到认证通过结果后付款,不成功不收费! 外观非常精致,由特殊纸质材料制成,上面印有校徽、校名、毕业生姓名、专业等信息。 格式相对统一,各专业都有相应的模板。通常包括以下部分: 校徽:象征着学校的荣誉和传承。 校名:学校英文全称 授予学位:本部分将注明获得的具体学位名称。 毕业生姓名:这是最重要的信息之一,标志着该证书是由特定人员获得的。 颁发日期:这是毕业正式生效的时间,也代表着毕业生学业的结束。 其他信息:根据不同的专业和学位,可能会有一些特定的信息或章节。 价值很高,需要妥善保管。一般来说,应放置在安全、干燥、防潮的地方,避免长时间暴露在阳光下。如需使用,最好使用复印件而不是原件,以免丢失。 综上所述,是证明身份和学历的高价值文件。外观简单庄重,格式统一,包括重要的个人信息和发布日期。对持有人来说,妥善保管是非常重要的。

Massey University degree offer diploma Transcript
Massey University degree offer diploma TranscriptMassey University degree offer diploma Transcript
Massey University degree offer diploma Transcript

一比一原版【微信:176555708】办理毕业证 成绩单 文凭 学位证offer(留信学历认证永久存档查询)采用学校原版纸张、特殊工艺完全按照原版一比一制作(包括:隐形水印,阴影底纹,钢印LOGO烫金烫银,LOGO烫金烫银复合重叠,文字图案浮雕,激光镭射,紫外荧光,温感,复印防伪)行业标杆!精益求精,诚心合作,真诚制作!多年品质 ,按需精细制作,24小时接单,全套进口原装设备,十五年致力于帮助留学生解决难题,业务范围有加拿大、英国、澳洲、韩国、美国、新加坡,新西兰等学历材料,包您满意。 【业务选择办理准则】 一、工作未确定,回国需先给父母、亲戚朋友看下文凭的情况,办理一份就读学校的毕业证【微信:176555708】文凭即可 二、回国进私企、外企、自己做生意的情况,这些单位是不查询毕业证真伪的,而且国内没有渠道去查询国外文凭的真假,也不需要提供真实教育部认证。鉴于此,办理一份毕业证【微信:176555708】即可 三、进国企,银行,事业单位,考公务员等等,这些单位是必需要提供真实教育部认证的,办理教育部认证所需资料众多且烦琐,所有材料您都必须提供原件,我们凭借丰富的经验,快捷的绿色通道帮您快速整合材料,让您少走弯路。 留信网认证的作用: 1:该专业认证可证明留学生真实身份【微信:176555708】 2:同时对留学生所学专业登记给予评定 3:国家专业人才认证中心颁发入库证书 4:这个认证书并且可以归档倒地方 5:凡事获得留信网入网的信息将会逐步更新到个人身份内,将在公安局网内查询个人身份证信息后,同步读取人才网入库信息 6:个人职称评审加20分 7:个人信誉贷款加10分 8:在国家人才网主办的国家网络招聘大会中纳入资料,供国家高端企业选择人才 → 【关于价格问题(保证一手价格) 我们所定的价格是非常合理的,而且我们现在做得单子大多数都是代理和回头客户介绍的所以一般现在有新的单子 我给客户的都是第一手的代理价格,因为我想坦诚对待大家 不想跟大家在价格方面浪费时间 对于老客户或者被老客户介绍过来的朋友,我们都会适当给一些优惠。 选择实体注册公司办理,更放心,更安全!我们的承诺:可来公司面谈,可签订合同,会陪同客户一起到教育部认证窗口递交认证材料,客户在教育部官方认证查询网站查询到认证通过结果后付款,不成功不收费! 外观非常精致,由特殊纸质材料制成,上面印有校徽、校名、毕业生姓名、专业等信息。 格式相对统一,各专业都有相应的模板。通常包括以下部分: 校徽:象征着学校的荣誉和传承。 校名:学校英文全称 授予学位:本部分将注明获得的具体学位名称。 毕业生姓名:这是最重要的信息之一,标志着该证书是由特定人员获得的。 颁发日期:这是毕业正式生效的时间,也代表着毕业生学业的结束。 其他信息:根据不同的专业和学位,可能会有一些特定的信息或章节。 价值很高,需要妥善保管。一般来说,应放置在安全、干燥、防潮的地方,避免长时间暴露在阳光下。如需使用,最好使用复印件而不是原件,以免丢失。 综上所述,是证明身份和学历的高价值文件。外观简单庄重,格式统一,包括重要的个人信息和发布日期。对持有人来说,妥善保管是非常重要的。

Jamie Indigo | @Jammer_Volts | #TechSEOBoost
CSR Poor CLS: Image dimensions
● Images without dimensions
● Ads, embeds, and iframes without
dimensions
Mitigation: Declare dimensions
img {
width: 100%; /* or max-width: 100%; */
height: auto;
}
Reserved slot:
Ad space
img {
width: 100%;
/* or max-width:
100%; */
height: auto;
}
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
*
CSR Poor CLS: Loading above existing content
Footer
Header
CLS Layout Score = impact fraction * distance fraction
Mitigation: Prioritize Above the Fold content load
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
CSR Poor CLS: document.write()
Modern Browsers support speculative parsing off of the main thread.
Read as: They parse ahead while scripts are being downloaded and executed.
document.write() ruins all that hard work.
Mitigation: Chances are this isn't the work of your devs. Talk to your
point of content that for "magic" third-party tool.
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
CSR Poor CLS: Style recalculations
Changing the DOM will cause the browser to
recalculate element styles (and possibly layouts).
Mitigation: Lessen the scope and complexity of
Style Calculations by:
● Reducing the complexity of your selectors.
● Reducing the number of elements being styled.
● Measure your Style Recalculation Cost
● Use BEM (Block, Element, Modifier) a
class-centric methodology.

Recommended for you

Future Trends What's Next for UI UX Design on Websites
Future Trends What's Next for UI UX Design on WebsitesFuture Trends What's Next for UI UX Design on Websites
Future Trends What's Next for UI UX Design on Websites

In this blog, we explore some of the upcoming trends that are expected to influence UI UX design on websites in the near future.

best ui/ux design service
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理

特殊工艺完全按照原版制作【微信:A575476】【(爱大毕业证书)英国爱丁堡大学毕业证成绩单offer】【微信:A575476】(留信学历认证永久存档查询)采用学校原版纸张(包括:隐形水印,阴影底纹,钢印LOGO烫金烫银,LOGO烫金烫银复合重叠,文字图案浮雕,激光镭射,紫外荧光,温感,复印防伪)行业标杆!精益求精,诚心合作,真诚制作!多年品质 ,按需精细制作,24小时接单,全套进口原装设备,十五年致力于帮助留学生解决难题,业务范围有加拿大、英国、澳洲、韩国、美国、新加坡,新西兰等学历材料,包您满意。 【业务选择办理准则】 一、工作未确定,回国需先给父母、亲戚朋友看下文凭的情况,办理一份就读学校的毕业证【微信:A575476】文凭即可 二、回国进私企、外企、自己做生意的情况,这些单位是不查询毕业证真伪的,而且国内没有渠道去查询国外文凭的真假,也不需要提供真实教育部认证。鉴于此,办理一份毕业证【微信:A575476】即可 三、进国企,银行,事业单位,考公务员等等,这些单位是必需要提供真实教育部认证的,办理教育部认证所需资料众多且烦琐,所有材料您都必须提供原件,我们凭借丰富的经验,快捷的绿色通道帮您快速整合材料,让您少走弯路。 留信网认证的作用: 1:该专业认证可证明留学生真实身份【微信:A575476】 2:同时对留学生所学专业登记给予评定 3:国家专业人才认证中心颁发入库证书 4:这个认证书并且可以归档倒地方 5:凡事获得留信网入网的信息将会逐步更新到个人身份内,将在公安局网内查询个人身份证信息后,同步读取人才网入库信息 6:个人职称评审加20分 7:个人信誉贷款加10分 8:在国家人才网主办的国家网络招聘大会中纳入资料,供国家高端企业选择人才 → 【关于价格问题(保证一手价格) 我们所定的价格是非常合理的,而且我们现在做得单子大多数都是代理和回头客户介绍的所以一般现在有新的单子 我给客户的都是第一手的代理价格,因为我想坦诚对待大家 不想跟大家在价格方面浪费时间 对于老客户或者被老客户介绍过来的朋友,我们都会适当给一些优惠。 选择实体注册公司办理,更放心,更安全!我们的承诺:可来公司面谈,可签订合同,会陪同客户一起到教育部认证窗口递交认证材料,客户在教育部官方认证查询网站查询到认证通过结果后付款,不成功不收费! 办理(爱大毕业证书)英国爱丁堡大学毕业证【微信:A575476】外观非常精致,由特殊纸质材料制成,上面印有校徽、校名、毕业生姓名、专业等信息。 办理(爱大毕业证书)英国爱丁堡大学毕业证【微信:A575476】格式相对统一,各专业都有相应的模板。通常包括以下部分: 校徽:象征着学校的荣誉和传承。 校名:学校英文全称 授予学位:本部分将注明获得的具体学位名称。 毕业生姓名:这是最重要的信息之一,标志着该证书是由特定人员获得的。 颁发日期:这是毕业正式生效的时间,也代表着毕业生学业的结束。 其他信息:根据不同的专业和学位,可能会有一些特定的信息或章节。 办理(爱大毕业证书)英国爱丁堡大学毕业证【微信:A575476】价值很高,需要妥善保管。一般来说,应放置在安全、干燥、防潮的地方,避免长时间暴露在阳光下。如需使用,最好使用复印件而不是原件,以免丢失。 综上所述,办理(爱大毕业证书)英国爱丁堡大学毕业证【微信:A575476 】是证明身份和学历的高价值文件。外观简单庄重,格式统一,包括重要的个人信息和发布日期。对持有人来说,妥善保管是非常重要的。

伦敦大学毕业证伦敦商学院毕业证牛津大学毕业证
Lincoln University degree offer diploma Transcript
Lincoln University degree offer diploma TranscriptLincoln University degree offer diploma Transcript
Lincoln University degree offer diploma Transcript

一比一原版【微信:176555708】办理毕业证 成绩单 文凭 学位证offer(留信学历认证永久存档查询)采用学校原版纸张、特殊工艺完全按照原版一比一制作(包括:隐形水印,阴影底纹,钢印LOGO烫金烫银,LOGO烫金烫银复合重叠,文字图案浮雕,激光镭射,紫外荧光,温感,复印防伪)行业标杆!精益求精,诚心合作,真诚制作!多年品质 ,按需精细制作,24小时接单,全套进口原装设备,十五年致力于帮助留学生解决难题,业务范围有加拿大、英国、澳洲、韩国、美国、新加坡,新西兰等学历材料,包您满意。 【业务选择办理准则】 一、工作未确定,回国需先给父母、亲戚朋友看下文凭的情况,办理一份就读学校的毕业证【微信:176555708】文凭即可 二、回国进私企、外企、自己做生意的情况,这些单位是不查询毕业证真伪的,而且国内没有渠道去查询国外文凭的真假,也不需要提供真实教育部认证。鉴于此,办理一份毕业证【微信:176555708】即可 三、进国企,银行,事业单位,考公务员等等,这些单位是必需要提供真实教育部认证的,办理教育部认证所需资料众多且烦琐,所有材料您都必须提供原件,我们凭借丰富的经验,快捷的绿色通道帮您快速整合材料,让您少走弯路。 留信网认证的作用: 1:该专业认证可证明留学生真实身份【微信:176555708】 2:同时对留学生所学专业登记给予评定 3:国家专业人才认证中心颁发入库证书 4:这个认证书并且可以归档倒地方 5:凡事获得留信网入网的信息将会逐步更新到个人身份内,将在公安局网内查询个人身份证信息后,同步读取人才网入库信息 6:个人职称评审加20分 7:个人信誉贷款加10分 8:在国家人才网主办的国家网络招聘大会中纳入资料,供国家高端企业选择人才 → 【关于价格问题(保证一手价格) 我们所定的价格是非常合理的,而且我们现在做得单子大多数都是代理和回头客户介绍的所以一般现在有新的单子 我给客户的都是第一手的代理价格,因为我想坦诚对待大家 不想跟大家在价格方面浪费时间 对于老客户或者被老客户介绍过来的朋友,我们都会适当给一些优惠。 选择实体注册公司办理,更放心,更安全!我们的承诺:可来公司面谈,可签订合同,会陪同客户一起到教育部认证窗口递交认证材料,客户在教育部官方认证查询网站查询到认证通过结果后付款,不成功不收费! 外观非常精致,由特殊纸质材料制成,上面印有校徽、校名、毕业生姓名、专业等信息。 格式相对统一,各专业都有相应的模板。通常包括以下部分: 校徽:象征着学校的荣誉和传承。 校名:学校英文全称 授予学位:本部分将注明获得的具体学位名称。 毕业生姓名:这是最重要的信息之一,标志着该证书是由特定人员获得的。 颁发日期:这是毕业正式生效的时间,也代表着毕业生学业的结束。 其他信息:根据不同的专业和学位,可能会有一些特定的信息或章节。 价值很高,需要妥善保管。一般来说,应放置在安全、干燥、防潮的地方,避免长时间暴露在阳光下。如需使用,最好使用复印件而不是原件,以免丢失。 综上所述,是证明身份和学历的高价值文件。外观简单庄重,格式统一,包括重要的个人信息和发布日期。对持有人来说,妥善保管是非常重要的。

Jamie Indigo | @Jammer_Volts | #TechSEOBoost
A font loading late causes a full flash and re-write.
Mitigation: Preload fonts. Preload tells the browser that
you would like to fetch it sooner than the browser would
otherwise discover it because you are certain that it is
important for the current page.
<link rel="preload" href="/assets/Pacifico-Bold.woff2"
as="font" type="font/woff2" crossorigin>
CSR Poor CLS: Web Fonts causing FOIT/FOUT
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
At the time of
request
<!doctype html>
<head>
<title>Hello, TechSEO
Boost!
</head>
<body>
<h1>Wait.This isn’t
Boston :( </h1>
<p>Wash your hands.</p>
</body>
</html>
Server Side Rendering (SSR)
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
● Slow server response times
● Render-blocking JavaScript and CSS
● Resource load times
● Client-side rendering
Are all the server calculations valuable?
Do they contribute to page content?
SSR: Poor LCP
<!doctype html>
<head>
<title>Hello, TechSEO Boost!
</head>
<body>
<h1>Wait.This isn’t Boston :( </h1>
<p>Wash your hands.</p>
</body>
</html>
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
SSR Poor LCP: Media Declarations
The default media="all" (or no
declaration) matches all viewport
sizes.
Mitigation: Dynamic media queries
evaluate the viewport when the page
is loaded.
<link href="xsmall.css"
rel="stylesheet"
media="xsmall">
<link href="small.css"
rel="stylesheet"
media="small">
<link href="print.css"
rel="stylesheet"
media="print">

Recommended for you

一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理

特殊工艺完全按照原版制作【微信:A575476】【(uom毕业证)曼彻斯特大学毕业证成绩单offer】【微信:A575476】(留信学历认证永久存档查询)采用学校原版纸张(包括:隐形水印,阴影底纹,钢印LOGO烫金烫银,LOGO烫金烫银复合重叠,文字图案浮雕,激光镭射,紫外荧光,温感,复印防伪)行业标杆!精益求精,诚心合作,真诚制作!多年品质 ,按需精细制作,24小时接单,全套进口原装设备,十五年致力于帮助留学生解决难题,业务范围有加拿大、英国、澳洲、韩国、美国、新加坡,新西兰等学历材料,包您满意。 【业务选择办理准则】 一、工作未确定,回国需先给父母、亲戚朋友看下文凭的情况,办理一份就读学校的毕业证【微信:A575476】文凭即可 二、回国进私企、外企、自己做生意的情况,这些单位是不查询毕业证真伪的,而且国内没有渠道去查询国外文凭的真假,也不需要提供真实教育部认证。鉴于此,办理一份毕业证【微信:A575476】即可 三、进国企,银行,事业单位,考公务员等等,这些单位是必需要提供真实教育部认证的,办理教育部认证所需资料众多且烦琐,所有材料您都必须提供原件,我们凭借丰富的经验,快捷的绿色通道帮您快速整合材料,让您少走弯路。 留信网认证的作用: 1:该专业认证可证明留学生真实身份【微信:A575476】 2:同时对留学生所学专业登记给予评定 3:国家专业人才认证中心颁发入库证书 4:这个认证书并且可以归档倒地方 5:凡事获得留信网入网的信息将会逐步更新到个人身份内,将在公安局网内查询个人身份证信息后,同步读取人才网入库信息 6:个人职称评审加20分 7:个人信誉贷款加10分 8:在国家人才网主办的国家网络招聘大会中纳入资料,供国家高端企业选择人才 → 【关于价格问题(保证一手价格) 我们所定的价格是非常合理的,而且我们现在做得单子大多数都是代理和回头客户介绍的所以一般现在有新的单子 我给客户的都是第一手的代理价格,因为我想坦诚对待大家 不想跟大家在价格方面浪费时间 对于老客户或者被老客户介绍过来的朋友,我们都会适当给一些优惠。 选择实体注册公司办理,更放心,更安全!我们的承诺:可来公司面谈,可签订合同,会陪同客户一起到教育部认证窗口递交认证材料,客户在教育部官方认证查询网站查询到认证通过结果后付款,不成功不收费! 办理(uom毕业证)曼彻斯特大学毕业证【微信:A575476】外观非常精致,由特殊纸质材料制成,上面印有校徽、校名、毕业生姓名、专业等信息。 办理(uom毕业证)曼彻斯特大学毕业证【微信:A575476】格式相对统一,各专业都有相应的模板。通常包括���下部分: 校徽:象征着学校的荣誉和传承。 校名:学校英文全称 授予学位:本部分将注明获得的具体学位名称。 毕业生姓名:这是最重要的信息之一,标志着该证书是由特定人员获得的。 颁发日期:这是毕业正式生效的时间,也代表着毕业生学业的结束。 其他信息:根据不同的专业和学位,可能会有一些特定的信息或章节。 办理(uom毕业证)曼彻斯特大学毕业证【微信:A575476】价值很高,需要妥善保管。一般来说,应放置在安全、干燥、防潮的地方,避免长时间暴露在阳光下。如需使用,最好使用复印件而不是原件,以免丢失。 综上所述,办理(uom毕业证)曼彻斯特大学毕业证【微信:A575476 】是证明身份和学历的高价值文件。外观简单庄重,格式统一,包括重要的个人信息和发布日期。对持有人来说,妥善保管是非常重要的。

特拉利理工学院毕业证沃特福德理工学院毕业证邓莱里文艺理工学院毕业证
PSD to Wordpress Service Providers in 2024
PSD to Wordpress Service Providers in 2024PSD to Wordpress Service Providers in 2024
PSD to Wordpress Service Providers in 2024

These are the best companies to convert for psd to wordpress theme. You can choose according to need your budget and requirements.

convert psd to wordpress companypsd to wordpress conversion companypsd to wordpress company
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理

特殊工艺完全按照原版制作【微信:A575476】【(greenwich毕业证书)英国格林威治大学毕业证成绩单offer】【微信:A575476】(留信学历认证永久存档查询)采用学校原版纸张(包括:隐形水印,阴影底纹,钢印LOGO烫金烫银,LOGO烫金烫银复合重叠,文字图案浮雕,激光镭射,紫外荧光,温感,复印防伪)行业标杆!精益求精,诚心合作,真诚制作!多年品质 ,按需精细制作,24小时接单,全套进口原装设备,十五年致力于帮助留学生解决难题,业务范围有加拿大、英国、澳洲、韩国、美国、新加坡,新西兰等学历材料,包您满意。 【业务选择办理准则】 一、工作未确定,回国需先给父母、亲戚朋友看下文凭的情况,办理一份就读学校的毕业证【微信:A575476】文凭即可 二、回国进私企、外企、自己做生意的情况,这些单位是不查询毕业证真伪的,而且国内没有渠道去查询国外文凭的真假,也不需要提供真实教育部认证。鉴于此,办理一份毕业证【微信:A575476】即可 三、进国企,银行,事业单位,考公务员等等,这些单位是必需要提供真实教育部认证的,办理教育部认证所需资料众多且烦琐,所有材料您都必须提供原件,我们凭借丰富的经验,快捷的绿色通道帮您快速整合材料,让您少走弯路。 留信网认证的作用: 1:该专业认证可证明留学生真实身份【微信:A575476】 2:同时对留学生所学专业登记给予评定 3:国家专业人才认证中心颁发入库证书 4:这个认证书并且可以归档倒地方 5:凡事获得留信网入网的信息将会逐步更新到个人身份内,将在公安局网内查询个人身份证信息后,同步读取人才网入库信息 6:个人职称评审加20分 7:个人信誉贷款加10分 8:在国家人才网主办的国家网络招聘大会中纳入资料,供国家高端企业选择人才 → 【关于价格问题(保证一手价格) 我们所定的价格是非常合理的,而且我们现在做得单子大多数都是代理和回头客户介绍的所以一般现在有新的单子 我给客户的都是第一手的代理价格,因为我想坦诚对待大家 不想跟大家在价格方面浪费时间 对于老客户或者被老客户介绍过来的朋友,我们都会适当给一些优惠。 选择实体注册公司办理,更放心,更安全!我们的承诺:可来公司面谈,可签订合同,会陪同客户一起到教育部认证窗口递交认证材料,客户在教育部官方认证查询网站查询到认证通过结果后付款,不成功不收费! 办理(greenwich毕业证书)英国格林威治大学毕业证【微信:A575476】外观非常精致,由特殊纸质材料制成,上面印有校徽、校名、毕业生姓名、专业等信息。 办理(greenwich毕业证书)英国格林威治大学毕业证【微信:A575476】格式相对统一,各专业都有相应的模板。通常包括以下部分: 校徽:象征着学校的荣誉和传承。 校名:学校英文全称 授予学位:本部分将注明获得的具体学位名称。 毕业生姓名:这是最重要的信息之一,标志着该证书是由特定人员获得的。 颁发日期:这是毕业正式生效的时间,也代表着毕业生学业的结束。 其他信息:根据不同的专业和学位,可能会有一些特定的信息或章节。 办理(greenwich毕业证书)英国格林威治大学毕业证【微信:A575476】价值很高,需要妥善保管。一般来说,应放置在安全、干燥、防潮的地方,避免长时间暴露在阳光下。如需使用,最好使用复印件而不是原件,以免丢失。 综上所述,办理(greenwich毕业证书)英国格林威治大学毕业证【微信:A575476 】是证明身份和学历的高价值文件。外观简单庄重,格式统一,包括重要的个人信息和发布日期。对持有人来说,妥善保管是非常重要的。

伦敦大学毕业证伦敦商学院毕业证牛津大学毕业证
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
During the
build
Static Rendering
<!doctype html>
<head>
<title>Hello, TechSEO
Boost!
</head>
<body>
<h1>Wait.This isn’t
Boston :( </h1>
<p>Wash your hands.</p>
</body>
</html>
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Cons
● $$$
● Tricky to get "right"
● Only works for static content – not
for content that’s meant to change
(think personalization and A/B
testing)
Pros
● Low TTFB
● Delivers parsed HTML
Static Rendering: YMMV
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Dynamic Rendering
Crawler
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
2x
server costs, test
cases, and QA
½
visibility into what is
actually happening

Recommended for you

一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证���何办理

特殊工艺完全按照原版制作【微信:A575476】【(lu毕业证书)英国拉夫堡大学毕业证成绩单offer】【微信:A575476】(留信学历认证永久存档查询)采用学校原版纸张(包括:隐形水印,阴影底纹,钢印LOGO烫金烫银,LOGO烫金烫银复合重叠,文字图案浮雕,激光镭射,紫外荧光,温感,复印防伪)行业标杆!精益求精,诚心合作,真诚制作!多年品质 ,按需精细制作,24小时接单,全套进口原装设备,十五年致力于帮助留学生解决难题,业务范围有加拿大、英国、澳洲、韩国、美国、新加坡,新西兰等学历材料,包您满意。 【业务选择办理准则】 一、工作未确定,回国需先给父母、亲戚朋友看下文凭的情况,办理一份就读学校的毕业证【微信:A575476】文凭即可 二、回国进私企、外企、自己做生意的情况,这些单位是不查询毕业证真伪的,而且国内没有渠道去查询国外文凭的真假,也不需要提供真实教育部认证。鉴于此,办理一份毕业证【微信:A575476】即可 三、进国企,银行,事业单位,考公务员等等,这些单位是必需要提供真实教育部认证的,办理教育部认证所需资料众多且烦琐,所有材料您都必须提供原件,我们凭借丰富的经验,快捷的绿色通道帮您快速整合材料,让您少走弯路。 留信网认证的作用: 1:该专业认证可证明留学生真实身份【微信:A575476】 2:同时对留学生所学专业登记给予评定 3:国家专业人才认证中心颁发入库证书 4:这个认证书并且可以归档倒地方 5:凡事获得留信网入网的信息将会逐步更新到个人身份内,将在公安局网内查询个人身份证信息后,同步读取人才网入库信息 6:个人职称评审加20分 7:个人信誉贷款加10分 8:在国家人才网主办的国家网络招聘大会中纳入资料,供国家高端企业选择人才 → 【关于价格问题(保证一手价格) 我们所定的价格是非常合理的,而且我们现在做得单子大多数都是代理和回头客户介绍的所以一般现在有新的单子 我给客户的都是第一手的代理价格,因为我想坦诚对待大家 不想跟大家在价格方面浪费时间 对于老客户或者被老客户介绍过来的朋友,我们都会适当给一些优惠。 选择实体注册公司办理,更放心,更安全!我们的承诺:可来公司面谈,可签订合同,会陪同客户一起到教育部认证窗口递交认证材料,客户在教育部官方认证查询网站查询到认证通过结果后付款,不成功不收费! 办理(lu毕业证书)英国拉夫堡大学毕业证【微信:A575476】外观非常精致,由特殊纸质材料制成,上面印有校徽、校名、毕业生姓名、专业等信息。 办理(lu毕业证书)英国拉夫堡大学毕业证【微信:A575476】格式相对统一,各专业都有相应的模板。通常包括以下部分: 校徽:象征着学校的荣誉和传承。 校名:学校英文全称 授予学位:本部分将注明获得的具体学位名称。 毕业生姓名:这是最重要的信息之一,标志着该证书是由特定人员获得的。 颁发日期:这是毕业正式生效的时间,也代表着毕业生学业的结束。 其他信息:根据不同的专业和学位,可能会有一些特定的信息或章节。 办理(lu毕业证书)英国拉夫堡大学毕业证【微信:A575476】价值很高,需要妥善保管。一般来说,应放置在安全、干燥、防潮的地方,避免长时间暴露在阳光下。如需使用,最好使用复印件而不是原件,以免丢失。 综上所述,办理(lu毕业证书)英国拉夫堡大学毕业证【微信:A575476 】是证明身份和学历的高价值文件。外观简单庄重,格式统一,包括重要的个人信息和发布日期。对持有人来说,妥善保管是非常重要的。

白金汉大学毕业证赫瑞瓦特大学毕业证利物浦大学毕业证
Steps involved in the implementation of EDI in a company
Steps involved in the implementation of EDI in a companySteps involved in the implementation of EDI in a company
Steps involved in the implementation of EDI in a company

Steps in EDI implementation Value Added Networks Internet based EDI Work Flow Coordination

edi
Corporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptxCorporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptx

kkkkkkkkkk

Jamie Indigo | @Jammer_Volts | #TechSEOBoost
"It is not reasonable."
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Rehydration
Above the fold
HTML
+
Below the fold
scripts
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Load what matters when it matters.
Jamie Indigo | @Jammer_Volts | #TechSEOBoost
Image
credit:
John
Fowler

Recommended for you

一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理

特殊工艺完全按照原版制作【微信:A575476】【(mqu毕业证)麦考瑞大学毕业证成绩单offer】【微信:A575476】(留信学历认证永久存档查询)采用学校原版纸张(包括:隐形水印,阴影底纹,钢印LOGO烫金烫银,LOGO烫金烫银复合���叠,文字图案浮雕,激光镭射,紫外荧光,温感,复印防伪)行业标杆!精益求精,诚心合作,真诚制作!多年品质 ,按需精细制作,24小时接单,全套进口原装设备,十五年致力于帮助留学生解决难题,业务范围有加拿大、英国、澳洲、韩国、美国、新加坡,新西兰等学历材料,包您满意。 【业务选择办理准则】 一、工作未确定,回国需先给父母、亲戚朋友看下文凭的情况,办理一份就读学校的毕业证【微信:A575476】文凭即可 二、回国进私企、外企、自己做生意的情况,这些单位是不查询毕业证真伪的,而且国内没有渠道去查询国外文凭的真假,也不需要提供真实教育部认证。鉴于此,办理一份毕业证【微信:A575476】即可 三、进国企,银行,事业单位,考公务员等等,这些单位是必需要提供真实教育部认证的,办理教育部认证所需资料众多且烦琐,所有材料您都必须提供原件,我们凭借丰富的经验,快捷的绿色通道帮您快速整合材料,让您少走弯路。 留信网认证的作用: 1:该专业认证可证明留学生真实身份【微信:A575476】 2:同时对留学生所学专业登记给予评定 3:国家专业人才认证中心颁发入库证书 4:这个认证书并且可以归档倒地方 5:凡事获得留信网入网的信息将会逐步更新到个人身份内,将在公安局网内查询个人身份证信息后,同步读取人才网入库信息 6:个人职称评审加20分 7:个人信誉贷款加10分 8:在国家人才网主办的国家网络招聘大会中纳入资料,供国家高端企业选择人才 → 【关于价格问题(保证一手价格) 我们所定的价格是非常合理的,而且我们现在做得单子大多数都是代理和回头客户介绍的所以一般现在有新的单子 我给客户的都是第一手的代理价格,因为我想坦诚对待大家 不想跟大家在价格方面浪费时间 对于老客户或者被老客户介绍过来的朋友,我们都会适当给一些优惠。 选择实体注册公司办理,更放心,更安全!我们的承诺:可来公司面谈,可签订合同,会陪同客户一起到教育部认证窗口递交认证材料,客户在教育部官方认证查询网站查询到认证通过结果后付款,不成功不收费! 办理(mqu毕业证)麦考瑞大学毕业证【微信:A575476】外观非常精致,由特殊纸质材料制成,上面印有校徽、校名、毕业生姓名、专业等信息。 办理(mqu毕业证)麦考瑞大学毕业证【微信:A575476】格式相对统一,各专业都有相应的模板。通常包括以下部分: 校徽:象征着学校的荣誉和传承。 校名:学校英文全称 授予学位:本部分将注明获得的具体学位名称。 毕业生姓名:这是最重要的信息之一,标志着该证书是由特定人员获得的。 颁发日期:这是毕业正式生效的时间,也代表着毕业生学业的结束。 其他信息:根据不同的专业和学位,可能会有一些特定的信息或章节。 办理(mqu毕业证)麦考瑞大学毕业证【微信:A575476】价值很高,需要妥善保管。一般来说,应放置在安全、干燥、防潮的地方,避免长时间暴露在阳光下。如需使用,最好使用复印件而不是原件,以免丢失。 综上所述,办理(mqu毕业证)麦考瑞大学毕业证【微信:A575476 】是证明身份和学历的高价值文件。外观简单庄重,格式统一,包括重要的个人信息和发布日期。对持有人来说,妥善保管是非常重要的。

特拉利理工学院毕业证沃特福德理工学院毕业证邓莱里文艺理工学院毕业证
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理

特殊工艺完全按照原版制作【微信:A575476】【(爱大毕业证书)爱丁堡大学毕业证成绩单offer】【微信:A575476】(留信学历认证永久存档查询)采用学校原版纸张(包括:隐形水印,阴影底纹,钢印LOGO烫金烫银,LOGO烫金烫银复合重叠,文字图案浮雕,激光镭射,紫外荧光,温感,复印防伪)行业标杆!精益求精,诚心合作,真诚制作!多年品质 ,按需精细制作,24小时接单,全套进口原装设备,十五年致力于帮助留学生解决难题,业务范围有加拿大、英国、澳洲、韩国、美国、新加坡,新西兰等学历材料,包您满意。 【业务选择办理准则】 一、工作未确定,回国需先给父母、亲戚朋友看下文凭的情况,办理一份就读学校的毕业证【微信:A575476】文凭即可 二、回国进私企、外企、自己做生意的情况,这些单位是不查询毕业证真伪的,而且国内没有渠道去查询国外文凭的真假,也不需要提供真实教育部认证。鉴于此,办理一份毕业证【微信:A575476】即可 三、进国企,银行,事业单位,考公务员等等,这些单位是必需要提供真实教育部认证的,办理教育部认证所需资料众多且烦琐,所有材料您都必须提供原件,我们凭借丰富的经验,快捷的绿色通道帮您快速整合材料,让您少走弯路。 留信网认证的作用: 1:该专业认证可证明留学生真实身份【微信:A575476】 2:同时对留学生所学专业登记给予评定 3:国家专业人才认证中心颁发入库证书 4:这个认证书并且可以归档倒地方 5:凡事获得留信网入网的信息将会逐步更新到个人身份内,将在公安局网内查询个人身份证信息后,同步读取人才网入库信息 6:个人职称评审加20分 7:个人信誉贷款加10分 8:在国家人才网主办的国家网络招聘大会中纳入资料,供国家高端企业选择人才 → 【关于价格问题(保证一手价格) 我们所定的价格是非常合理的,而且我们现在做得单子大多数都是代理和回头客户介绍的所以一般现在有新的单子 我给客户的都是第一手的代理价格,因为我想坦诚对待大家 不想跟大家在价格方面浪费时间 对于老客户或者被老客户介绍过来的朋友,我们都会适当给一些优惠。 选择实体注册公司办理,更放心,更安全!我们的承诺:可来公司面谈,可签订合同,会陪同客户一起到教育部认证窗口递交认证材料,客户在教育部官方认证查询网站查询到认证通过结果后付款,不成功不收费! 办理(爱大毕业证书)爱丁堡大学毕业证【微信:A575476】外观非常精致,由特殊纸质材料制成,上面印有校徽、校名、毕业生姓名、专业等信息。 办理(爱大毕业证书)爱丁堡大学毕业证【微信:A575476】格式相对统一,各专业都有相应的模板。通常包括以下部分: 校徽:象征着学校的荣誉和传承。 校名:学校英文全称 授予学位:本部分将注明获得的具体学位名称。 毕业生姓名:这是最重要的信息之一,标志着该证书是由特定人员获得的。 颁发日期:这是毕业正式生效的时间,也代表着毕业生学业的结束。 其他信息:根据不同的专业和学位,可能会有一些特定的信息或章节。 办理(爱大毕业证书)爱丁堡大学毕业证【微信:A575476】价值很高,需要妥善保管。一般来说,应放置在安全、干燥、防潮的地方,避免长时间暴露在阳光下。如需使用,最好使用复印件而不是原件,以免丢失。 综上所述,办理(爱大毕业证书)爱丁堡大学毕业证【微信:A575476 】是证明身份和学历的高价值文件。外观简单庄重,格式统一,包括重要的个人信息和发布日期。对持有人来说,妥善保管是非常重要的。

胡弗汉顿大学毕业证贝德福特大学毕业证伦敦大学伯贝克学院毕业证
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理

特殊工艺完全按照原版制作【微信:A575476】【(hull毕业证书)英国赫尔大学毕业证成绩单offer】【微信:A575476】(留信学历认证永久存档查询)采用学校原版纸张(包括:隐形水印,阴影底纹,钢印LOGO烫金烫银,LOGO烫金烫银复合重叠,文字图案浮雕,激光镭射,紫外荧光,温感,复印防伪)行业标杆!精益求精,诚心合作,真诚制作!多年品质 ,按需精细制作,24小时接单,全套进口原装设备,十五年致力于帮助留学生解决难题,业务范围有加拿大、英国、澳洲、韩国、美国、新加坡,新西兰等学历材料,包您满意。 【业务选择办理准则】 一、工作未确定,回国需先给父母、亲戚朋友看下文凭的情况,办理一份就读学校的毕业证【微信:A575476】文凭即可 二、回国进私企、外企、自己做生意的情况,这些单位是不查询毕业证真伪的,而且国内没有渠道去查询国外文凭的真假,也不需要提供真实教育部认证。鉴于此,办理一份毕业证【微信:A575476】即可 三、进国企,银行,事业单位,考公务员等等,这些单位是必需要提供真实教育部认证的,办理教育部认证所需资料众多且烦琐,所有材料您都必须提供原件,我们凭借丰富的经验,快捷的绿色通道帮您快速整合材料,让您少走弯路。 留信网认证的作用: 1:该专业认证可证明留学生真实身份【微信:A575476】 2:同时对留学生所学专业登记给予评定 3:国家专业人才认证中心颁发入库证书 4:这个认证书并且可以归档倒地方 5:凡事获得留信网入网的信息将会逐步更新到个人身份内,将在公安局网内查询个人身份证信息后,同步读取人才网入库信息 6:个人职称评审加20分 7:个人信誉贷款加10分 8:在国家人才网主办的国家网络招聘大会中纳入资料,供国家高端企业选择人才 → 【关于价格问题(保证一手价格) 我们所定的价格是非常合理的,而且我们现在做得单子大多数都是代理和回头客户介绍的所以一般现在有新的单子 我给客户的都是第一手的代理价格,因为我想坦诚对待大家 不想跟大家在价格方面浪费时间 对于老客户或者被老客户介绍过来的朋友,我们都会适当给一些优惠。 选择实体注册公司办理,更放心,更安全!我们的承诺:可来公司面谈,可签订合同,会陪同客户一起到教育部认证窗口递交认证材料,客户在教育部官方认证查询网站查询到认证通过结果后付款,不成功不收费! 办理(hull毕业证书)英国赫尔大学毕业证【微信:A575476】外观非常精致,由特殊纸质材料制成,上面印有校徽、校名、毕业生姓名、专业等信息。 办理(hull毕业证书)英国赫尔大学毕业证【微信:A575476】格式相对统一,各专业都有相应的模板。通常包括以下部分: 校徽:象征着学校的荣誉和传承。 校名:学校英文全称 授予学位:本部分将注明获得的具体学位名称。 毕业生姓名:这是最重要的信息之一,标志着该证书是由特定人员获得的。 颁发日期:这是毕业正式生效的时间,也代表着毕业生学业的结束。 其他信息:根据不同的专业和学位,可能会有一些特定的信息或章节。 办理(hull毕业证书)英国赫尔大学毕业证【微信:A575476】价值很高,需要妥善保管。一般来说,应放置在安全、干燥、防潮的地方,避免长时间暴露在阳光下。如需使用,最好使用复印件而不是原件,以免丢失。 综上所述,办理(hull毕业证书)英国赫尔大学毕业证【微信:A575476 】是证明身份和学历的高价值文件。外观简单庄重,格式统一,包括重要的个人信息和发布日期。对持有人来说,妥善保管是非常重要的。

萨塞克斯大学毕业证布里斯托大学毕业证谢菲尔德大学毕业证
| ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄|
DON'T BE AFRAID
TO LEARN IN PUBLIC
|___________|
(__/) ||
(•ㅅ•) ||
/   づ

More Related Content

What's hot

Technical Foundations of Successful Internationalization - SMX Munich
Technical Foundations of Successful Internationalization - SMX MunichTechnical Foundations of Successful Internationalization - SMX Munich
Technical Foundations of Successful Internationalization - SMX Munich
Jamie Indigo
 
DeepCrawl Webinar: Performing SEO on the Edge
DeepCrawl Webinar: Performing SEO on the EdgeDeepCrawl Webinar: Performing SEO on the Edge
DeepCrawl Webinar: Performing SEO on the Edge
Dan Taylor
 
Automating Google Lighthouse
Automating Google LighthouseAutomating Google Lighthouse
Automating Google Lighthouse
Hamlet Batista
 
Challenges of building a search engine like web rendering service
Challenges of building a search engine like web rendering serviceChallenges of building a search engine like web rendering service
Challenges of building a search engine like web rendering service
Giacomo Zecchini
 
The New Renaissance of JavaScript
The New Renaissance of JavaScriptThe New Renaissance of JavaScript
The New Renaissance of JavaScript
Hamlet Batista
 
SEO for Angular - BrightonSEO 2018
SEO for Angular - BrightonSEO 2018SEO for Angular - BrightonSEO 2018
SEO for Angular - BrightonSEO 2018
Jamie Indigo
 
Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...
Izabela Wisniewska
 
TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service...
TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service...TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service...
TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service...
Catalyst
 
Tech SEO + Site Migrations - SMX Munich
Tech SEO + Site Migrations - SMX MunichTech SEO + Site Migrations - SMX Munich
Tech SEO + Site Migrations - SMX Munich
Jamie Indigo
 
Headless SEO: Optimising Next Gen Sites | brightonSEO 2021
Headless SEO: Optimising Next Gen Sites | brightonSEO 2021Headless SEO: Optimising Next Gen Sites | brightonSEO 2021
Headless SEO: Optimising Next Gen Sites | brightonSEO 2021
Alex Wright
 
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Hamlet Batista
 
Hey Googlebot, did you cache that ?
Hey Googlebot, did you cache that ?Hey Googlebot, did you cache that ?
Hey Googlebot, did you cache that ?
Petra Kis-Herczegh
 
SearchLove Boston 2018 - Bartosz Goralewicz - JavaScript: Looking Past the ...
SearchLove Boston 2018 -  Bartosz Goralewicz -  JavaScript: Looking Past the ...SearchLove Boston 2018 -  Bartosz Goralewicz -  JavaScript: Looking Past the ...
SearchLove Boston 2018 - Bartosz Goralewicz - JavaScript: Looking Past the ...
Distilled
 
Crafting Expertise, Authority and Trust with Entity-Based Content Strategy - ...
Crafting Expertise, Authority and Trust with Entity-Based Content Strategy - ...Crafting Expertise, Authority and Trust with Entity-Based Content Strategy - ...
Crafting Expertise, Authority and Trust with Entity-Based Content Strategy - ...
Jamie Indigo
 
Web Performance & Search Engines - A look beyond rankings
Web Performance & Search Engines - A look beyond rankingsWeb Performance & Search Engines - A look beyond rankings
Web Performance & Search Engines - A look beyond rankings
Giacomo Zecchini
 
How Agile Technical SEO Can Add Value To Your SEO Campaign, by Adam Gent
How Agile Technical SEO Can Add Value To Your SEO Campaign, by Adam GentHow Agile Technical SEO Can Add Value To Your SEO Campaign, by Adam Gent
How Agile Technical SEO Can Add Value To Your SEO Campaign, by Adam Gent
Branded3
 
SEO vs Angular
SEO vs AngularSEO vs Angular
SEO vs Angular
François
 
Debugging rendering problems at scale
Debugging rendering problems at scaleDebugging rendering problems at scale
Debugging rendering problems at scale
Giacomo Zecchini
 
BrightonSEO 2019 - Edge SEO - Using CDNs To Perform SEO On The Edge
BrightonSEO 2019 - Edge SEO - Using CDNs To Perform SEO On The EdgeBrightonSEO 2019 - Edge SEO - Using CDNs To Perform SEO On The Edge
BrightonSEO 2019 - Edge SEO - Using CDNs To Perform SEO On The Edge
Dan Taylor
 
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Katie Sylor-Miller
 

What's hot (20)

Technical Foundations of Successful Internationalization - SMX Munich
Technical Foundations of Successful Internationalization - SMX MunichTechnical Foundations of Successful Internationalization - SMX Munich
Technical Foundations of Successful Internationalization - SMX Munich
 
DeepCrawl Webinar: Performing SEO on the Edge
DeepCrawl Webinar: Performing SEO on the EdgeDeepCrawl Webinar: Performing SEO on the Edge
DeepCrawl Webinar: Performing SEO on the Edge
 
Automating Google Lighthouse
Automating Google LighthouseAutomating Google Lighthouse
Automating Google Lighthouse
 
Challenges of building a search engine like web rendering service
Challenges of building a search engine like web rendering serviceChallenges of building a search engine like web rendering service
Challenges of building a search engine like web rendering service
 
The New Renaissance of JavaScript
The New Renaissance of JavaScriptThe New Renaissance of JavaScript
The New Renaissance of JavaScript
 
SEO for Angular - BrightonSEO 2018
SEO for Angular - BrightonSEO 2018SEO for Angular - BrightonSEO 2018
SEO for Angular - BrightonSEO 2018
 
Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...
 
TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service...
TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service...TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service...
TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service...
 
Tech SEO + Site Migrations - SMX Munich
Tech SEO + Site Migrations - SMX MunichTech SEO + Site Migrations - SMX Munich
Tech SEO + Site Migrations - SMX Munich
 
Headless SEO: Optimising Next Gen Sites | brightonSEO 2021
Headless SEO: Optimising Next Gen Sites | brightonSEO 2021Headless SEO: Optimising Next Gen Sites | brightonSEO 2021
Headless SEO: Optimising Next Gen Sites | brightonSEO 2021
 
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5Solving Complex JavaScript Issues and Leveraging Semantic HTML5
Solving Complex JavaScript Issues and Leveraging Semantic HTML5
 
Hey Googlebot, did you cache that ?
Hey Googlebot, did you cache that ?Hey Googlebot, did you cache that ?
Hey Googlebot, did you cache that ?
 
SearchLove Boston 2018 - Bartosz Goralewicz - JavaScript: Looking Past the ...
SearchLove Boston 2018 -  Bartosz Goralewicz -  JavaScript: Looking Past the ...SearchLove Boston 2018 -  Bartosz Goralewicz -  JavaScript: Looking Past the ...
SearchLove Boston 2018 - Bartosz Goralewicz - JavaScript: Looking Past the ...
 
Crafting Expertise, Authority and Trust with Entity-Based Content Strategy - ...
Crafting Expertise, Authority and Trust with Entity-Based Content Strategy - ...Crafting Expertise, Authority and Trust with Entity-Based Content Strategy - ...
Crafting Expertise, Authority and Trust with Entity-Based Content Strategy - ...
 
Web Performance & Search Engines - A look beyond rankings
Web Performance & Search Engines - A look beyond rankingsWeb Performance & Search Engines - A look beyond rankings
Web Performance & Search Engines - A look beyond rankings
 
How Agile Technical SEO Can Add Value To Your SEO Campaign, by Adam Gent
How Agile Technical SEO Can Add Value To Your SEO Campaign, by Adam GentHow Agile Technical SEO Can Add Value To Your SEO Campaign, by Adam Gent
How Agile Technical SEO Can Add Value To Your SEO Campaign, by Adam Gent
 
SEO vs Angular
SEO vs AngularSEO vs Angular
SEO vs Angular
 
Debugging rendering problems at scale
Debugging rendering problems at scaleDebugging rendering problems at scale
Debugging rendering problems at scale
 
BrightonSEO 2019 - Edge SEO - Using CDNs To Perform SEO On The Edge
BrightonSEO 2019 - Edge SEO - Using CDNs To Perform SEO On The EdgeBrightonSEO 2019 - Edge SEO - Using CDNs To Perform SEO On The Edge
BrightonSEO 2019 - Edge SEO - Using CDNs To Perform SEO On The Edge
 
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
 

Similar to Rendering strategies: Measuring the devil's details in core web vitals - Jamie Indigo, TechSEO Boost 2021

TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...
TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...
TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...
Catalyst
 
Satisfying Business and Engineering Requirements: Client-server JavaScript, S...
Satisfying Business and Engineering Requirements: Client-server JavaScript, S...Satisfying Business and Engineering Requirements: Client-server JavaScript, S...
Satisfying Business and Engineering Requirements: Client-server JavaScript, S...
Jason Strimpel
 
Web Leaps Forward
Web Leaps ForwardWeb Leaps Forward
Web Leaps Forward
Moh Haghighat
 
Big Data And HTML5 (DevCon TLV 2012)
Big Data And HTML5 (DevCon TLV 2012)Big Data And HTML5 (DevCon TLV 2012)
Big Data And HTML5 (DevCon TLV 2012)
Ido Green
 
What's new in Android at I/O'16
What's new in Android at I/O'16What's new in Android at I/O'16
What's new in Android at I/O'16
Elif Boncuk
 
The ultimate guide to optimize your react native app performance in 2022
The ultimate guide to optimize your react native app performance in 2022The ultimate guide to optimize your react native app performance in 2022
The ultimate guide to optimize your react native app performance in 2022
Katy Slemon
 
GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...
GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...
GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...
IRJET Journal
 
Js foo - Sept 8 upload
Js foo - Sept 8 uploadJs foo - Sept 8 upload
Js foo - Sept 8 upload
Debnath Sinha
 
Mobile Web Applications using HTML5 [IndicThreads Mobile Application Develop...
Mobile Web Applications using HTML5  [IndicThreads Mobile Application Develop...Mobile Web Applications using HTML5  [IndicThreads Mobile Application Develop...
Mobile Web Applications using HTML5 [IndicThreads Mobile Application Develop...
IndicThreads
 
JUG Poznan - 2017.01.31
JUG Poznan - 2017.01.31 JUG Poznan - 2017.01.31
JUG Poznan - 2017.01.31
Omnilogy
 
Delivering Java Applications? Ensure Top Performance Every Time, with Intell...
 Delivering Java Applications? Ensure Top Performance Every Time, with Intell... Delivering Java Applications? Ensure Top Performance Every Time, with Intell...
Delivering Java Applications? Ensure Top Performance Every Time, with Intell...
John Williams
 
DevOps: Find Solutions, Not More Defects
DevOps: Find Solutions, Not More DefectsDevOps: Find Solutions, Not More Defects
DevOps: Find Solutions, Not More Defects
TechWell
 
Pravin_CV_4+years
Pravin_CV_4+yearsPravin_CV_4+years
Pravin_CV_4+years
Pravin Gurav
 
SEO Reporting in the Enterprise: Information is Power by AJ Mihalic - #SEJSum...
SEO Reporting in the Enterprise: Information is Power by AJ Mihalic - #SEJSum...SEO Reporting in the Enterprise: Information is Power by AJ Mihalic - #SEJSum...
SEO Reporting in the Enterprise: Information is Power by AJ Mihalic - #SEJSum...
Search Engine Journal
 
SEO Reporting in the Enterprise - AJ Mihalic - AYIMA
SEO Reporting in the Enterprise - AJ Mihalic - AYIMASEO Reporting in the Enterprise - AJ Mihalic - AYIMA
SEO Reporting in the Enterprise - AJ Mihalic - AYIMA
AJ Mihalic
 
Top 13 best front end web development tools to consider in 2021
Top 13 best front end web development tools to consider in 2021Top 13 best front end web development tools to consider in 2021
Top 13 best front end web development tools to consider in 2021
Samaritan InfoTech
 
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
G3 Communications
 
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
rayvillares
 
Building Mobile Optimized Websites
Building Mobile Optimized WebsitesBuilding Mobile Optimized Websites
Building Mobile Optimized Websites
haxorize
 
Best Practices for Troubleshooting Four Real-world Java Performance Issues
Best Practices for Troubleshooting Four Real-world Java Performance IssuesBest Practices for Troubleshooting Four Real-world Java Performance Issues
Best Practices for Troubleshooting Four Real-world Java Performance Issues
eG Innovations
 

Similar to Rendering strategies: Measuring the devil's details in core web vitals - Jamie Indigo, TechSEO Boost 2021 (20)

TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...
TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...
TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...
 
Satisfying Business and Engineering Requirements: Client-server JavaScript, S...
Satisfying Business and Engineering Requirements: Client-server JavaScript, S...Satisfying Business and Engineering Requirements: Client-server JavaScript, S...
Satisfying Business and Engineering Requirements: Client-server JavaScript, S...
 
Web Leaps Forward
Web Leaps ForwardWeb Leaps Forward
Web Leaps Forward
 
Big Data And HTML5 (DevCon TLV 2012)
Big Data And HTML5 (DevCon TLV 2012)Big Data And HTML5 (DevCon TLV 2012)
Big Data And HTML5 (DevCon TLV 2012)
 
What's new in Android at I/O'16
What's new in Android at I/O'16What's new in Android at I/O'16
What's new in Android at I/O'16
 
The ultimate guide to optimize your react native app performance in 2022
The ultimate guide to optimize your react native app performance in 2022The ultimate guide to optimize your react native app performance in 2022
The ultimate guide to optimize your react native app performance in 2022
 
GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...
GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...
GENERATION OF HTML CODE AUTOMATICALLY USING MOCK-UP IMAGES WITH MACHINE LEARN...
 
Js foo - Sept 8 upload
Js foo - Sept 8 uploadJs foo - Sept 8 upload
Js foo - Sept 8 upload
 
Mobile Web Applications using HTML5 [IndicThreads Mobile Application Develop...
Mobile Web Applications using HTML5  [IndicThreads Mobile Application Develop...Mobile Web Applications using HTML5  [IndicThreads Mobile Application Develop...
Mobile Web Applications using HTML5 [IndicThreads Mobile Application Develop...
 
JUG Poznan - 2017.01.31
JUG Poznan - 2017.01.31 JUG Poznan - 2017.01.31
JUG Poznan - 2017.01.31
 
Delivering Java Applications? Ensure Top Performance Every Time, with Intell...
 Delivering Java Applications? Ensure Top Performance Every Time, with Intell... Delivering Java Applications? Ensure Top Performance Every Time, with Intell...
Delivering Java Applications? Ensure Top Performance Every Time, with Intell...
 
DevOps: Find Solutions, Not More Defects
DevOps: Find Solutions, Not More DefectsDevOps: Find Solutions, Not More Defects
DevOps: Find Solutions, Not More Defects
 
Pravin_CV_4+years
Pravin_CV_4+yearsPravin_CV_4+years
Pravin_CV_4+years
 
SEO Reporting in the Enterprise: Information is Power by AJ Mihalic - #SEJSum...
SEO Reporting in the Enterprise: Information is Power by AJ Mihalic - #SEJSum...SEO Reporting in the Enterprise: Information is Power by AJ Mihalic - #SEJSum...
SEO Reporting in the Enterprise: Information is Power by AJ Mihalic - #SEJSum...
 
SEO Reporting in the Enterprise - AJ Mihalic - AYIMA
SEO Reporting in the Enterprise - AJ Mihalic - AYIMASEO Reporting in the Enterprise - AJ Mihalic - AYIMA
SEO Reporting in the Enterprise - AJ Mihalic - AYIMA
 
Top 13 best front end web development tools to consider in 2021
Top 13 best front end web development tools to consider in 2021Top 13 best front end web development tools to consider in 2021
Top 13 best front end web development tools to consider in 2021
 
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
5 Steps To Deliver The Fastest Mobile Shopping Experience This Holiday Season
 
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
 
Building Mobile Optimized Websites
Building Mobile Optimized WebsitesBuilding Mobile Optimized Websites
Building Mobile Optimized Websites
 
Best Practices for Troubleshooting Four Real-world Java Performance Issues
Best Practices for Troubleshooting Four Real-world Java Performance IssuesBest Practices for Troubleshooting Four Real-world Java Performance Issues
Best Practices for Troubleshooting Four Real-world Java Performance Issues
 

Recently uploaded

Carrington degree offer diploma Transcript
Carrington degree offer diploma TranscriptCarrington degree offer diploma Transcript
Carrington degree offer diploma Transcript
ubufe
 
Massey University degree offer diploma Transcript
Massey University degree offer diploma TranscriptMassey University degree offer diploma Transcript
Massey University degree offer diploma Transcript
ubufe
 
Future Trends What's Next for UI UX Design on Websites
Future Trends What's Next for UI UX Design on WebsitesFuture Trends What's Next for UI UX Design on Websites
Future Trends What's Next for UI UX Design on Websites
Serva AppLabs
 
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
taqyea
 
Lincoln University degree offer diploma Transcript
Lincoln University degree offer diploma TranscriptLincoln University degree offer diploma Transcript
Lincoln University degree offer diploma Transcript
ubufe
 
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
taqyea
 
PSD to Wordpress Service Providers in 2024
PSD to Wordpress Service Providers in 2024PSD to Wordpress Service Providers in 2024
PSD to Wordpress Service Providers in 2024
Bestdesign2hub
 
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
taqyea
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
taqyea
 
Steps involved in the implementation of EDI in a company
Steps involved in the implementation of EDI in a companySteps involved in the implementation of EDI in a company
Steps involved in the implementation of EDI in a company
sivaraman163206
 
Corporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptxCorporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptx
byubyu7
 
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
taqyea
 
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
taqyea
 
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
taqyea
 
How to Choose the Right UIUX Design Service for Optimal Customer Experience
How to Choose the Right UIUX Design Service for Optimal Customer ExperienceHow to Choose the Right UIUX Design Service for Optimal Customer Experience
How to Choose the Right UIUX Design Service for Optimal Customer Experience
Serva AppLabs
 
seo proposal | Kiyado Innovations LLP pdf
seo proposal | Kiyado Innovations LLP  pdfseo proposal | Kiyado Innovations LLP  pdf
seo proposal | Kiyado Innovations LLP pdf
diyakiyado
 
Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy FearsTarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur
 
Megalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor TerpercayaMegalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor Terpercaya
Megalive99
 
Bai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5 hot nhất
Bai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5  hot nhấtBai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5  hot nhất
Bai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5 hot nhất
Thiên Đường Tình Yêu
 
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
taqyea
 

Recently uploaded (20)

Carrington degree offer diploma Transcript
Carrington degree offer diploma TranscriptCarrington degree offer diploma Transcript
Carrington degree offer diploma Transcript
 
Massey University degree offer diploma Transcript
Massey University degree offer diploma TranscriptMassey University degree offer diploma Transcript
Massey University degree offer diploma Transcript
 
Future Trends What's Next for UI UX Design on Websites
Future Trends What's Next for UI UX Design on WebsitesFuture Trends What's Next for UI UX Design on Websites
Future Trends What's Next for UI UX Design on Websites
 
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
 
Lincoln University degree offer diploma Transcript
Lincoln University degree offer diploma TranscriptLincoln University degree offer diploma Transcript
Lincoln University degree offer diploma Transcript
 
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
 
PSD to Wordpress Service Providers in 2024
PSD to Wordpress Service Providers in 2024PSD to Wordpress Service Providers in 2024
PSD to Wordpress Service Providers in 2024
 
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
 
Steps involved in the implementation of EDI in a company
Steps involved in the implementation of EDI in a companySteps involved in the implementation of EDI in a company
Steps involved in the implementation of EDI in a company
 
Corporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptxCorporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptx
 
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
一比一原版(mqu毕业证)麦考瑞大学毕业证如何办理
 
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)爱丁堡大学毕业证如何办理
 
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
 
How to Choose the Right UIUX Design Service for Optimal Customer Experience
How to Choose the Right UIUX Design Service for Optimal Customer ExperienceHow to Choose the Right UIUX Design Service for Optimal Customer Experience
How to Choose the Right UIUX Design Service for Optimal Customer Experience
 
seo proposal | Kiyado Innovations LLP pdf
seo proposal | Kiyado Innovations LLP  pdfseo proposal | Kiyado Innovations LLP  pdf
seo proposal | Kiyado Innovations LLP pdf
 
Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy FearsTarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy Fears
 
Megalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor TerpercayaMegalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor Terpercaya
 
Bai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5 hot nhất
Bai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5  hot nhấtBai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5  hot nhất
Bai-Tập-Tiếng-Anh-On-Tập-He lớp 1- lớp 5 hot nhất
 
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
一比一原版(ucb毕业证书)英国伯明翰大学学院毕业证如何办理
 

Rendering strategies: Measuring the devil's details in core web vitals - Jamie Indigo, TechSEO Boost 2021

  • 1. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Rendering Strategies Measuring the Devil's Details in Core Web Vitals
  • 2. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Image credit: Ian Myles Core Web Vitals are coming.
  • 3. Jamie Indigo | @Jammer_Volts | #TechSEOBoost ● Understand Core Web Vital metrics and measurement ● Where and how CWV occur ● Rendering strategies with their respective CWV pratfalls, and mitigation tactics Our quest
  • 4. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Metrics and Measurements Core Web Vitals
  • 5. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Loading Interactivity Visual Stability � � ⏳ Images via: The SEO's Guide to Google's Core Web Vitals
  • 6. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Field Data is performance data collected from real page loads your users are experiencing in the wild. AKA Real User Monitoring (RUM) Crux data will be used in the Page Experience Ranking Signal. Crux = CWV source of truth Lab Data is performance data collected within a controlled environment with predefined device and network settings. AKA Emulated Data Use Lab Data for debugging performance issues and QAing fixes in lower environments. A quick note on Lab vs Field Data
  • 7. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Represents: Perceived loading experience Measurement: the point in the page load timeline when the page's largest image or text block is visible within the viewport. Behavior: Pages using the same page templates typically share the same LCP node Largest Contentful Paint (LCP) LCP time (in milliseconds) Color-coding 0–2,500 Green (fast) 2,500-4,000 Orange (moderate) Over 4,000 Red (slow)
  • 8. Jamie Indigo | @Jammer_Volts | #TechSEOBoost What can be LCP? Text blocks Images Video posters
  • 9. Jamie Indigo | @Jammer_Volts | #TechSEOBoost 1. Open Chrome Dev Tools to the Performance panel 2. Tick 'Web Vitals' 3. Click the 'start profiling and reload page Define LCP using Chrome DevTools
  • 10. Jamie Indigo | @Jammer_Volts | #TechSEOBoost 1. In DevTools, navigate to the Timings section of the Performance panel 2. Hover over the LCP marker 3. The element(s) that correspond to LCP is detailed in the Related Node field Define LCP using Chrome DevTools
  • 11. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Represents: Responsiveness to user input Measurement: the time from when a user first interacts with a page to the time when the browser is actually able to begin processing event handlers in response to that interaction. Behavior: FID is only available as field data. First Input Delay (FID) FID (in milliseconds) Color-coding 0-100 Green (fast) 101-299 Orange (moderate) >= 300 Red (slow)
  • 12. Jamie Indigo | @Jammer_Volts | #TechSEOBoost FID is a way of measuring main thread activity
  • 13. Jamie Indigo | @Jammer_Volts | #TechSEOBoost TBT Measures: Responsiveness to user input TBT Measurement: Total time in which the main thread is occupied by tasks taking more than 50ms to complete. Use Total Blocking Time (TBT) for lab tests TBT (in milliseconds) Color-coding 0–300 Green (fast) 301-599 Orange (moderate) Over 600 Red (slow)
  • 14. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Represents: Visual stability Measurement: a calculation based on the number of frames in which element(s) visually moves and the total distance in pixels the element(s) moved. Behavior: Often an element used across pages. Probably your cookie notice. Cumulative Layout Shift (CLS) CLS calculated score Color-coding 0–0.10 Green (fast) 0.11-0.24 Orange (moderate) >= 0.25 Red (slow)
  • 15. Jamie Indigo | @Jammer_Volts | #TechSEOBoost CLS is marked in the experience row as “layout shift” Details appear in the summary section Identify CLS elements using Chrome DevTools
  • 16. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Image credit: Joe Wue
  • 17. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Mobile Screen Resolution Stats Worldwide 360 x 640
  • 18. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Core Web Vitals measure how long it takes to complete the the script functions needed to paint the above the content.
  • 19. Jamie Indigo | @Jammer_Volts | #TechSEOBoost It's a simple formula User Screen Content
  • 20. Jamie Indigo | @Jammer_Volts | #TechSEOBoost the process of turning HTML into pixels Rendering:
  • 21. Jamie Indigo | @Jammer_Volts | #TechSEOBoost CWV Arena Pixel Pipeline
  • 22. Jamie Indigo | @Jammer_Volts | #TechSEOBoost The pixel pipeline JavaScript Style Layout Paint Composite Handles work that will result in visual changes Examples: ● jQuery’s animate function ● Sorting a data set ● Adding DOM elements to the page
  • 23. Jamie Indigo | @Jammer_Volts | #TechSEOBoost DOM HTML HTML Parser DOM Tree JavaScript modifies or adds content to the DOM. @Jammer_volts Step 1: Parsing turns a chunk of HTML into DOM nodes
  • 24. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Body h1 p img Before JavaScript Body h1 p img After JavaScript ol li li li p img
  • 25. Jamie Indigo | @Jammer_Volts | #TechSEOBoost The pixel pipeline Style calculations are the process of figuring out which CSS rules apply to which elements based on matching selectors. JavaScript Layout Paint Composite Style
  • 26. Jamie Indigo | @Jammer_Volts | #TechSEOBoost DOM HTML Style Sheets HTML Parser CSS Parser DOM Tree Style Rules Attachment @Jammer_volts Step 2: Style Add style calculations to the DOM
  • 27. Jamie Indigo | @Jammer_Volts | #TechSEOBoost The pixel pipeline JavaScript Style Once the browser knows which rules apply to an element it can begin to calculate how much space it takes up and where relative to the size of the viewport. The Core Web Vital metric Cumulative Layout Shift measures this. Paint Composite Layout
  • 28. Jamie Indigo | @Jammer_Volts | #TechSEOBoost DOM HTML Style Sheets HTML Parser CSS Parser DOM Tree Style Rules Render Tree Attachment Layout Step 3: Layout figure out where DOM elements end up relative to one another
  • 29. Jamie Indigo | @Jammer_Volts | #TechSEOBoost p p img h1 img ol img p
  • 30. Jamie Indigo | @Jammer_Volts | #TechSEOBoost The pixel pipeline JavaScript Style Layout Painting is the process of filling in pixels. It involves drawing out text, colors, images, borders, and shadows, essentially every visual part of the elements. The drawing is typically done onto multiple surfaces, often called layers. Largest content paint occurs here Composite Paint
  • 31. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Painting DOM HTML Style Sheets HTML Parser CSS Parser DOM Tree Style Rules Render Tree Attachment Layout Step 4: Paint converts layers of styled DOM elements into pixels
  • 32. Jamie Indigo | @Jammer_Volts | #TechSEOBoost The pixel pipeline JavaScript Style Layout Paint Composite Since the parts of the page were drawn into potentially multiple layers they need to be drawn to the screen in the correct order so that the page renders correctly. This is especially important for elements that overlap another, since a mistake could result in one element appearing over the top of another incorrectly.
  • 33. Jamie Indigo | @Jammer_Volts | #TechSEOBoost DOM HTML Style Sheets HTML Parser CSS Parser DOM Tree Style Rules Render Tree Attachment Layout Painting Composite Step 5: Composite assembles all layers into a final screen image
  • 34. Jamie Indigo | @Jammer_Volts | #TechSEOBoost What we think it’ll be like
  • 35. Jamie Indigo | @Jammer_Volts | #TechSEOBoost What it's actually like
  • 36. Jamie Indigo | @Jammer_Volts | #TechSEOBoost The end result is the same. How we do it matters.
  • 37. Jamie Indigo | @Jammer_Volts | #TechSEOBoost CWV Pratfalls and Mitigations Rendering Strategies
  • 38. Jamie Indigo | @Jammer_Volts | #TechSEOBoost ● Client Side ● Server Sider ● Static ● Dynamic ● Rehydration Rendering Strategies
  • 39. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Client Side Rendering (CSR) <!doctype html> <head> <script type="text/javascript" src="/main.js?ver=1.1.0"> </script> </head> <body> <app-root></app-root> </body> </html>
  • 40. Jamie Indigo | @Jammer_Volts | #TechSEOBoost CSR Poor LCP: CSR Source: https://web.dev/lcp/
  • 41. Jamie Indigo | @Jammer_Volts | #TechSEOBoost <rel="buyproduct.js"> = 99.5% success rate Each script has a probability to fail. With JavaScript Without JavaScript
  • 42. Jamie Indigo | @Jammer_Volts | #TechSEOBoost script1.js script2.js script3.js script4.js {Product name} {Product sku} {Product price} {Product category} {Product availability} {Shipping times} {Breadcrumbs} {Product description} {Product images} {Product specs} <!doctype html> <head> <script type="text/javascript" src="/main.js?ver=1.1.0"> </script> </head> <body> <app-root></app-root> </body> </html>
  • 43. Jamie Indigo | @Jammer_Volts | #TechSEOBoost script1.js script2.js script3.js script4.js {Product name} {Product sku} {Product price} {Product category} {Product availability} {Shipping times} {Breadcrumbs} {Product description} {Product images} {Product specs} mainbundle.js
  • 44. Jamie Indigo | @Jammer_Volts | #TechSEOBoost script1.js script2.js script3.js script4.js {Product name} {Product sku} {Product price} {Product category} {Product availability} {Shipping times} {Breadcrumbs} {Product description} {Product images} {Product specs} mainbundle.js
  • 45. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Chains are dependencies. Each segment of the chain is dependent on its initiator to execute. If a segment of the chain fails, all of its subsequent content fails. Mitigation: Avoid Critical Chains bundle.js script1.js script2.js script3.js script4.js {Product name} {Product sku} {Product price} {Product category} {Product availability} {Shipping times} {Breadcrumbs} {Product description} {Product images} {Product specs}
  • 46. Jamie Indigo | @Jammer_Volts | #TechSEOBoost CSR Poor LCP: Render-blocking JavaScript and CSS
  • 47. Jamie Indigo | @Jammer_Volts | #TechSEOBoost 2 types resources block rendering <link rel="stylesheet"> when ● Does not have a disabled attribute. When this attribute is present, the browser does not download the stylesheet. ● Does not have a media attribute that matches the user's device. <script> when ● Is in the <head> of the document. ● Does not have a defer attribute. ● Does not have an async attribute.
  • 48. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Tell non-critical assets to wait using asynchronous or defer attributes <rel=”myscript.js” async> <rel=”myscript.js” defer> Lazy load images in Chrome with native attributes <img src=”the-traveler.jpg” loading=”lazy”> Mitigation: Defer non critical assets
  • 49. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Inline small scripts into <head> using <style> and/or <script> tags for above the fold content ● Ideally inline CSS is immediately after critical metadata ● Load inline scripts before third party resources, style sheets and JS ● If the script is over 1 kB, avoid inlining it (Inline scripts are parsed and compiled on the main thread.) ● Remove inline functions from script bundles Mitigation: Inline Critical Assets
  • 50. Jamie Indigo | @Jammer_Volts | #TechSEOBoost CSR Poor LCP: Performance ● Google will limit CPU consumption ● Google will interrupt script ● Excessive CPU consumption negatively impacts indexing
  • 51. Jamie Indigo | @Jammer_Volts | #TechSEOBoost CSR: Poor FID Heavy JavaScript execution const heavy = true; While (heavy) { console.log("FID fail") }
  • 52. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Mitigation: Only ship contributing scripts
  • 53. Jamie Indigo | @Jammer_Volts | #TechSEOBoost CSR Poor CLS: Image dimensions ● Images without dimensions ● Ads, embeds, and iframes without dimensions Mitigation: Declare dimensions img { width: 100%; /* or max-width: 100%; */ height: auto; } Reserved slot: Ad space img { width: 100%; /* or max-width: 100%; */ height: auto; }
  • 54. Jamie Indigo | @Jammer_Volts | #TechSEOBoost * CSR Poor CLS: Loading above existing content Footer Header CLS Layout Score = impact fraction * distance fraction Mitigation: Prioritize Above the Fold content load
  • 55. Jamie Indigo | @Jammer_Volts | #TechSEOBoost CSR Poor CLS: document.write() Modern Browsers support speculative parsing off of the main thread. Read as: They parse ahead while scripts are being downloaded and executed. document.write() ruins all that hard work. Mitigation: Chances are this isn't the work of your devs. Talk to your point of content that for "magic" third-party tool.
  • 56. Jamie Indigo | @Jammer_Volts | #TechSEOBoost CSR Poor CLS: Style recalculations Changing the DOM will cause the browser to recalculate element styles (and possibly layouts). Mitigation: Lessen the scope and complexity of Style Calculations by: ● Reducing the complexity of your selectors. ● Reducing the number of elements being styled. ● Measure your Style Recalculation Cost ● Use BEM (Block, Element, Modifier) a class-centric methodology.
  • 57. Jamie Indigo | @Jammer_Volts | #TechSEOBoost A font loading late causes a full flash and re-write. Mitigation: Preload fonts. Preload tells the browser that you would like to fetch it sooner than the browser would otherwise discover it because you are certain that it is important for the current page. <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin> CSR Poor CLS: Web Fonts causing FOIT/FOUT
  • 58. Jamie Indigo | @Jammer_Volts | #TechSEOBoost At the time of request <!doctype html> <head> <title>Hello, TechSEO Boost! </head> <body> <h1>Wait.This isn’t Boston :( </h1> <p>Wash your hands.</p> </body> </html> Server Side Rendering (SSR)
  • 59. Jamie Indigo | @Jammer_Volts | #TechSEOBoost ● Slow server response times ● Render-blocking JavaScript and CSS ● Resource load times ● Client-side rendering Are all the server calculations valuable? Do they contribute to page content? SSR: Poor LCP <!doctype html> <head> <title>Hello, TechSEO Boost! </head> <body> <h1>Wait.This isn’t Boston :( </h1> <p>Wash your hands.</p> </body> </html>
  • 60. Jamie Indigo | @Jammer_Volts | #TechSEOBoost SSR Poor LCP: Media Declarations The default media="all" (or no declaration) matches all viewport sizes. Mitigation: Dynamic media queries evaluate the viewport when the page is loaded. <link href="xsmall.css" rel="stylesheet" media="xsmall"> <link href="small.css" rel="stylesheet" media="small"> <link href="print.css" rel="stylesheet" media="print">
  • 61. Jamie Indigo | @Jammer_Volts | #TechSEOBoost During the build Static Rendering <!doctype html> <head> <title>Hello, TechSEO Boost! </head> <body> <h1>Wait.This isn’t Boston :( </h1> <p>Wash your hands.</p> </body> </html>
  • 62. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Cons ● $$$ ● Tricky to get "right" ● Only works for static content – not for content that’s meant to change (think personalization and A/B testing) Pros ● Low TTFB ● Delivers parsed HTML Static Rendering: YMMV
  • 63. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Dynamic Rendering Crawler
  • 64. Jamie Indigo | @Jammer_Volts | #TechSEOBoost 2x server costs, test cases, and QA ½ visibility into what is actually happening
  • 65. Jamie Indigo | @Jammer_Volts | #TechSEOBoost "It is not reasonable."
  • 66. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Rehydration Above the fold HTML + Below the fold scripts
  • 67. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Load what matters when it matters.
  • 68. Jamie Indigo | @Jammer_Volts | #TechSEOBoost Image credit: John Fowler
  • 69. | ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄| DON'T BE AFRAID TO LEARN IN PUBLIC |___________| (__/) || (•ㅅ•) || /   づ